ExtJS4.2学习(七)EditorGrid可编辑表格

原网址：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html

 上节讲到通过后台数据进行分页，分页工具条还可以放置在顶端，或者上下都有而不影响数据，因为它们都共用一个store

JavaScript Code 复制内容到剪贴板

1. //创建表格  
2. var grid = new Ext.grid.GridPanel({  
3.         renderTo:'grid', //渲染位置  
4.         autoHeight:true,  
5.         store:store,  
6.         width:550,  
7.         columns:columns, //显示列  
8.         bbar:new Ext.PagingToolbar({  
9.             pageSize:25, //每页显示几条数据  
10.             store:store,   
11.             displayInfo:true, //是否显示数据信息  
12.             displayMsg:'显示第 {0} 条到 {1} 条记录，一共  {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据  
13.             emptyMsg: "没有记录" //没有数据时显示信息  
14.         }),  
15.         tbar:new Ext.PagingToolbar({  
16.             pageSize:25, //每页显示几条数据  
17.             store:store,   
18.             displayInfo:true, //是否显示数据信息  
19.             displayMsg:'显示第 {0} 条到 {1} 条记录，一共  {2} 条', //只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据  
20.             emptyMsg: "没有记录" //没有数据时显示信息  
21.         })  
22.     });  

 

除了后台传递数据分页，默认的排序外，extjs还可以自定义排序，通过传递数据来进行后台排序。

如果需要对所有数据排序，则需要把排序信息提交到后台，由后台将排序信息组装到SQL里，然后再由后台将处理好的数据返回给前台。这就是前台与后台交互的过程，既然要提交到服务端，便需要将Ext.data.Store的remoteSort属性设置为true，这个属性是指是否允许远程排序，默认值为false。下次排序时就会有变化，不会立即显示出排序结果，而是将后台提交了2个参数，分别是sort和dir。sort表示需要排序的字段，dir表示升序或降序。后台根据这些参数进行处理。

Java Code 复制内容到剪贴板

1. req.getParameter("sort"); //排序字段  
2. req.getParameter("dir"); //升序还是降序  

以上知识是对上节的补充，现在开始将这节所学：可编辑表格--EditorGrid

大家使用过Mircrosoft Excel，它的功能强大，用户可随意添加或删除表格中的行和列，而且只保存一此即可。EditorGrid也提供这些功能，可以直接在表格里执行添加、删除、修改和查找等操作，然后一次性保存。此外，还可以动态修改某个单元格，这些单元格我们先暂时不能为空，保存时会进行检测，为空就无法保存，验证信息会给予提示。

以上实现的效果就是本节所要做的效果，现在看代码：

JavaScript Code 复制内容到剪贴板

1. Ext.onReady(function(){  
2.     //定义列  
3.     var columns = [  
4.         {header:'编号',dataIndex:'id',width:50,  
5.             editor:{  
6.                 allowBlank:true  
7.             }}, //sortable:true 可设置是否为该列进行排序  
8.         {header:'名称',dataIndex:'name',width:80,  
9.                 editor:{  
10.                     allowBlank:true  
11.                 }},  
12.         {header:'描述',dataIndex:'descn',width:112,  
13.                     editor:{  
14.                         allowBlank:true  
15.                     }}  
16.       ];  
17.     //定义数据  
18.     var data =[  
19.         ['1','小王','描述01'],  
20.         ['2','李四','描述02'],  
21.         ['3','张三','描述03'],  
22.         ['4','束洋洋','思考者日记网'],  
23.         ['5','高飞','描述05']  
24.     ];  
25.     //转换原始数据为EXT可以显示的数据  
26.     var store = new Ext.data.ArrayStore({  
27.         data:data,  
28.         fields:[  
29.            {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置  
30.            {name:'name'},  
31.            {name:'descn'}  
32.         ]  
33.     });  
34.     //加载数据  
35.     store.load();  
36.   
37.     //创建表格  
38.     var grid = new Ext.grid.GridPanel({  
39.         renderTo:'grid', //渲染位置  
40.         width:550,  
41.         autoHeight:true,  
42.         store:store,  
43.         columns:columns, //显示列  
44.         stripeRows:true, //斑马线效果  
45.         selType: 'cellmodel',  
46.         plugins:[  
47.                  Ext.create('Ext.grid.plugin.CellEditing',{  
48.                      clicksToEdit:1 //设置单击单元格编辑  
49.                  })  
50.         ],  
51.         tbar:['-',{  
52.             text:'添加一行',  
53.             handler:function(){  
54.                 var p ={  
55.                         id:'',  
56.                         name:'',  
57.                         descn:''  
58.                         };  
59.                     store.insert(0,p);  
60.                 }  
61.             },'-',{  
62.                 text:'删除一行',  
63.                 handler:function(){  
64.                     Ext.Msg.confirm('系统提示','确定要删除？',function(btn){  
65.                         if(btn=='yes'){  
66.                             var sm = grid.getSelectionModel();  
67.                             var record = sm.getSelection()[0];  
68.                             store.remove(record);  
69.                         }  
70.                     });  
71.                 }  
72.         },'-',{  
73.             text:'保存',  
74.             handler:function(){  
75.                 var m = store.getModifiedRecords().slice(0);  
76.                 var jsonArray = [];  
77.                 Ext.each(m,function(item){  
78.                     jsonArray.push(item.data);  
79.                 });  
80.                 Ext.Ajax.request({  
81.                     method:'POST',  
82.                     url:'/ExtJs4.2Pro/EditGridServlet',  
83.                     success:function(response){  
84.                         Ext.Msg.alert('系统提示',response.responseText,function(){  
85.                             store.load();  
86.                         });  
87.                     },  
88.                     failure:function(){  
89.                         Ext.Msg.alert("错误","与后台联系的时候出了问题。");  
90.                     },  
91.                     params:'data='+encodeURIComponent(Ext.encode(jsonArray))  
92.                 });  
93.             }  
94.         }]  
95.     });  
96. });  

这里我们启用了CellEditing插件，其他的部分并没有什么变化。可是看到的结果是，现在可以用TextField的方式随意修改单元格。记得不能让单元格为空，否则无法修改。

默认情况下，需要双击单元格才能激活编辑器，从而进行修改。不过，也可以给表格配置上clicksToEdit:1，这样就可以通过单击单元格激活编辑器，从而进行修改，上面的代码中已经用到了。

TextField不允许输入空值，因为在创建columns时对应的editor设置了allowBlank:false属性。allowBlank:false表示不运行在TextField中输入空值。

上面的示例中用到了数组对象的Slice(start,[end])方法，该方法返回一个新数组，包含了原函数从start到end所指定的元素，但是不包括end元素，比如a.slice(0,3)。如果start为负，则将它作为length+start处理（此处length为数组的长度，比如a.slice(-3,4)，相当于a.slice(2,4)）。如果end为负，就将它作为length+end处理（次数length为数组的长度，比如a.slice(0,-1)。如果省略end，那么slice方法将一直复制到原数组结尾，比如a.slice(1)）。如果省略end，那么slice方法将一直复制到原数组结尾，比如a.slice(1)。如果end出现在start之前，不复制任何元素到新数组中，比如a.slice(4,3)。示例中store.getModifiedRecords().slice(0)的作用就是复制store.getModifiedRecords()，保证store.getModifiedRecords()中的原始数据不受影响。

下面看下后台对输入的数据怎么进行保存的？

输入一行数据

点击保存后

后台代码

Java Code 复制内容到剪贴板

1. @SuppressWarnings("serial")  
2. public class EditGridServlet extends HttpServlet {  
3.     @Override  
4.     protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
5.             throws ServletException, IOException {  
6.         doPost(req,resp);  
7.     }  
8.   
9.     @Override  
10.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)  
11.             throws ServletException, IOException {  
12.         req.setCharacterEncoding("UTF-8");  
13.   
14.         String data = req.getParameter("data");  
15.         System.out.println(data);  
16.   
17.         resp.getWriter().print(data);  
18.     }  
19. }  

打印结果：