jQuery EasyUI使用教程之扩展数据网格的编辑器

<jQuery EasyUI最新试用版免费下载>

jQuery EasyUI允许一些常见的编辑器添加到数据网格中，以便用户编辑数据。所有的编辑器都定义在$.fn.datagrid.defaults.editors对象中，这个可以继承扩展以便支持新的编辑器。本教程将向您展示如何添加一个新的numberspinner编辑器到数据网格中。

查看jQuery EasyUI演示

扩展numberspinner编辑器

$.extend($.fn.datagrid.defaults.editors, {

numberspinner: {

init: function(container, options){

varinput = $('<input type="text">').appendTo(container);

returninput.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标记中创建数据网格

<tableid="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>

<thfield="itemid"width="60">Item ID</th>

<thfield="listprice"width="80"align="right"editor="{type:'numberbox',options:{precision:1}}">List Price</th>

<thfield="unitcost"width="80"align="right"editor="numberspinner">Unit Cost</th>

<thfield="attr1"width="180"editor="text">Attribute</th>

<thfield="status"width="60"align="center"editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>

<thfield="action"width="80"align="center"formatter="formatAction">Action</th>

</tr>

</thead>

</table>

我们分配numberspinner编辑器到 'unit cost' 字段中，当开始编辑一行时，用户可以通过numberspinner编辑器来编辑数据。

下载EasyUI示例：easyui-datagrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！