Extend ComboGrid Editors for DataGrid Of JQuery EasyUI
2014-09-25 17:07
330 查看
在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) { ... ... }
相关文章推荐
- easyui datagrid editors扩展之combogrid
- extend jQuery easyUI datagrid methods
- easyui DataGrid editors扩展之combogrid ,combogrid 下拉选择后填充 editor 列内容方法
- (转)row selection for jquery easyui datagrid
- easyui datagrid editors扩展之combogrid
- jquery easyui datagrid editor datebox问题
- To extend jQuery function for gloable usage
- jQuery EasyUI API 中文文档 - 数据表格(DataGrid)
- jQuery EasyUI API 中文文档 - 组合表格(ComboGrid)
- struts2 整合 jQuery-easyUI之datagrid小例子
- jQuery EasyUI datagrid中的loadFilter和loadData用法
- DataGrid:Maintaining an Empty Row for the Entry of New Records
- jQuery easyui datagrid动态查询数据实例讲解
- jquery-easyui中为DataGrid创建复杂表头
- [转]扩展jQuery easyui datagrid增加动态改变列编辑的类型
- 解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题。
- jQuery EasyUI API 中文文档 - DataGrid数据表格
- DataGrid for jQuery 定义表头
- JQuery easyui Datagrid 分页事件
- jQuery EasyUI API 中文文档 - DataGrid 数据表格