[原創]ExtAspNet秘密花園（二十） — 表格之模板列與編輯框

前面我們已經多次見到模板列，只不過那些模板列中放置的都是文本（asp:Label）控件，而本章將會介紹模板列和編輯框（文本輸入框、下拉列表、單選框、復選框等）是如何交互的。

 

模板列中只能放置Asp.Net控件

這是ExtAspNet的一個限制，其實在ExtAspNet中只有如下三個地方可以放置Asp.Net控件：

• 和PageManager控件同級別，也就是form標簽的內部；
• ContentPanel控件內部；
• 表格中模板列的內部。

 

模板列中的文本輸入框

下面通過一個示例講述如何綁定數據到模板列中的輸入框，以及如何在后台代碼中獲取這些輸入框的值，例子的ASPX標簽：

<ext:Grid ID="Grid1" ShowBorder="true" ShowHeader="true" Title="表格" Width="800px"
    runat="server" DataKeyNames="Id,Name">
    <Columns>
        // 省略其他列...
        <ext:TemplateField HeaderText="分組" Width="100px">
            <ItemTemplate>
                <asp:TextBox ID="tbxGroupName" runat="server" Width="80px"
                    Text='<%# Eval("Group") %>'></asp:TextBox>
            </ItemTemplate>
        </ext:TemplateField>
    </Columns>
</ext:Grid>

這里直接通過Asp.Net控件TextBox的Text屬性來綁定數據，非常簡單直觀。現在的頁面效果：

 

如何在后台獲得這些可能已經被用戶修改過的輸入框的值呢，來看下示例代碼：

protected void Button1_Click(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("<table style=\"width:350px;\"><tr><th>編號</th><th>姓名</th><th>用戶輸入的分組號</th></tr>");
    for (int i = 0, count = Grid1.Rows.Count; i < count; i++)
    {
        sb.Append("<tr>");
        object[] rowDataKeys = Grid1.DataKeys[i];
        sb.AppendFormat("<td>{0}</td>", rowDataKeys[0]);
        sb.AppendFormat("<td>{0}</td>", rowDataKeys[1]);

        GridRow row = Grid1.Rows[i];
        System.Web.UI.WebControls.TextBox tbxGroupName = (System.Web.UI.WebControls.TextBox)row.FindControl("tbxGroupName");
        sb.AppendFormat("<td>{0}</td>", tbxGroupName.Text);

        sb.Append("<tr>");
    }

    sb.Append("</table>");

    labResult.Text = sb.ToString();
}

其實也很簡單，僅需如下步驟：

1. 為模板列中的輸入框控件設置ID，本例中是tbxGroupName；
2. 后台代碼中，先根據行索引獲取當前行實例 GridRow row = Grid1.Row[rowIndex]；
3. 調用行的FindControl方法查找其中的Asp.Net控件 (System.Web.UI.WebControls.TextBox)row.FindControl("tbxGroupName")；
4. 這樣就能得到輸入框控件的Text屬性了。

 

界面效果圖：

 

官方示例對本例做了擴展，可以實現如下兩個功能：

1. 使用Tab鍵遍歷所有的文本輸入框；
2. 點擊輸入框即可選中輸入框的全部文本。

其中第二個功能需要借助JavaScript代碼來完成，如果你感興趣的話，不妨研究一下。

 

 

模板列中的下拉列表

上例中的數據綁定是直接在ASPX標簽中完成的，但是有時不方便在標簽中進行數據綁定，甚至控件本身都需要根據數據生成，這就需要通過后台代碼完成了。

我們先來看一個模板列中放置下拉列表的例子：

 

來看下ASPX結構的主要部分：

<ext:Grid ID="Grid1" ShowBorder="true" ShowHeader="true" Title="表格" Width="800px"
        runat="server" DataKeyNames="Id,Name" OnRowDataBound="Grid1_RowDataBound">
    <Columns>
        <ext:TemplateField Width="60px" HeaderText="性別">
            <ItemTemplate>
                <asp:DropDownList runat="server" ID="ddlGender">
                    <asp:ListItem Text="男" Value="男"></asp:ListItem>
                    <asp:ListItem Text="女" Value="女"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </ext:TemplateField>
        // 省略其他列...
    </Columns>
</ext:Grid>

 

由於后台數據的性別列是整型值，不方便在ASPX標簽中直接綁定，不過我們可以在RowDataBound事件中直接修改渲染后的下拉列表：

protected void Grid1_RowDataBound(object sender, ExtAspNet.GridRowEventArgs e)
{
    System.Web.UI.WebControls.DropDownList ddlGender =
        (System.Web.UI.WebControls.DropDownList)Grid1.Rows[e.RowIndex].FindControl("ddlGender");

    DataRowView row = e.DataItem as DataRowView;

    int gender = Convert.ToInt32(row["Gender"]);
    if (gender == 1)
    {
        ddlGender.SelectedValue = "男";
    }
    else
    {
        ddlGender.SelectedValue = "女";
    }
}

這里的邏輯也很簡單，根據行索引和下拉列表ID獲取渲染后的下拉列表實例，然后獲取相應的數據，並根據此數據更改下拉列表的選中值。

 

獲取用戶可以修改后的下拉列表值和上例類似，就不再贅述。

 

 

后台綁定模板列中的下拉列表

有時我們可能無法直接在ASPX完成下拉列表，比如需要從數據庫讀取中國的省份信息並綁定到下拉列表，這就需要在后台完成。

下列會模擬這一過程，假設性別下拉列表的“男”和“女”是需要讀取數據庫才能獲得的信息，再來看下ASPX標簽的定義：

<ext:Grid ID="Grid1" ShowBorder="true" ShowHeader="true" Title="表格" Width="800px"
        runat="server" DataKeyNames="Id,Name" OnRowDataBound="Grid1_RowDataBound">
    <Columns>
        <ext:TemplateField Width="60px" HeaderText="性別">
            <ItemTemplate>
                <asp:DropDownList runat="server" ID="ddlGender">
                </asp:DropDownList>
            </ItemTemplate>
        </ext:TemplateField>
        // 省略其他列...
    </Columns>
</ext:Grid>

 

在后台的行綁定事件中：

protected void Grid1_RowDataBound(object sender, ExtAspNet.GridRowEventArgs e)
{
    System.Web.UI.WebControls.DropDownList ddlGender =
        (System.Web.UI.WebControls.DropDownList)Grid1.Rows[e.RowIndex].FindControl("ddlGender");

    List<string> genderList = new List<string>();
    genderList.Add("男");
    genderList.Add("女");
    ddlGender.DataSource = genderList;
    ddlGender.DataBind();

    DataRowView row = e.DataItem as DataRowView;

    int gender = Convert.ToInt32(row["Gender"]);
    if (gender == 1)
    {
        ddlGender.SelectedValue = "男";
    }
    else
    {
        ddlGender.SelectedValue = "女";
    }
}

這里邏輯是：

1. 首先行渲染完畢，此時模板列的下拉列表為空；
2. 然后在行綁定事件中，根據行索引和下拉列表ID獲取渲染后的下拉列表實例（FindControl）；
3. 查詢數據庫得到有關下拉列表項的信息，並綁定到此下拉列表實例（DataBind）；
4. 獲取相應的數據，並根據此數據更新下拉列表的選中值（SelectedValue ）。

 

 

后台更新模板列的值

后台代碼中更新了模板列中的值，有兩種情況：

1. 重新對表格進行了數據綁定（DataBind）；
2. 只更新了部分模板列的值，此時需要手工調用UpdateTemplateFields方法了更新界面顯示。

 

還是本章開頭的第一個例子，我們需要點擊更新按鈕時將所有的“分組”列的值加一，該怎么實現：

protected void Button1_Click(object sender, EventArgs e)
{
    for (int i = 0, count = Grid1.Rows.Count; i < count; i++)
    {
        GridRow row = Grid1.Rows[i];
        System.Web.UI.WebControls.DropDownList ddlGender =
            (System.Web.UI.WebControls.DropDownList)row.FindControl("ddlGender");
        System.Web.UI.WebControls.TextBox tbxGroupName =
            (System.Web.UI.WebControls.TextBox)row.FindControl("tbxGroupName");

        tbxGroupName.Text = (Convert.ToInt32(tbxGroupName.Text) + 1).ToString();

    }

    // 如果不是重新綁定數據，則需要手工調用UpdateTemplateFields來更新所有TemplateField中的值
    Grid1.UpdateTemplateFields();
}

當然，如果是重新綁定表格的話，就不要調用UpdateTemplateFields方法了。

 

 

小結

模板列中放置可編輯框在實際項目中也有很大的需求，可以減少打開新窗口編輯的麻煩，同時可以批量編輯。如果你的項目有類似的需求，一定要把這一塊吃透。

下一篇文章我們會介紹如何動態創建表格列，特別是模板列的動態創建需要一定的編程技巧。

 

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