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