首页 > 代码库 > Extend ComboGrid Editors for DataGrid Of JQuery EasyUI

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: ‘物料代码‘, width: 80 },                         { field: ‘Material‘, title: ‘材质‘, width: 80, align: ‘center‘},                        { field: ‘Diameter‘, title: ‘直径‘, width: 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>最后别忘了那个Formatterfunction itemFormatter(value, row) {    ... ...}

Extend ComboGrid Editors for DataGrid Of JQuery EasyUI