[转载]Enable DataGrid Inline Editing - jQuery EasyUI

[转载]Enable DataGrid Inline Editing – jQuery EasyUI.

Some common editors are added into datagrid to allow users to edit data. All the editor are defined in $.fn.datagrid.defaults.editors object that can be extended to support new editor. This tutorial will show you how to add a new numberspinner editor into the datagrid.

View Demo

Extend the numberspinner editor

  1. $.extend($.fn.datagrid.defaults.editors, {
  2. numberspinner: {
  3. init: function(container, options){
  4. var input = $(‘<input type=”text”>’).appendTo(container);
  5. return input.numberspinner(options);
  6. },
  7. destroy: function(target){
  8. $(target).numberspinner(‘destroy’);
  9. },
  10. getValue: function(target){
  11. return $(target).numberspinner(‘getValue’);
  12. },
  13. setValue: function(target, value){
  14. $(target).numberspinner(‘setValue’,value);
  15. },
  16. resize: function(target, width){
  17. $(target).numberspinner(‘resize’,width);
  18. }
  19. }
  20. });

Create DataGrid in html markup

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

We assign the numberspinner editor to ‘unit cost’ field. When start editing a row, users can edit data with numberspinner editor component.

Download the EasyUI example:

easyui-datagrid-demo.zip
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏