这篇文章要实现一个简单的grid，主要功能包括展示、分页、添加、修改、删除、单选、复选和功能列等。
1、首先我们要在页面嵌入一个div标签和引入我们的grid.js文件如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>grid.htm</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../css/ext-patch.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../js/grid.js" defer="defer"></script>
</head>
<body style="margin: 0;overflow:hidden">
<div id="grid" style="width:100%;height:100%"></div>
</body>
</html>
2、然后写js,首先初始化提示信息，在grid.js最上边加上
Ext.QuickTips.init();// 浮动信息提示
3、定义后台服务地址和分页变量
//定义分面参数
var gridUrl='../server/gridserver.jsp'; //取数据的服务页
var start=0;//读取的起始行
var limit=10;//每次读取的行数
4、在onReady事件中加入我们的功能实现，首先定义一个数据对象，相当于C++中的结构体，如下
//定义数据对象
var Person=Ext.data.Record.create([
{name:'name',type:'string'},
{name:'sex',type:'string'},
{name:'birthday',type:'date',dateFormat:'Y-m-d'},
{name:'office',type:'string'},
{name:'salary',type:'string'},
{name:'tel',type:'string'},
{name:'QQ',type:'string'},
{name:'email',type:'string'},
{name:'address',type:'string'},
{name:'action',type:'string'}
]);
注意type不要写错
5、定义列的选择属性，再定义一个控制选择模式的按扭
var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:true});//可设置选择模式
//控制单选或复选
var DSButton=new Ext.Toolbar.Button({
text:'可复选'
})
6、定义列、列的格式化显示及设置编辑时的控件，包括文本、下拉框、时间选择框，数字控制等
// 下拉框组件
var sexdata=[['0','男'],['1','女']];
var sexSelect=new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({
fields:['value','text'],
data:sexdata
}),
emptyText:'请选择',
mode:'local',
triggerAction:'all',
valueFiled:'value',
displayField:'text',
readyOnly:true
});
//定义列
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
header : '姓名',
align:'center',
dataIndex : 'name',
width : 80,
editor:new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank:false,
emptyText:'不能为空!',
regex:/^[\u4E00-\u9FA5]+$/, //正则表达式验证，只能输入汉字
regexText:'请输入汉字!',
bodyStyle:'height:100%'
}))
}, {
header : '性别',
align:'center',
dataIndex : 'sex',
width : 50,
editor:new Ext.grid.GridEditor(sexSelect)
}, {
header : '出生日期',
align:'center',
dataIndex : 'birthday',
width : 100,
editor:new Ext.grid.GridEditor(new Ext.form.DateField({
format:'Y-m-d'
}
)),
renderer:function(value){
return Ext.util.Format.date(value,'Y-m-d');
}
}, {
header : '职位',
align:'center',
dataIndex : 'office',
width : 100,
editor:new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank:false,
emptyText:'不能为空!'
}))
}, {
header : '薪水',
align:'center',
dataIndex : 'salary',
width : 80,
renderer:changeTwoDecimal,
editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank:false,
emptyText:'不能为空!',
decimalPrecision:2 //设置小数位的精度
}))
}, {
header : '电话',
align:'center',
dataIndex : 'tel',
width : 100
}, {
header : 'QQ',
align:'center',
dataIndex : 'QQ',
width : 100
}, {
header : '邮箱',
align:'center',
dataIndex : 'email',
width : 150
}, {
header : '地址',
align:'center',
dataIndex : 'address',
width : 150
},{
id:'action',
header : '操作',
align:'center',
dataIndex : 'action'
}
]);
//显示两位小数
function changeTwoDecimal(x)
{
x=Number(x);
return x.toFixed(2);
}
//默认排序
cm.defaultSortable = true;
7、写义record对象的存储容器store
// 表格数据
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:gridUrl,
method:'post'
}),
reader:new Ext.data.JsonReader({
root:'root',totalProperty:'totalCount' //指定分页控件属性用
},Person)
});
8、创建gridPanel对象，我觉得叫组装更合适一些，因为前边我们都把一些“零部件”都造好了
// 表格组装
var grid = new Ext.grid.EditorGridPanel({
el : 'grid',
store : store,
cm : cm,
sm : sm,
region:'center',
bodyStyle:'width:100%;height:100%',
autoScroll:true,
autoExpandColumn:'action',
tbar : [{
pressed : true,
text : '添加',
handler : function() {
var p=new Person({
name:'',
sex:'',
office:'',
birthday:'',
salary:'',
action:'<a href="#">操作</a>'
});
grid.stopEditing();
store.insert(0,p);
grid.startEditing(0,2);
}
}, {
xtype:'tbseparator'
},{
pressed : true,
text : '删除',
handler : function() {
var sels=grid.getSelectionModel().getSelections();
for(var i=0;i<sels.length;i++){
var record=sels[i];
store.remove(record);
}
}
},{
xtype:'tbseparator'
},DSButton
],
bbar:new Ext.PagingToolbar({
pageSize : limit,
store : store,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg : "没有记录"
})
});
grid.render(); //渲染
9、加单选和复选控制
DSButton.on('click', function (e){
if(sm.singleSelect){
sm.singleSelect=false;
DSButton.setText('可复选');
}else{
sm.singleSelect=true;
DSButton.setText('可单选');
}
if(sm.singleSelect)
grid.getSelectionModel().selectRecords(grid.getSelectionModel().getSelections(),false);
});
10、加载数据
store.load({params:{start:start, limit:limit}});
到此前台功能写好了
11、接下来写后台json数据，组织数据到list里面
//初始化示例数据
List list=new ArrayList();
list.add("{name:'李连杰',sex:'男',birthday:'1980-10-20',office:'总经理',salary:20000.342323,tel:'010888888',QQ:'666666666',email:'99999@yahoo.com',address:'中国',action:'<a href=\"http://www.baidu.com\" target=\"blank\">操作</a>'}");
……………………
输入json数据
if(startStr!=null&&limitStr!=null){
int start=Integer.parseInt(startStr);
int limit=Integer.parseInt(limitStr);
//根据分页参数以JSON格式组织数据发送到客户端
StringBuffer gridData=new StringBuffer("{'totalCount':'"+list.size()+"','root':[");
for(int i=start;i<(start+limit)&&i<list.size();i++){
gridData.append((String)list.get(i)+",");
}
gridData.deleteCharAt(gridData.length()-1);//去掉最后一个‘，’
gridData.append("]}");
out.println(gridData.toString());
out.flush();
}else{
//如果没有分页参数转过来把所有数据以JSON格式组织数据发送到客户端
StringBuffer gridData=new StringBuffer("{'totalCount':'"+list.size()+"','root':[");
for(int i=0;i<list.size();i++){
gridData.append((String)list.get(i)+",");
}
gridData.deleteCharAt(gridData.length()-1);//去掉最后一个‘，’
gridData.append("]}");
out.println(gridData.toString());
}
这样后台就完成，发布一下，看看效果吧
