一、 設置行號
行號的設置主要問題在於刪除某一行後需要重新計算行號
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();
}
});
ExtJS表格——行號、複選框、選擇模型
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章