jQuery EasyUI使用教程之启用数据网格内联编辑
<jQuery EasyUI最新试用版免费下载>
可编辑的功能已经添加到数据网格中了，它使用户能够添加新的行到数据网格中，用户还可以更新一个或多个行。本教程将介绍如何创建一个具有内联编辑功能的数据网格。
查看jQuery EasyUI演示
创建数据网格
$(
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。
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的教程！