Extend ComboGrid Editors for DataGrid Of JQuery EasyUI

 

在JQueryEasyUI中为DataGrid自定义了一个ComboGrid编辑器。具体方法：
自己写一个扩展

$.extend($.fn.datagrid.defaults.editors, {
    combogrid: {
        init: function (container, options) {
            var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
            input.combogrid(options);
            return input;
        },
        destroy: function (target) {
            $(target).combogrid('destroy');
        },
        getValue: function (target) {
            return $(target).combogrid('getValue');
        },
        setValue: function (target, value) {
            $(target).combogrid('setValue', value);
        },
        resize: function (target, width) {
            $(target).combogrid('resize', width);
        }
    }
});

定义DataGrid

<table id="tt1" class="easyui-datagrid" singleselect="true" idfield="MaterialReceivedEntryID"
    fit="true" striped="true" rownumbers="true" fitcolumns="true" showfooter="true">
    <thead>
        <tr>
            <th field="ItemID" width="80" 
                formatter = "itemFormatter"
                editor="{
                type: 'combogrid', options: {
                    required: true, panelWidth:260, fitColumns:true, 
                    idField:'ItemID', textField:'Code',
                    url:'<%= Html.AttributeEncode(Url.Action("GetRMItems", "Item")) %>',
                    columns:[[
                        { field: 'Code', title: '物料代码',  80 }, 
                        { field: 'Material', title: '材质',  80, align: 'center'},
                        { field: 'Diameter', title: '直径',  60, align: 'center' }
                    ]], 
                    onSelect:function(rowIndex, rowData) {
                        $('#tt1').datagrid('updateRow', { 
                            index: _lastIndex, row: {
                            Material: rowData.Material, 
                            Diameter: rowData.Diameter } })
                    }
                }
            }">
                原材料代码
            </th>
            <th field="Material" width="80" align="center">
                材质
            </th>
            <th field="Diameter" width="60" align="center">
                直径(mm)
            </th>
            <th field="Long" width="60" align="center" editor="{ type: 'numberbox', options: { required: true}}">
                长度(mm)
            </th>
            <th field="ReceivedQty" width="60" align="center" editor="{ type: 'numberbox', options: { required: true}}">
                根数(PCS)
            </th>
            <th field="Weight" width="60" align="center" editor="{ type: 'numberbox', options: { required: true, precision: 3}}">
                重量(T)
            </th>
            <th field="HeatNumber" width="100" align="center" editor="{ type: 'validatebox', options: { required: true}}">
                炉号
            </th>
            <th field="Remark" width="80" align="center" editor="text">
                备注
            </th>
        </tr>
    </thead>
</table>

最后别忘了那个Formatter

function itemFormatter(value, row) {

    ... ...

}