jQuery EasyUI数据网格（datagrid）的可编辑功能允许用户向数据网格（datagrid）添加一个新行，用户也可以更新一个或多个行。
本节的实例向您展示如何创建一个数据网格（datagrid）和内联编辑器。
$(function(){
$(#tt).datagrid({
title:Editable DataGrid,
iconCls:icon-edit,
width:660,
height:250,
singleSelect:true,
idField:itemid,
url:datagrid_data.json,
columns:[[
{field:itemid,title:Item ID,width:60},
{field:productid,title:Product,width:100,
formatter:function(value){
for(var i=0; i<products.length; i++){
if (products[i].productid == value) return products[i].name; }
return 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:150,editor:text},
{field:status,title:Status,width:50,align:center,
editor:{
type:checkbox,
options:{
on: P,
off:
}
}
},
{field:action,title:Action,width:70,align:center,
formatter:function(value,row,index){
if (row.editing){
var s = <a href="#" >为了启用数据网格行内编辑，您应该添加一个editor属性到列中。编辑器（editor）会告诉数据网格（datagrid）如何编辑字段及如何保存字段值。正如您所看到的，我们定义的三个编辑器（editor）：text、combobox 和 checkbox。
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));
}