[原創]ExtAspNet秘密花園（十九） — 表格之復選框列

我們在表格概述中已經接觸到了CheckBoxField，ExtAspNet會將其渲染成一張圖片。不僅如此，CheckBoxField還可以被渲染成可編輯的復選框，本章會對其詳細描述。

 

可編輯的復選框列

下面通過一個示例來學習可編輯的復選框列，先來看下最終的顯示效果：

上圖中，同為復選框的“是否在校”列，一個被渲染成圖片，另一個被渲染成可編輯的復選框。

來看下ASPX標簽的定義：

<ext:Grid ID="Grid1" Title="表格" Width="800px" ShowBorder="true" ShowHeader="true"
    AutoHeight="true" runat="server" EnableCheckBoxSelect="True" DataKeyNames="Id,Name"
    OnRowCommand="Grid1_RowCommand" EnableRowNumber="True">
    <Columns>
        <ext:BoundField Width="100px" DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
        <ext:TemplateField Width="60px" HeaderText="性別">
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
            </ItemTemplate>
        </ext:TemplateField>
        <ext:BoundField Width="60px" DataField="EntranceYear" HeaderText="入學年份" />
        <ext:CheckBoxField Width="60px" RenderAsStaticField="true" DataField="AtSchool" HeaderText="是否在校" />
        <ext:CheckBoxField ColumnID="CheckBoxField1" Width="80px" RenderAsStaticField="false"
            DataField="AtSchool" HeaderText="是否在校" />
        // 省略其他列...
    </Columns>
</ext:Grid>

可以看出，兩個“是否在校”列的唯一區別就是RenderAsStaticField屬性的設置。

 

那么，如何在后台獲取用戶可能已經修改的復選框列的值呢？來看下本例的后台代碼：

protected void Button1_Click(object sender, EventArgs e)
{
    CheckBoxField field1 = (CheckBoxField)Grid1.FindColumn("CheckBoxField1");

    StringBuilder sb = new StringBuilder();
    int selectedCount = Grid1.SelectedRowIndexArray.Length;
    if (selectedCount > 0)
    {
        sb.AppendFormat("共選中了 {0} 行：", selectedCount);
        sb.Append("<ol class=\"result\">");
        for (int i = 0; i < selectedCount; i++)
        {
            int rowIndex = Grid1.SelectedRowIndexArray[i];
            sb.Append("<li><ul>");

            sb.AppendFormat("<li>行號：{0}</li>", rowIndex + 1);
            // Grid1.Rows[rowIndex].States[field1.ColumnIndex] 和 field1.GetCheckedState(rowIndex) 的結果相同
            sb.AppendFormat("<li>是否在校：{0}</li>", field1.GetCheckedState(rowIndex));

            sb.Append("</ul></li>");
        }
        sb.Append("</ol>");
    }
    else
    {
        sb.Append("<strong>沒有選中任何一行！</strong>");
    }

    labResult.Text = sb.ToString();
}

由此可見，想要在后台獲取復選框列的值，需要如下幾個步驟：

1. 在ASPX標簽中為復選框列定義ColumnID，本例中是CheckBoxField1；
2. 在后台代碼中，首先獲取相應的復選框列 CheckBoxField field1 = (CheckBoxField)Grid1.FindColumn("CheckBoxField1")；
3. 然后獲取某行中（rowIndex）此復選框列的值，有兩種獲取方式。
   1. field1.GetCheckedState(rowIndex)
   2. Grid1.Rows[rowIndex].States[field1.ColumnIndex]

 

來看下用戶點擊“選中行復選框的狀態”后的界面截圖：

 

 

自動回發的復選框列

還記得上一篇文章的行內命令事件，我們曾說復選框列也可以觸發行內命令事件，其實指的就是這個地方。

我們來看下如何把一個可編輯的復選框列轉化為自動回發的復選框列：

<ext:CheckBoxField ColumnID="CheckBoxField2" Width="80px" RenderAsStaticField="false"
    AutoPostBack="true" CommandName="CheckBox1" DataField="AtSchool" HeaderText="是否在校" />

除了RenderAsStaticField屬性外，還需要設置如下幾個屬性：

• AutoPostBack：指定自動回發
• CommandName：行內命令事件的名稱
• CommandArgument：行內命令事件的參數（可選）

 

再來看下自動回發的后台處理代碼：

protected void Grid1_RowCommand(object sender, ExtAspNet.GridCommandEventArgs e)
{
    if (e.CommandName == "CheckBox1")
    {
        bool checkState = Convert.ToBoolean(Grid1.Rows[e.RowIndex].States[e.ColumnIndex]);
        Alert.ShowInTop(String.Format("你點擊了第 {0} 行，第 {1} 列，選中狀態：{2}", e.RowIndex + 1, e.ColumnIndex + 1, checkState));
    }
}

 

界面顯示效果：

 

 

后台更新復選框列的值

前面我們介紹了如何在后台獲取用戶修改的復選框列的值，那么如何在后台更新復選框列的值呢？

還是來看一個例子：

我們希望用戶點擊某一行時，根據本行的選中狀態來同步更新“是否在校1”、“是否在校2”、“是否在校3”三列的復選框值。

 

看下ASPX標簽的結構：

<ext:Grid ID="Grid1" Title="表格" Width="800px" ShowBorder="true" ShowHeader="true"
    AutoHeight="true" runat="server" EnableCheckBoxSelect="True" DataKeyNames="Id,Name"
    EnableRowNumber="True" EnableRowClick="true" OnRowClick="Grid1_RowClick">
    <Columns>
        <ext:BoundField Width="100px" ExpandUnusedSpace="true" DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
        <ext:TemplateField Width="60px" HeaderText="性別">
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# GetGender(Eval("Gender")) %>'></asp:Label>
            </ItemTemplate>
        </ext:TemplateField>
        <ext:BoundField Width="100px" DataField="EntranceYear" HeaderText="入學年份" />
        <ext:CheckBoxField Width="60px" RenderAsStaticField="true" DataField="AtSchool" HeaderText="是否在校1" />
        <ext:CheckBoxField ColumnID="CheckBoxField1" Width="100px" RenderAsStaticField="false"
            DataField="AtSchool" HeaderText="是否在校1" />
        <ext:CheckBoxField ColumnID="CheckBoxField2" Width="100px" RenderAsStaticField="false"
            DataField="AtSchool" HeaderText="是否在校2" />
        <ext:CheckBoxField ColumnID="CheckBoxField3" Width="100px" RenderAsStaticField="false"
            DataField="AtSchool" HeaderText="是否在校3" />
    </Columns>
</ext:Grid>

 

下面來看下RowClick事件處理函數：

protected void Grid1_RowClick(object sender, ExtAspNet.GridRowClickEventArgs e)
{
    bool checkedState = false;
    if (new List<int>(Grid1.SelectedRowIndexArray).Contains(e.RowIndex))
    {
        checkedState = true;
    }

    CheckBoxField field1 = (CheckBoxField)Grid1.FindColumn("CheckBoxField1");
    CheckBoxField field2 = (CheckBoxField)Grid1.FindColumn("CheckBoxField2");
    CheckBoxField field3 = (CheckBoxField)Grid1.FindColumn("CheckBoxField3");

    // Grid1.Rows[e.RowIndex].States[field1.ColumnIndex] = true;
    field1.SetCheckedState(e.RowIndex, checkedState);
    field2.SetCheckedState(e.RowIndex, checkedState);
    field3.SetCheckedState(e.RowIndex, checkedState);
}

這段代碼進行了如下處理：

1. 首選判斷當前點擊的行（e.RowIndex）是否被選中了；
2. 查找三個復選框列，使用表格的FindColumn函數；
3. 調用復選框列的SetCheckedState函數來更新復選框列的值。

 

小結

ExtAspNet對復選框列的一個簡單創新，不僅滿足了實際項目的需求，而且可以極大的減少代碼的編寫量。如果你有類似的需求，一定不能錯過ExtAspNet提供的復選框列。

下一篇文章我們會如何向模板列中添加文本輸入框、下拉列表，如何獲取編輯框的值以及如何在后台更新這些編輯框的值。

 

注：《ExtAspNet秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇