jQuery EasyUI使用教程之启用数据网格内联编辑

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

可编辑的功能已经添加到数据网格中了，它使用户能够添加新的行到数据网格中，用户还可以更新一个或多个行。本教程将介绍如何创建一个具有内联编辑功能的数据网格。

查看jQuery EasyUI演示

创建数据网格

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

$( function (){ $( '#tt' ).datagrid({ title: 'Editable DataGrid' , iconCls: 'icon-edit' , width:660, height:250, singleSelect: true , idField: 'itemid' , url: 'data/datagrid_data.json' , columns:[[ {field: 'itemid' ,title: 'Item ID' ,width:60}, {field: 'productid' ,title: 'Product' ,width:100, formatter: function (value,row){ return row.productname || value; }, editor:{ type: 'combobox' , options:{ valueField: 'productid' , textField: 'name' , data:products, required: true } } }, {field: 'listprice' ,title: 'List Price' ,width:80,align: 'right' ,editor:{type: 'numberbox' ,options:{precision:1}}}, {field: 'unitcost' ,title: 'Unit Cost' ,width:80,align: 'right' ,editor: 'numberbox' }, {field: 'attr1' ,title: 'Attribute' ,width:180,editor: 'text' }, {field: 'status' ,title: 'Status' ,width:50,align: 'center' , editor:{ type: 'checkbox' , options:{ on:  'P' , off:  '' } } }, {field: 'action' ,title: 'Action' ,width:80,align: 'center' , formatter: function (value,row,index){ if (row.editing){ var s =  '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ' ; var c =  '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>' ; return s+c; }  else { var e =  '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ' ; var d =  '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>' ; return e+d; } } } ]], onEndEdit: function (index,row){ var ed = $( this ).datagrid( 'getEditor' , { index: index, field:  'productid' }); row.productname = $(ed.target).combobox( 'getText' ); }, onBeforeEdit: function (index,row){ row.editing =  true ; $( this ).datagrid( 'refreshRow' , index); }, onAfterEdit: function (index,row){ row.editing =  false ; $( this ).datagrid( 'refreshRow' , index); }, onCancelEdit: function (index,row){ row.editing =  false ; $( this ).datagrid( 'refreshRow' , index); } }); });

想要在数据网格中启用编辑功能，您需要添加一个编辑器属性到列中。编辑器会告诉数据网格如何编辑字段以及如何保存字段值，我们定义了三个编辑器：text、combobox和checkbox。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function getRowIndex(target){ var tr = $(target).closest( 'tr.datagrid-row' ); return parseInt(tr.attr( 'datagrid-row-index' )); } function editrow(target){ $( '#tt' ).datagrid( 'beginEdit' , getRowIndex(target)); } function deleterow(target){ $.messager.confirm( 'Confirm' , 'Are you sure?' , function (r){ if (r){ $( '#tt' ).datagrid( 'deleteRow' , getRowIndex(target)); } }); } function saverow(target){ $( '#tt' ).datagrid( 'endEdit' , getRowIndex(target)); } function cancelrow(target){ $( '#tt' ).datagrid( 'cancelEdit' , getRowIndex(target)); }

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

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