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的內容