- 浏览: 654163 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (609)
- java (139)
- 数据库 (107)
- 微信 (23)
- IT生活 (5)
- web前端 (74)
- SSH (11)
- 设计模式 (12)
- 重要资料 (11)
- 其他 (15)
- java技巧 (23)
- 服务器 (9)
- 2D/GUI (3)
- JAVA3D (2)
- ANT (5)
- Apache项目 (19)
- 数据类型 (10)
- 报表 (3)
- Collections (6)
- SQL/JDBC (15)
- 开发类 (6)
- EJB (6)
- Email (6)
- 文件读写 (2)
- 游戏 (0)
- Flex (2)
- Generic (2)
- HIbernate (12)
- I18N (5)
- Java EE (9)
- java ME (4)
- JDK 6 (8)
- JNDI/LDAP (5)
- JSP (7)
- JSTL (2)
- 正则表达式 (2)
- 安全 (2)
- Struts2 (12)
- Spring (4)
- Web服务 (10)
- Xml (1)
- JavaScript (30)
- AJAX (7)
- 验证 (4)
- 上传下载 (1)
- office办公软件 (1)
- Android (2)
- IOS (0)
- Dubbo (3)
- memcached/redis (1)
- 小程序 (1)
- 微信公众号 (0)
最新评论
-
wf_wangfeng:
怎么我用第一种方法不行呢 alert(document.rea ...
当jsp页面完全加载完成后执行一个js函数 -
Lori_Liu:
有帮助,至少可以解决了目前所遇到的问题!谢谢..
当jsp页面完全加载完成后执行一个js函数 -
starbhhc:
String actionMessage = new Stri ...
Java读取txt文件乱码 -
starbhhc:
Sev7en_jun 写道GOOD
客气,互相交流。。
javaeye论坛规则小测验(答案)--star -
Sev7en_jun:
GOOD
javaeye论坛规则小测验(答案)--star
extjs学习笔记(六) grid中数据的保存,添加和删除
在上一个系列当中,我们学习了如何对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*/
9Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
10
11Ext.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,我们可以看到向服务器投递的数据:
接下来看看如何添加数据,我们在工具栏里边添加一个增加按钮,相关代码如下:
1tbar: [{
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键进行多行的选择。选择好之后,我们就来看看如何删除吧:
1tbar: [{
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*/
9Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
10
11Ext.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里边去被添加之后修改的行。无论是编辑,增加或者删除操作,都是在本地进行,需要自己写代码将改动发送到服务器端进行处理。
在上一个系列当中,我们学习了如何对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*/
9Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
10
11Ext.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,我们可以看到向服务器投递的数据:
接下来看看如何添加数据,我们在工具栏里边添加一个增加按钮,相关代码如下:
1tbar: [{
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键进行多行的选择。选择好之后,我们就来看看如何删除吧:
1tbar: [{
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*/
9Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
10
11Ext.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里边去被添加之后修改的行。无论是编辑,增加或者删除操作,都是在本地进行,需要自己写代码将改动发送到服务器端进行处理。
发表评论
-
npm安装教程
2020-11-23 16:09 688一、使用之前,我们先来掌握3个东西是用来干什么的。 npm ... -
手机上万能返回上一页代替history.go(-1)
2016-05-13 11:25 818最近在做wap2.0的手机wap,写返回上一页的时候,开始 ... -
3.nodejs nodejs的mysql模块
2016-04-12 22:20 555安装nodejs的mysql模块首先要选定一个数据库,我选择 ... -
2.nodejs 使用Express4.x搭建第一个Web应用
2016-04-12 09:36 598Express4.x 是一个开源的node.js项目框架 ... -
1.nodejs windows 下安装nodejs
2016-04-12 09:34 4061.下载: 在nodejs的官方网站下载mis文件。ht ... -
Nodejs学习
2016-04-11 17:21 525将介绍如何利Javascript做为服务端脚本,通过Node ... -
HTML5做手机站页面字体显示很小的解决方法
2016-05-28 23:31 729HTML5做手机站需要加上一部分代码,不然字体会显示很小的 ... -
jquery 校验
2015-07-07 11:16 0EasyUI 验证框使用方法: ... -
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2015-05-20 09:49 588一、javascript函数实现: //JavaS ... -
//from提交表单 使用ajax异步读取,回调函数
2015-04-24 18:05 0<%@ page language="ja ... -
js获取带checkbox行的记录的Id值的两个方法
2015-04-09 14:44 678第一种: function updateProcess() ... -
基于注解的SpringMVC简单介绍
2015-04-03 11:58 590SpringMVC是一个基于DispatcherServle ... -
Linux环境下Nginx的安装
2014-03-28 13:26 484Linux下命令: /usr/local/nginx/s ... -
自用打印(二)
2014-03-19 17:30 576<html> <title> ... -
自用打印方法(一)
2014-03-19 17:25 463经过验证的,自用的。 ... -
各种微博分享代码
2014-03-19 15:56 941<HTML> <HEAD> ... -
JSP页面打印(二)
2014-03-18 11:04 759<HTML><HEAD><T ... -
JSP页面打印方法(一)
2014-03-18 10:57 3159JSP页面打印方法 方法一:function Print ... -
jquery和js初始化加载的多种方法
2014-01-20 14:48 905jquery和js初始化加载页面的区别: jquery:等 ... -
js自动刷新当前页面
2013-12-19 14:09 794reload 方法,该方法强 ...
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4...
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
适合ExtJs开发人员extjs技术上手以及深入
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
语言程序设计资料:ExtJs学习笔记-2积分.doc
这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...
在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...
ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。...学习ExtJS可以帮助开发者快速构建功能丰富的、交互性强的Web应用。通过深入理解和实践,可以提升开发效率,创建出符合现代Web标准的用户界面。
Extjs4.0学习笔记大全.pdf,供大家学习
本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文 学习资料还很少。 google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电 子书 [Ext JS 6 By Example] 。这份资料在 PACKT 上卖 ...
exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net