Grid 複選 - checkboxModel 的網路範例
https://www.twblogs.net/a/5b8cc2872b717718833524ea
Ext --Grid複選框列
在網上找了好多但是都是所問非所答，最後找到了兩篇比較好的文章，記錄下
今天我們主要介紹一下grid的單選、多選功能，並告訴小夥伴們如何顯示一個選擇框列
extjs grid默認支持單選
在前面幾節的例子中，我們已經見識了extjs grid的強大。今天說到單選和多選，我們不妨打開前面的例子，其實在grid默認的情況下已經可以進行單選的，如圖：
extjs grid的行選擇
在extjs grid的配置項中，有兩個配置項和選擇有關：
- selModel：選擇類型的對象，或者選擇類型的配置對象，可以進行更多的配置（單選、多選，多選框的位置等）
- selType：選擇類型的字符串，不能進行更多的設置
selModel示例：
xtype: "grid",
store: myStore,
selModel: {
selection: "rowmodel",
mode: "MULTI"
},
columns: [
{ xtype: "rownumberer", text: "行號", width: 50 },
{ text: "姓名", dataIndex: "Name" },
{ text: "年齡", dataIndex: "Age" }
]selType示例：
xtype: "grid",
store: myStore,
selType: "checkboxmodel",
columns: [
{ xtype: "rownumberer", text: "行號", width: 50 },
{ text: "姓名", dataIndex: "Name" },
{ text: "年齡", dataIndex: "Age" }
]extjs grid 多行選則
上面已經介紹瞭如何進行選擇，下面就是實際的多選了。默認情況下extjs grid的選擇模型爲rowmodel，我們可以通過rowmodel進行行選擇（還有一個cellmodel，是用來進行單元格選擇的）。
rowmodel默認的選擇模型爲單行的選擇，也就是我們最開始看到的，只能選中一行，要想讓它支持多行選擇，就要進行相應的配置：
selModel: {
selection: "rowmodel",
mode: "MULTI"
}注意配置項mode，這傢伙用來控制是單行選擇還是多行選擇的，可用的值有3個：
- SINGLE：單行選擇
- SIMPLE：多行選擇，單擊選中/取消選中行
- MULTL：多行選擇，支持CTRL、SHIFT功能鍵，如果要進行多選，需要按住ctrl鍵。用shift可以進行區域選擇
extjs grid 使用多選框
使用選擇框的選擇模型是checkboxmodel，來看看下面的代碼：
xtype: "grid",
store: myStore,
selModel: Ext.create("Ext.selection.CheckboxModel", {
injectCheckbox: 1,//checkbox位於哪一列，默認值爲0
mode: "single",//multi,simple,single；默認爲多選multi
checkOnly: true,//如果值爲true，則只用點擊checkbox列才能選中此條記錄
allowDeselect: true,//如果值true，並且mode值爲單選（single）時，可以通過點擊checkbox取消對其的選擇
enableKeyNav: true
}),
columns: [
{ xtype: "rownumberer", text: "行號", width: 50 },
{ text: "姓名", dataIndex: "Name" },
{ text: "年齡", dataIndex: "Age" }
]效果如下：
extjs grid 獲取選中行
要得到選中行，我們首先要找到grid，然後得到grid的selectionModel，然後再找到選擇行，代碼如下：
var grid = win.down("grid");
var records = grid.getSelectionModel().getSelection();
Ext.MessageBox.alert("提示", records.length);大家都知道GridPanel是一個非常好用的控件，但是沒有像C#一樣的自定義的複選框。那我們就手工給它加一個複選框列，並實現全選清除獲取選中的數據。以下GridPanel簡稱GP。
第一種：自己增加一個CheckColumn來實現選中與否
1.首先在GP的Store裏面增加一個是否選中的字段源：<ext:ModelField Name="IsSelect" Type="Boolean" DefaultValue="0"/>。因爲不用數據庫返回，所以直接設置默認值爲0，不選中。
2.在GP的ColumnModel裏，增加我們的第一行復選框：<ext:CheckColumn runat="server" ID="c1" Text="選擇" Editable="true" DataIndex="IsSelect" Width="40" /> 。
3.實現點擊複選框的時候界面能夠實現選中狀態。在GP的事件裏增加CellClick，我們命名爲：clickOne。
4.function clickOne(gridview, td, value, data, tr) {
if (data.data.IsSelect)
data.data.IsSelect = 1;
else data.data.IsSelect = 0;
App.GP.store.commitChanges();
App.GP.view.refresh();
}。其實就是改變數據源的IsSelect字段的值，然後在刷新GP，界面上看到的就是選中狀態了。
那麼接下來我們實現全選和清除全選就簡單多了。在GP增加2個全選和清除按鈕。調用的事件如下：
//清除所有選擇
function clear() {
var dataList = App.GP.store.data.items;
if (dataList.length > 0) {
for (var i = 0; i < dataList.length; i++) {
var data = dataList[i].data;
if (data.IsSelect == 1) {
data.IsSelect = 0;
}
}
}
App.GP.store.commitChanges();
App.GP.view.refresh();
}
//全部選擇
function selectAllMasterial() {
var dataList = App.GP.store.data.items;
if (dataList.length > 0) {
for (var i = 0; i < dataList.length; i++) {
var data = dataList[i].data;
if (data.IsSelect == 0) {
data.IsSelect = 1;
}
}
}
App.GP.store.commitChanges();
App.GP.view.refresh();
}
即可。
得到選中的數據則更簡單了：
var dataList = App.GP.store.data.items;
if (dataList.length > 0) {
for (var i = 0; i < dataList.length; i++) {
var data = dataList[i].data;
if (data.IsSelect == 1) {
//這裏就是你要獲取得到的數據，然後執行你自己的操作了
}
}
}
第二種：就是EXT.NET自帶的SelectionModel
1.在GP裏增加一個選中模板：
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" Mode="Multi" runat="server">
//這裏，可以加一系列的選中事件，這裏只列出了3個，其他自己去看看還有哪些
<Listeners>
<BeforeSelect Fn="" />
<Deselect Fn="" />
<Select FN="" />
</Listeners>
</ext:CheckboxSelectionModel>
</SelectionModel>
2.如果需要特殊處理，就在選中模板裏添加自己的事件。
3.獲取選中的數據：App.gpContractList.selModel.selected;即可。
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
轉自：https://blog.csdn.net/evilcry2012/article/details/52918064
轉自：https://blog.csdn.net/lijingrong_ljr/article/details/50555336
沒有留言:
張貼留言