在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> 最后别忘了那个Formatter function itemFormatter(value, row) { ... ... }
时间: 2024-10-09 02:22:49