datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力。
看一个例子效果图:
代码如下:
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
|
$(
'#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="#" onclick="saverow('
+index+
')">Save</a> '
;
var
c =
'<a href="#" onclick="cancelrow('
+index+
')">Cancel</a>'
;
return
s+c;
}
else
{
var
e =
'<a href="#" onclick="editrow('
+index+
')">Edit</a> '
;
var
d =
'<a href="#" onclick="deleterow('
+index+
')">Delete</a>'
;
return
e+d;
}
}
}
]],
onBeforeEdit:
function
(index,row){
row.editing =
true
;
$(
'#tt'
).datagrid(
'refreshRow'
, index);
},
onAfterEdit:
function
(index,row){
row.editing =
false
;
$(
'#tt'
).datagrid(
'refreshRow'
, index);
},
onCancelEdit:
function
(index,row){
row.editing =
false
;
$(
'#tt'
).datagrid(
'refreshRow'
, index);
}
});
|