扩展数据表格的编辑器

使用教程 » 扩展数据表格的编辑器

datagrid中添加了一些通用编辑器，允许用户编辑数据。 所有编辑器都在$.fn.datagrid.default .editors对象中定义，该对象可扩展为支持新编辑器。 本教程将向您展示如何向datagrid中添加一个新的numberspinner编辑器。

扩展numberspinner编辑器

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

在html标记中创建DataGrid

<table id="tt" style="width:600px;height:250px" url="data/datagrid_data.json" title="Editable DataGrid" iconCls="icon-edit" singleSelect="true" idField="itemid" fitColumns="true"> <thead> <tr> <th field="itemid" width="60">Item ID</th> <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th> <th field="unitcost" width="80" align="right" editor="numberspinner">Unit Cost</th> <th field="attr1" width="180" editor="text">Attribute</th> <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th> <th field="action" width="80" align="center" formatter="formatAction">Action</th> </tr> </thead> </table>

我们将numberspinner编辑器分配到'unit cost'字段。 当开始编辑一行时，用户可以使用numberspinner编辑器组件编辑数据。

下载 EasyUI 实例: