您的位置：首页 > Web前端 > JavaScript

ExtJS表格——行号、复选框、选择模型

2014-07-16 17:36 183 查看

本篇的内容是为表格添加行号，和复选框，最后谈一下Ext的选择模型。内容比较简单，就直接上代码了。
一、设置行号
行号的设置主要问题在于删除某一行后需要重新计算行号
Ext.onReady(function() {
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), --在这里设置行号
{ header: '编号', dataIndex: 'id' },
{ header: '性别', dataIndex: 'sex' },
{ header: '名称', dataIndex: 'name' },
{ header: '描述', dataIndex: 'descn' }
]);
var data = [
['1', 'male', 'name1', 'descn1'],
['2', 'female', 'name2', 'descn2'],
['3', 'male', 'name3', 'descn3'],
['4', 'female', 'name4', 'descn4'],
['5', 'male', 'name5', 'descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'id' },
{ name: 'sex' },
{ name: 'name' },
{ name: 'descn' }
])
});

store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
Ext.get('remove').on('click', function() { --监听删除按钮的单击事件
store.remove(store.getAt(1)); --store.getAt(1) 获得第2行数据
grid.view.refresh(); --强制grid刷新，重新计算行号
});
});
页面代码：
<body>
<div id="grid"></div>
<input id="remove" type="button" value="删除第二行数据" />
</body>
二、设置复选框
复选框是通过Ext.grid.CheckboxSelectionModel来设置的，它会在每行数据前加一个复选框，另外它必须添加到列定义和表格装配定义2个部分。默认单击表格的某一行，复选框就会自动选中。可以通过如下设置取消单击即选中，而需要通过单击复选框来选中:
var sm = Ext.grid.CheckboxSelectionModel(｛ handleMouseDown: Ext.emptyFn ｝);
复选框设置代码：
Ext.onReady(function() {
var sm = Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), --在这里设置行号
sm, --设置复选框
{ header: '编号', dataIndex: 'id' },
{ header: '性别', dataIndex: 'sex' },
{ header: '名称', dataIndex: 'name' },
{ header: '描述', dataIndex: 'descn' }
]);
var data = [
['1', 'male', 'name1', 'descn1'],
['2', 'female', 'name2', 'descn2'],
['3', 'male', 'name3', 'descn3'],
['4', 'female', 'name4', 'descn4'],
['5', 'male', 'name5', 'descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'id' },
{ name: 'sex' },
{ name: 'name' },
{ name: 'descn' }
])
});

store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm，
sm：sm
});
});
三、选择模型
(1).RowSelectionModel 模型
在定义Ext.grid.GridPanel时，默认使用的是RowSelectionModel——行选择模型，当单击某一个单元格时，默认选中的是却是整行，选择模型默认
支持多选，鼠标单击时按住Shift或Ctrl键就可以选择多行。如果只希望选择一行，需要设置singleSelect参数。
(2).CellSelectionModel模型
每次只允许选择一个单元格，EditorGrid里默认使用的就是CellSelectionModel. 当然也可以将EditorGrid的选择模型设置为RowSelectionModel，
从而达到选中一整行的效果。
(3).获取选中的行
Ext.get('remove').on('click', function() {
var selections = grid.getSelectionModel().getSelections(); --先获取选择模型，然后从选择模型中获取选中的记录。
if (selections.length > 0) {
Ext.Msg.confirm('提示', '你确认删除选中的记录吗？', function(_btn) {
if (_btn == 'yes') {
for (var i = 0; i < selections.length; i++) {
var record = selections;
store.remove(record);
}
grid.view.refresh();
}
});
}
else
Ext.Msg.alert("提示","你还没有选中记录.");
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航