上节讲到通过后台数据进行分页，分页工具条还可以放置在顶端，或者上下都有而不影响数据，因为它们都共用一个store
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//创建表格
var
grid =
new
Ext.grid.GridPanel({
renderTo:
'grid'
,
//渲染位置
autoHeight:
true
,
store:store,
width:550,
columns:columns,
//显示列
bbar:
new
Ext.PagingToolbar({
pageSize:25,
//每页显示几条数据
store:store,
displayInfo:
true
,
//是否显示数据信息
displayMsg:
'显示第 {0} 条到 {1} 条记录，一共 {2} 条'
,
//只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据
emptyMsg:
"没有记录"
//没有数据时显示信息
}),
tbar:
new
Ext.PagingToolbar({
pageSize:25,
//每页显示几条数据
store:store,
displayInfo:
true
,
//是否显示数据信息
displayMsg:
'显示第 {0} 条到 {1} 条记录，一共 {2} 条'
,
//只要当displayInfo为true时才有效，用来显示有数据时的提示信息，{0},{1},{2}会自动被替换成对应的数据
emptyMsg:
"没有记录"
//没有数据时显示信息
})
});
|
除了后台传递数据分页，默认的排序外，extjs还可以自定义排序，通过传递数据来进行后台排序。
如果需要对所有数据排序，则需要把排序信息提交到后台，由后台将排序信息组装到SQL里，然后再由后台将处理好的数据返回给前台。这就是前台与后台交互的过程，既然要提交到服务端，便需要将Ext.data.Store的remoteSort属性设置为true，这个属性是指是否允许远程排序，默认值为false。下次排序时就会有变化，不会立即显示出排序结果，而是将后台提交了2个参数，分别是sort和dir。sort表示需要排序的字段，dir表示升序或降序。后台根据这些参数进行处理。
|
1
2
|
req.getParameter(
"sort"
);
//排序字段
req.getParameter(
"dir"
);
//升序还是降序
|
以上知识是对上节的补充，现在开始将这节所学：可编辑表格--EditorGrid
大家使用过Mircrosoft Excel，它的功能强大，用户可随意添加或删除表格中的行和列，而且只保存一此即可。EditorGrid也提供这些功能，可以直接在表格里执行添加、删除、修改和查找等操作，然后一次性保存。此外，还可以动态修改某个单元格，这些单元格我们先暂时不能为空，保存时会进行检测，为空就无法保存，验证信息会给予提示。
以上实现的效果就是本节所要做的效果，现在看代码：
|
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
Ext.onReady(
function
(){
//定义列
var
columns = [
{header:
'编号'
,dataIndex:
'id'
,width:50,
editor:{
allowBlank:
true
}},
//sortable:true 可设置是否为该列进行排序
{header:
'名称'
,dataIndex:
'name'
,width:80,
editor:{
allowBlank:
true
}},
{header:
'描述'
,dataIndex:
'descn'
,width:112,
editor:{
allowBlank:
true
}}
];
//定义数据
var
data =[
[
'1'
,
'小王'
,
'描述01'
],
[
'2'
,
'李四'
,
'描述02'
],
[
'3'
,
'张三'
,
'描述03'
],
[
'4'
,
'束洋洋'
,
'思考者日记网'
],
[
'5'
,
'高飞'
,
'描述05'
]
];
//转换原始数据为EXT可以显示的数据
var
store =
new
Ext.data.ArrayStore({
data:data,
fields:[
{name:
'id'
},
//mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:
'name'
},
{name:
'descn'
}
]
});
//加载数据
store.load();
//创建表格
var
grid =
new
Ext.grid.GridPanel({
renderTo:
'grid'
,
//渲染位置
width:550,
autoHeight:
true
,
store:store,
columns:columns,
//显示列
stripeRows:
true
,
//斑马线效果
selType:
'cellmodel'
,
plugins:[
Ext.create(
'Ext.grid.plugin.CellEditing'
,{
clicksToEdit:1
//设置单击单元格编辑
})
],
tbar:[
'-'
,{
text:
'添加一行'
,
handler:
function
(){
var
p ={
id:
''
,
name:
''
,
descn:
''
};
store.insert(0,p);
}
},
'-'
,{
text:
'删除一行'
,
handler:
function
(){
Ext.Msg.confirm(
'系统提示'
,
'确定要删除？'
,
function
(btn){
if
(btn==
'yes'
){
var
sm = grid.getSelectionModel();
var
record = sm.getSelection()[0];
store.remove(record);
}
});
}
},
'-'
,{
text:
'保存'
,
handler:
function
(){
var
m = store.getModifiedRecords().slice(0);
var
jsonArray = [];
Ext.each(m,
function
(item){
jsonArray.push(item.data);
});
Ext.Ajax.request({
method:
'POST'
,
url:
'/ExtJs4.2Pro/EditGridServlet'
,
success:
function
(response){
Ext.Msg.alert(
'系统提示'
,response.responseText,
function
(){
store.load();
});
},
failure:
function
(){
Ext.Msg.alert(
"错误"
,
"与后台联系的时候出了问题。"
);
},
params:
'data='
+encodeURIComponent(Ext.encode(jsonArray))
});
}
}]
});
});
|
这里我们启用了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()中的原始数据不受影响。
下面看下后台对输入的数据怎么进行保存的？
输入一行数据
点击保存后
后台代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
@SuppressWarnings
(
"serial"
)
public
class
EditGridServlet
extends
HttpServlet {
<a href=
"http://home.51cto.com/index.php?s=/space/5017954"
target=
"_blank"
>
@Override
</a>
protected
void
doGet(HttpServletRequest req, HttpServletResponse resp)
throws
ServletException, IOException {
doPost(req,resp);
}
<a href=
"http://home.51cto.com/index.php?s=/space/5017954"
target=
"_blank"
>
@Override
</a>
protected
void
doPost(HttpServletRequest req, HttpServletResponse resp)
throws
ServletException, IOException {
req.setCharacterEncoding(
"UTF-8"
);
String data = req.getParameter(
"data"
);
System.out.println(data);
resp.getWriter().print(data);
}
}
|
打印结果：
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1333595，如需转载请自行联系原作者
