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

2019独角兽企业重金招聘Python工程师标准>>>

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

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

查看jQuery EasyUI演示

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

< 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示例：easyui-datagrid-demo.zip

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

转载于:https://my.oschina.net/u/2317468/blog/625696