ExtJs中的Grid具体操作(笔记及心得)
一.基本操作步骤
- var cm=new
Ext.grid.ColumnModel([ //对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的
{header:'编号',dataIndex:'id',sortable:true}, //header是表的首部显示文本。dataIndex是列对应的记录集字段,sortable表示列是否可排序,可能还会用到的参数:renderer列的渲染函数,format格式化信息
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]); - var data=[
['1','name1','descn1'], //5组具体的数据,每组数据分别对应每一列
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
- //store用来创建一个数据存储对象,是GridPanel必备的属性
var store=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data), //是指获取数据的方式
reader:new Ext.data.ArrayReader({},[ //是指如何解析这一堆数据,ArrayReader就是解析数组的
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
store.load();//要执行一次,以对数据初始化,很重要
- var grid=new
Ext.grid.GridPanel({
autoHeight:true,
renderTo:'grid', //要渲染的地方(就是在哪里显示)
enableColumnMove:false,//设置是否可以拖放列
enableColumnResize:false,//设置是否可以改变列的大小
stripeRows:true,//斑马线效果
store:store,
cm:cm,
autoExpandColumn:'descn', //可以制定列的宽度自动伸展。只能制定一列的id
viewConfig:{
forceFit:true //每列自动充满Grid
}
});
注:Ext中 renderer 一般用于Grid中对列模型的渲染上 其详细信息记录在 Ext.grid.ColumnModel 中的 setRenderer( Number col, Function fn ) 方法里
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
}
含有的参数的介绍:
1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id,id是列号,css是这个单元格的css样式。
3.record是这行的所有数据,你想要什么,record.data["id"]这样就获得了。
4.rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。
5.columnIndex列号。
6.store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,你都可以随便调用,唉,太厉害了。
二. 常用的属性:
1.sortable:true,//sortable设为排序
2.enableColumnMove:false,//设置是否拖放列
3.enableColumnResize:false,//设置是否改变列大小
4.stripeRows:true, //每列是否是斑马线分开
5.loadMask:true, //加载时有加载的图标
6.autoExpandColumn:'要自定义宽度的id' //可以制定列的宽度自动伸展。只能制定一列的id,所以要在前面指定的列先写好id
7.viewConfig:{
forceFit:true //每列自动充满Grid
}
8.sortInfo: {field: "name", direction: "ASC"}//在原来的前提下,加此行:field代表排序列名,direction代表排序方式(ASC是升序,DESC是降序)
9.renderer: Ext.util.Format.dateRenderer('Y-m-d')
//这里需要添加的renderer属性的值设置为Ext.util.Format.dateRenderer。这是为我们提供的格式
10.type:'date',dateFormat: 'Y-m-dTH:i:s'//type是reader解析时把这一列作为日期类型处理,dateFormat是把得到的字符串转换成相应的日期格式
10-2.在写数据的时候要:'1970-01-15T02:58:04',//添加一列时间的数据,格式要和下面设置的dateFormat一样
11.new Ext.grid.RowNumberer(), //自动显示行号
12.<input type="button" id="remove" value="删除第 二行" />//新建按钮,id="remove"
Ext.get('remove').on('click', function() {//获得id,执行点击事件
store.remove(store.getAt(1));//store.getAt(a)是找到要找的那行的内容,a从0开始(及第一行就是0),该代码表示删除改行的信息
grid.view.refresh();//清除一行信息,最左边显示的行的id重新编号
});
13.var sm = new Ext.grid.CheckboxSelectionModel();//新建复选框的对象,使用的时候直接写 'sm'
14.Ext.grid.RowSelectionModel({singleSelect:true})//设置行是否可以按shift多选(true为不可以)
15.只选一行执行
grid.on('click', function() {
var selections = grid.getSelectionModel().getSelections();
for (var i = 0; i < selections.length; i++) {
var record = selections[i];
Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));
}
}); //点击一行,就输出该行的信息
16.表格视图
var grid = new Ext.grid.GridPanel({
//设置各种监听器可看做控制器
height: 80,
width: 450,
renderTo: 'grid',
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, meta)
}),
columns: meta
});//表格定义太小的话,自己默认产生滚动条
grid.getView().scrollToTop();//滚动条滚动到最上面
grid.getView().focusCell(0, 0);//焦点定位在第一行的第一列
17.自己定义,改变GridView的初始参数
viewConfig: {
columnsText: '显示的列',
scrollOffset: 30,//表示表格右侧为滚动条预留的宽度
sortAscText: '升序',
sortDescText: '升序',
forceFit: true //表格自动延展每列的长度,使内容充满整个表格
}
18.Grid添加分页工具条
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize: 10, //每页显示信息的条数
store: store,
displayInfo: true, //是否显示数据信息
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', //在displayInfo有效的前提上,{0}{1}{2}中的数据会自己替换掉
emptyMsg: "没有记录" //没有数据时显示的信息
})
});
store.load();
19.通过后台获取分页数据
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'09_02_01.jsp'}), //直接通过Http访问数据
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty', //对应JSP代码中返回的totalProperty,就是数据的总数
root: 'root' //root对应的JSP代码中的返回的root,也就是一个包含返回数据的数组
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
以及要改变store.load();为:
store.load({params:{start:0,limit:10}}); //初始化时通过传参数去获得希望得到的那部分数据,start指示从第几条数据开始显示,limit指从start开始一共几条数据
20.可编辑表格控件——EditorGrid
var cm = new Ext.grid.ColumnModel([{
header: '编号',
dataIndex: 'id',
editor: new Ext.grid.GridEditor( //每列添加editor属性,里边的属性都是完全一样的TextField
new Ext.form.TextField({//TextField的方式是随意修改单元格
allowBlank: false //表示不允许输入空值
})
)
}, {
……
})
)
}]);
还有要改变的:
var grid = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
clicksToEdit:1,//要编辑单元格时点击的次数,默认是双击
store: store,
cm: cm
});
添加和删除行:
(表示出现在表的顶部新建一行工具条)
tbar: new Ext.Toolbar(['-', {
text: '添加一行',
handler: function(){ //handler定义按钮被按下时要执行的内容
var p = new Record({
id:'',
name:'',
descn:''
});
grid.stopEditing();
store.insert(0, p); //新建一行
grid.startEditing(0, 0);//激活第一行第一列的编辑状态,及新建后焦点默认选在上面
}
}, '-', {
text: '删除一行',
handler: function(){
Ext.Msg.confirm('信息', '确定要删除?', function(btn){
if (btn == 'yes') {
var sm = grid.getSelectionModel();
var cell = sm.getSelectedCell();
var record = store.getAt(cell[0]);
store.remove(record); //删除一行
}
});
}
}, '-'])
});
保存数据:
{
text: '保存',
handler: function(){
var m = store.modified.slice(0);//作用是复制store.modified。保证其原始数据不受影响
var jsonArray = [];
Ext.each(m, function(item) {//作用是遍历m,并对每项分别调用fn函数
jsonArray.push(item.data);
});
Ext.lib.Ajax.request(
'POST',
'11_03_01.jsp',
{success: function(response){
Ext.Msg.alert('信息', response.responseText, function(){
store.reload();
}); //success是请求成功后返回的信息
},failure: function(){
Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
}}, //failere是请求失败后返回的信息
'data=' + encodeURIComponent(Ext.encode(jsonArray))
);
}
验证数据:
var m = store.modified.slice(0);
for (var i = 0; i < m.length; i++) {
var record = m[i];//获得被修改的每行数据
var fields = record.fields.keys;//表示一共几行
for (var j = 0; j < fields.length; j++) {
var name = fields[j];//列名
var value = record.data[name];//单元格的数值
var colIndex = cm.findColumnIndex(name);//列号
var rowIndex = store.indexOfId(record.id);//行号
var editor = cm.getCellEditor(colIndex).field;//colIndex使用的编辑器
if (!editor.validateValue(value)) {
Ext.Msg.alert('提示', '请确保输入的数据正确。', function(){
grid.startEditing(rowIndex, colIndex);
});
return;
}
}
21.属性表格——PropertyGrid(只要两个值:key和value,即:列的名称和具体的值)
var grid = new Ext.grid.PropertyGrid({
title: '属性表格',
autoHeight: true,
width: 300,
renderTo: 'grid',
source: {
"名字": "不告诉你",
"创建时间": new Date(Date.parse('12/15/2007')),
"是否有效": false,
"版本号": .01,
"描述": "嗯,估计没啥可说的"
}
});
禁止对属性进行编辑:(只能看不能动)
grid.on("beforeedit", function(e){
e.cancel = true;
return false;
});
获取属性表格的值:
Ext.Msg.alert('名字', grid.store.getById('名字').get('value')); //弹出警告框,是对应key所对应的value
设置时间选择:
customEditors: {
'Start Time': new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
}//TimeField,可以自己再source中设置开始的时间(如:Start Time:‘10:00 AM’)
22.表格分组:
var store = new Ext.data.GroupingStore({
reader: reader,
data: data,
groupField: 'sex', //按性别分组
sortInfo: {field: 'id', direction: "ASC"}//如何排序的对象,分组后,每组按id进行升序排列显示
});
view: new Ext.grid.GroupingView(),//获得Ext.grid.GroupingView的实例
grid.getView().expandAllGroups(); //展开所以分组
grid.getView().collapseAllGroups();//折叠所有分组
grid.getView().toggleAllGroups();//自动判断分组的状态
23.可以拖拉调整大小的表格:
var rz = new Ext.Resizable(grid.getEl(), {
wrap: true, //在构造Resizable时自动在制定的id的外边包裹一层div
minHeight:100, //限制改变的最小的高度
maxHeight:200,
pinned:false, //控制可拖动区域的显示状态,false是鼠标悬停在拖拉区域上才出现
handles: 's'//设置拖拉的方向(n,s,e,w,all...)
});
rz.on('resize', grid.syncSize, grid);//注册事件(作用:将调好的大小传个scope执行)
24.可以拖拉行,在同一个表中拖动
enableDragDrop: true//设置允许拖动行
设置DropTarget:
var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'GridDD',
copy : false,//拖动是否带复制属性
notifyDrop : function(dd, e, data) { //对应的函数处理拖放事件
// 选中了多少行
var rows = data.selections;
// 拖动到第几行
var index = dd.getDragData(e).rowIndex;
if (typeof(index) == "undefined") {
return;
}
// 修改store
for(i = 0; i < rows.length; i++) {
var rowData = rows[i];
if(!this.copy) store.remove(rowData);
store.insert(index, rowData);
}
}
});
25.表格与右击菜单
var contextmenu = new Ext.menu.Menu({
id: 'theContextMenu',
items: [{
text: '查看详情',
handler: function(){
写点击后要执行的函数,可以类似于://Ext.Msg.alert('详情','ExtJs的表格右击事件');
}
}]
});
grid.on("rowcontextmenu", function(grid, rowIndex, e){
e.preventDefault();//防止浏览器弹出默认的右键菜单
grid.getSelectionModel().selectRow(rowIndex);//调用
contextmenu.showAt(e.getXY());//右击显示现在自己的菜单
});