jQuery EasyUI使用教程之擴展數據網格的編輯器

<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的教程！