在上一个系列当中,我们学习了如何对grid中的内容进行编辑,但是编辑的结果我们并没有保存,这在实际的应用中是没有什么意义的。在有些情况下,除了编辑之外,还要通过grid进行数据的增加和删除,这两个操作也涉及到对于数据的保存。在这个系列里边,我们将学习如何保存数据以及通过grid对数据进行增加和删除。
我们在前边的学习过程中已经知道,grid其实只是显示数据,它通过配置参数store来获得数据,这个参数需要的是Store类或者其子类的一个对象,里边封装了我们需要的数据。我们现在应该已经比较熟悉Store类了,这次我们需要使用它的一个属性modified,里边保存了被修改过的记录的集合。我们通过把上个系列中的例子改变一下来看看如何保存数据:
1
//
/<reference path="vswd-ext_2.0.2.js" />
2

/**/
/*
3
*作者:大笨
4
*日期:2009-10-20
5
*版本:1.0
6
*博客地址:http://yage.cnblogs.com
7
*QQ:14202190
8
*/
9
Ext.BLANK_IMAGE_URL
=
'
../extjs/resources/images/default/s.gif
'
;
10

11

Ext.onReady(
function
()
{
12
Ext.QuickTips.init();
13
14
//格式化日期
15
function formatDate(value)
{
16
return value ? value.dateFormat('Y年m月d日') : '';
17
}
18
19
// 别名
20
var fm = Ext.form;
21
22
//构造一个只能包含checkbox的列
23
var checkColumn = new Ext.grid.CheckColumn(
{
24
header: 'Indoor?',
25
dataIndex: 'indoor',
26
width: 55
27
});
28
29
// 构造ColumnModel
30
var cm = new Ext.grid.ColumnModel(
{
31
columns: [
{
32
id: 'common',
33
header: 'Common Name',
34
dataIndex: 'common',
35
width: 220,
36
// 使用上边定义好的别名
37
editor: new fm.TextField(
{
38
allowBlank: false
39
})
40
},
{
41
header: 'Light',
42
dataIndex: 'light',
43
width: 130,
44
editor: new fm.ComboBox(
{
45
typeAhead: true,
46
triggerAction: 'all',
47
transform: 'light',
48
lazyRender: true,
49
listClass: 'x-combo-list-small'
50
})
51
},
{
52
header: 'Price',
53
dataIndex: 'price',
54
width: 70,
55
align: 'right',
56
renderer: 'usMoney',
57
editor: new fm.NumberField(
{
58
allowBlank: false,
59
allowNegative: false,
60
maxValue: 100000
61
})
62
},
{
63
header: 'Available',
64
dataIndex: 'availDate',
65
width: 95,
66
renderer: formatDate,
67
editor: new fm.DateField(
{
68
format: 'Y年m月d日',
69
minValue: '01/01/06',
70
disabledDays: [0, 6],
71
disabledDaysText: 'Plants are not available on the weekends'
72
})
73
},
74
checkColumn
75
],
76
defaults:
{
77
sortable: true
78
}
79
});
80
81
82
// 构造一个Store对象
83
var store = new Ext.data.Store(
{
84
85
url: 'plants.xml',
86
87
reader: new Ext.data.XmlReader(
88
{
89
record: 'plant'
90
},
91
92
[
93
{ name: 'common', type: 'string' },
94
{ name: 'botanical', type: 'string' },
95
{ name: 'light' },
96
{ name: 'price', type: 'float' },
97
{ name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
98
{ name: 'indoor', type: 'bool' }
99
]
100
),
101
102
sortInfo:
{ field: 'common', direction: 'ASC' }
103
});
104
105
// 构造可编辑的grid
106
var grid = new Ext.grid.EditorGridPanel(
{
107
store: store,
108
cm: cm,
109
renderTo: 'grid',
110
width: 600,
111
height: 300,
112
autoExpandColumn: 'common',
113
title: 'Edit Plants?',
114
frame: true,
115
plugins: checkColumn,
116
clicksToEdit: 1,
117
listeners:
{
118
"afterEdit":
{
119
fn: afterEdit,
120
scope: this
121
}
122
},
123
tbar: [
{
124
text: "保存",
125
handler: function()
{
126
var modified = store.modified;
127
updateData(modified);
128
}
129
}]
130
});
131
132
// 触发数据的加载
133
store.load();
134
135
//发送数据到服务器端进行更新
136
function updateData(modified)
{
137
var json = [];
138
Ext.each(modified, function(item)
{
139
json.push(item.data);
140
});
141
if (json.length > 0)
{
142
Ext.Ajax.request(
{
143
url: "EditGrid.aspx",
144
params:
{ data: Ext.util.JSON.encode(json) },
145
method: "POST",
146
success: function(response)
{
147
Ext.Msg.alert("信息", "数据更新成功!", function()
{ store.reload(); });
148
},
149
failure: function(response)
{
150
Ext.Msg.alert("警告", "数据更新失败,请稍后再试!");
151
}
152
});
153
}
154
else
{
155
Ext.Msg.alert("警告", "没有任何需要更新的数据!");
156
}
157
}
158
159
//编辑后触发的事件,可在此进行数据有效性的验证
160
function afterEdit(e)
{
161
if (e.field == "common")
{
162
if (e.value == "大笨")
{
163
Ext.Msg.alert("错误", "大笨是人物不是植物", function()
{ grid.startEditing(e.row, e.column) });
164
}
165
}
166
}
167
}
);
红色部分是新增加的代码,我们首先给grid增加了一个afterEdit事件,顾名思义,该事件在编辑之后被触发,我们可以在此时对数据的有效性进行验证,在本例中,我们只是简单的让common列的值不能等于一个特定的字符串,实际的项目中可能需要对每一列用正则表达式来进行验证。在触发afterEdit事件的时候会传递一个事件对象,该对象有如下几个属性:
grid:当前grid。
record:当前行。
field:当前列名。
value:被设置的值。
originalValue:编辑前的值。
row:行索引。
column:列索引。
我们还在grid上加了一个工具栏,上边放了一个保存按钮,用以将修改后的数据传递到服务器进行保存。由于记录的集合是一个复杂的json对象,我们需要的只是相关数据的几个,因此第137-140行对该集合进行了处理。当然,我们还需要在服务器端接收数据然后进行处理,在系列一中我们已经学习到相关的方法,这里不再赘述。我们看一看运行之后的效果图:

通过firebug,我们可以看到向服务器投递的数据:
接下来看看如何添加数据,我们在工具栏里边添加一个增加按钮,相关代码如下:
1
tbar: [
{
2
text: "保存",
3
handler: function()
{
4
var modified = store.modified;
5
6
updateData(modified);
7
}
8
}
,
9
'
-
'
,
10

{
11
text: "增加",
12
handler: function()
{
13
var Plant = store.recordType;
14
var p = new Plant(
{
15
common: 'New Plant 1',
16
light: 'Mostly Shade',
17
price: 0,
18
availDate: (new Date()).clearTime(),
19
indoor: false
20
});
21
grid.stopEditing();
22
store.insert(0, p);
23
grid.startEditing(0, 0);
24
}
25
}
26
]
在向grid中插入数据之前,必须要先获得插入数据的格式,Store类的recordType属性返回Record的构造函数,表明了数据的格式,然后通过构造函数传递数据,这样就准备好了要插入的数据了。接下来将grid的编辑状态关闭,插入数据,然后把要插入数据的第一列设置为编辑状态。运行后点击增加按钮后的效果如下:
可以看到,在grid的最上边增加了一行,对应行索引0,第一列出于编辑状态,对应列索引1,增加行中的默认初始数据就是我们在构造函数中传递进来的数据。注意,新增加的数据在修改之前是不会保存在store的modified属性里边的。
我们再来看看如何进行删除操作。在进行删除之前,我们必须要选择需要删除的行,grid有单元格选择模型和行选择模型两种,分别以类CellSelectionModel和RowSelectionModel来表示,默认是单元格选择模型,也就是在点击单元格的时候选中的是当前单元格,可以通过配置属性selModle(可简写为sm)来指定选择模式:sm:new Ext.grid.RowSelectionModel({singleSelection:true}), 这样就把选择模型改为了行选择模型,参数singleSelect指明是否是单选的,为真的时候只能选择一行,默认是false,可以按下ctrl键或者shift键进行多行的选择。选择好之后,我们就来看看如何删除吧:
1
tbar: [
{
2
text: "保存",
3
handler: function()
{
4
var modified = store.modified;
5
updateData(modified);
6
}
7
}
,
8
'
-
'
,
9

{
10
text: "增加",
11
handler: function()
{
12
var Plant = store.recordType;
13
var p = new Plant(
{
14
common: 'New Plant 1',
15
light: 'Mostly Shade',
16
price: 0,
17
availDate: (new Date()).clearTime(),
18
indoor: false
19
});
20
grid.stopEditing();
21
store.insert(0, p);
22
grid.startEditing(0, 0);
23
}
24
}
,
25
"
"
,
26

{
27
text: "删除",
28
handler: function()
{
29
var selModel = grid.getSelectionModel();
30
if (selModel.hasSelection())
{
31
Ext.Msg.confirm("警告", "确定要删除吗?", function(button)
{
32
if (button == "yes")
{
33
var selections = selModel.getSelections();
34
Ext.each(selections, function(item)
{
35
store.remove(item);
36
});
37
}
38
});
39
}
40
else
{
41
Ext.Msg.alert("错误", "没有任何行被选中,无法进行删除操作!");
42
}
43
}
44
}
45
]
我们先通过grid的getSelectionModel方法获得当前的选择模型,由于当前我们使用了行选择模型,所以返回的是RowSelectionModel的对象,然后通过该对象的hasSelection方法判断有没有行呗选中,没有的话就弹出一个对话框,如果有选中的行要被删除,弹出一个提示框让用户确定删除操作,如果确实要删除,使用RowSelectionModel对象的getSelections方法返回所有被选择行的集合,遍历此集合,从store中去掉集合中的行。看看效果图:
点击“是”,所有选中的行被删除,通过firebug可以看到被删除的行在store的removed属性中保存。
但是有些人可能不习惯这里所谓的行选择模型,他们可能喜欢看到在每一行的前边有一个checkbox,勾选了之后表示选择该行,extjs中的CheckboxSelectionModel类可以方便的让我们实现这一点,该类继承自RowSelectionModel,说明这只是一种特殊的行选择模型。我们具体来看看怎么进行操作。首先需要定义一个CheckboxSelectionModel的对象:var sm=new Ext.grid.CheckboxSelctionModle({checkOnly:true}),这里chckOnly:true表明只能通过checkbox来选择行,为false的话则还可以通过我们上边提到的方法来选择行。接下来需要把原来的行选择模型替换成我们新的sm,然后运行一下看看吧。我们没有看到预期中的效果,这是为什么呢?仔细想一想,确实应该是看不到什么效果,我们知道列都是在ColumnModel里边配置的,我们的CheckboxSelectionModel需要添加一列,自然也要在其中配置。那我们就加上去吧,完整的代码如下:
1
///
<
reference
path
="vswd-ext_2.0.2.js"
/>
2
/*
3
*作者:大笨
4
*日期:2009-10-20
5
*版本:1.0
6
*博客地址:http://yage.cnblogs.com
7
*QQ:14202190
8
*/
9
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
10

11
Ext.onReady(function() {
12
Ext.QuickTips.init();
13

14
//格式化日期
15
function formatDate(value) {
16
return value ? value.dateFormat('Y年m月d日') : '';
17
}
18

19
// 别名
20
var fm = Ext.form;
21

22
//checkbox选择模型
23
var sm = new Ext.grid.CheckboxSelectionModel({ checkOnly: true });
24
25
//构造一个只能包含checkbox的列
26
var checkColumn = new Ext.grid.CheckColumn({
27
header: 'Indoor?',
28
dataIndex: 'indoor',
29
width: 55
30
});
31

32
// 构造ColumnModel
33
var cm = new Ext.grid.ColumnModel({
34
columns: [
35
sm,
36
{
37
id: 'common',
38
header: 'Common Name',
39
dataIndex: 'common',
40
width: 220,
41
// 使用上边定义好的别名
42
editor: new fm.TextField({
43
allowBlank: false
44
})
45
}, {
46
header: 'Light',
47
dataIndex: 'light',
48
width: 130,
49
editor: new fm.ComboBox({
50
typeAhead: true,
51
triggerAction: 'all',
52
transform: 'light',
53
lazyRender: true,
54
listClass: 'x-combo-list-small'
55
})
56
}, {
57
header: 'Price',
58
dataIndex: 'price',
59
width: 70,
60
align: 'right',
61
renderer: 'usMoney',
62
editor: new fm.NumberField({
63
allowBlank: false,
64
allowNegative: false,
65
maxValue: 100000
66
})
67
}, {
68
header: 'Available',
69
dataIndex: 'availDate',
70
width: 95,
71
renderer: formatDate,
72
editor: new fm.DateField({
73
format: 'Y年m月d日',
74
minValue: '01/01/06',
75
disabledDays: [0, 6],
76
disabledDaysText: 'Plants are not available on the weekends'
77
})
78
},
79
checkColumn,
80
],
81
defaults: {
82
sortable: true
83
}
84
});
85

86

87
// 构造一个Store对象
88
var store = new Ext.data.Store({
89

90
url: 'plants.xml',
91

92
reader: new Ext.data.XmlReader(
93
{
94
record: 'plant'
95
},
96

97
[
98
{ name: 'common', type: 'string' },
99
{ name: 'botanical', type: 'string' },
100
{ name: 'light' },
101
{ name: 'price', type: 'float' },
102
{ name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
103
{ name: 'indoor', type: 'bool' }
104
]
105
),
106
sortInfo: { field: 'common', direction: 'ASC' }
107
});
108

109
// 构造可编辑的grid
110
var grid = new Ext.grid.EditorGridPanel({
111
//sm: new Ext.grid.RowSelectionModel({ singleSelect: false }),
112
sm: sm,
113
store: store,
114
cm: cm,
115
renderTo: 'grid',
116
width: 600,
117
height: 300,
118
autoExpandColumn: 'common',
119
title: 'Edit Plants?',
120
frame: true,
121
plugins: checkColumn,
122
clicksToEdit: 2,
123
listeners: {
124
"afterEdit": {
125
fn: afterEdit,
126
scope: this
127
}
128
},
129
tbar: [{
130
text: "保存",
131
handler: function() {
132
var modified = store.modified;
133
updateData(modified);
134
}
135
},
136
'-',
137
{
138
text: "增加",
139
handler: function() {
140
var Plant = store.recordType;
141
var p = new Plant({
142
common: 'New Plant 1',
143
light: 'Mostly Shade',
144
price: 0,
145
availDate: (new Date()).clearTime(),
146
indoor: false
147
});
148
grid.stopEditing();
149
store.insert(0, p);
150
grid.startEditing(0, 0);
151
}
152
},
153
" ",
154
{
155
text: "删除",
156
handler: function() {
157
var selModel = grid.getSelectionModel();
158
if (selModel.hasSelection()) {
159
Ext.Msg.confirm("警告", "确定要删除吗?", function(button) {
160
if (button == "yes") {
161
var selections = selModel.getSelections();
162
Ext.each(selections, function(item) {
163
store.remove(item);
164
store.removed.push(item);
165
});
166
}
167
168
});
169
}
170
else {
171
Ext.Msg.alert("错误", "没有任何行被选中,无法进行删除操作!");
172
}
173
}
174
}
175
]
176
});
177

178
// 触发数据的加载
179
store.load();
180

181
//发送数据到服务器端进行更新
182
function updateData(modified) {
183
var json = [];
184
Ext.each(modified, function(item) {
185
json.push(item.data);
186
});
187
if (json.length > 0) {
188
Ext.Ajax.request({
189
url: "EditGrid.aspx",
190
params: { data: Ext.util.JSON.encode(json) },
191
method: "POST",
192
success: function(response) {
193
Ext.Msg.alert("信息", "数据更新成功!", function() { store.reload(); });
194
},
195
failure: function(response) {
196
Ext.Msg.alert("警告", "数据更新失败,请稍后再试!");
197
}
198
});
199
}
200
else {
201
Ext.Msg.alert("警告", "没有任何需要更新的数据!");
202
}
203
}
204

205
//编辑后触发的事件,可在此进行数据有效性的验证
206
function afterEdit(e) {
207
if (e.field == "common") {
208
if (e.value == "大笨") {
209
Ext.Msg.alert("错误", "大笨是人物不是植物", function() { grid.startEditing(e.row, e.column) });
210
}
211
}
212
}
213
});
再运行一下看看,OK,我们想要的效果出来了:

最后我们来总结一下,当修改grid中的内容时,Store类的modified会自动将被修改的行保存下来;当删除的时候,Store类给我们提供了一个 removed属性,但不知道为什么不自动保存删除的行,不过自己添加也很简单;增加是最麻烦的,我们可能需要一些小技巧来保存添加的行,无论是修改的还是未修改的,可以都放到Store类的modified属性之中,也可以放在自己建的一个集合中,但是需要从modified里边去被添加之后修改的行。无论是编辑,增加或者删除操作,都是在本地进行,需要自己写代码将改动发送到服务器端进行处理。