Ext.Net學習筆記17：Ext.Net GridPanel Selection

接下來是Ext.Net的GridPanel的另外一個功能：選擇。

我們在GridPanel最開始的用法中已經見識過如何使用選擇功能，今天我們這片筆記將更加詳細的介紹Ext.Net GridPanel的Selection功能。

Ext.Net GridPanel Selection包括三種：

RowSelectionModel：行選擇模型
CheckboxSelectionModel：帶有複選框的行選擇模型
CellSelectionModel：單元格選擇模型

預設情況下，GridPanel使用RowSelectionModel，能夠進行單選，如果要GridPanel能夠進行多選，需要在GridPanel中新增屬性：

<ext:GridPanel runat="server" ID="grid"

    ColumnLines="true" Width="500" Height="200"

    MultiSelect="true">

下面我們來分別看一下這三種模型的用法

RowSelectionModel

效果如下：

實現程式碼：

<SelectionModel>

    <ext:RowSelectionModel runat="server" Mode="Multi"></ext:RowSelectionModel>

</SelectionModel>

在RowSelectionModel的配置中，屬性Mode表示選擇的型別，分別是Single（單選）、Multi（多選）和Simple（簡單多選）

單選和多選的區別很明顯，我們來說一下Multi和Simple的區別：

multi：多選，但需要使用鍵盤Ctrl、Shift來配合完成。在實際使用的過程中你會發現，單純的滑鼠單擊並不能實現多選，需要同時按下Ctrl鍵才能多選，如果要選擇一個區域，則可以同時按下Shift鍵。
Simple：多選，不需要Ctrl或Shift鍵的配合。只使用滑鼠即可實現多選。

CheckboxSelectionModel

效果如圖：

程式碼如下：

<ext:CheckboxSelectionModel runat="server"

    Mode="Multi" InjectCheckbox="1">

</ext:CheckboxSelectionModel>

Mode屬性與RowSelectionModel中的Mode屬性功能相同，不在贅言。

InjectCheckbox屬性用來決定Checkbox列顯示在什麼位置（第幾列），預設為0，從第0列開始。

CellSelectionModel

效果如圖：

程式碼如下：

<ext:CellSelectionModel runat="server"></ext:CellSelectionModel>

我試了一下，好像是隻能選中一個單元格。

查了ExtJS API以後發現確實只能選擇一個單元格，它同樣也有一個Mode屬性，但這個屬性只有一個可用值：Single。

客戶端獲取選擇的值

由於這系列比較偏重伺服器端的處理，所以這個地方簡單的說一下客戶端獲取值的方法，程式碼如下：

var selectedRows = grid.getSelectionModel().getSelection();

grid是我們的GridPanel，首選獲取它的選擇模型，得到模型之後，再從選擇模型中得到選中的內容。

伺服器端獲取選擇的值

對於伺服器端來說，我們可以用同樣的思路來獲取選中的值。

var selectionModel = grid.GetSelectionModel() as RowSelectionModel;

if (selectionModel.SelectedRows.Count == 0)

{

    X.MessageBox.Alert("提示", "沒有選中行").Show();

    return;

}

string ids = string.Empty;

foreach (var item in selectionModel.SelectedRows)

{

    ids += "," + item.RecordID;

}

ids = ids.Trim(',');

X.MessageBox.Alert("提示", ids).Show();

注意：如果Store所關聯的Model沒有設定IDProperty，將導致無法獲取RecordID

上面的程式碼是針對RowSelectionModel和CheckboxSelectionModel來說的，如果是CellSelectionModel，我們還可以獲取到單元格的值等內容：

var cellModel = grid.GetSelectionModel() as CellSelectionModel;

//獲取記錄ID

var recordId = cellModel.SelectedCell.RecordID;

//獲取單元格值

var cellValue = cellModel.SelectedCell.Value;

//獲取列名稱

var columnName = cellModel.SelectedCell.Name;

//獲取列號

var columnIndex = cellModel.SelectedCell.ColIndex;

//獲取行號

var rowIndex = cellModel.SelectedCell.RowIndex;

OK，以上就是關於Ext.Net GridPanel Selection的內容，本文由起飛網原創首發，請繼續關注。

Ext.Net學習筆記17：Ext.Net GridPanel Selection