ExtAspNet (Ext.NET) GridPanel 常用功能速查

基本宣告

<ext:Grid ID="gridEcUser" runat="server"
    EnableCheckBoxSelect="false" EnableRowNumber="true"
    Title="用戶管理" AllowPaging="True" PageSize="10"
    DataKeyNames="UserId"
    OnPageIndexChange="gridEcUser_PageIndexChange"
    OnRowDataBound="gridEcUser_RowDataBound">
  <Toolbars>
    <ext:Toolbar ID="Toolbar1" runat="server">
      <Items>
        <ext:Button ID="btnAdd" Text="新增" Icon="Add" />
        <ext:ToolbarSeparator />
        <ext:Button ID="btnHome" Text="首頁" Icon="House" OnClick="btnHome_Click" />
      </Items>
    </ext:Toolbar>
  </Toolbars>
  <Columns>
    <ext:BoundField HeaderText="用戶ID" DataField="UserId" Hidden="true" />
    <ext:BoundField HeaderText="姓名" DataField="FullName" ExpandUnusedSpace="True" />
    <ext:BoundField HeaderText="登入帳號" DataField="LoginName" />
    <ext:BoundField HeaderText="用戶組" DataField="RolesFullName" />
    <ext:CheckBoxField HeaderText="狀態" DataField="IsOpen" />
    <ext:LinkButtonField HeaderText="" Text="修改" CommandName="Modi" />
    <ext:LinkButtonField HeaderText="" Text="刪除" CommandName="Del"
        ConfirmIcon="Question" ConfirmText="確定刪除?" ConfirmTitle="提示" />
  </Columns>
</ext:Grid>

後端資料繫結

DataTable dt = UserBLL.GetUserList();
gridEcUser.DataSource = dt;
gridEcUser.DataBind();

RowDataBound 動態調整欄位內容

protected void gridEcUser_RowDataBound(object sender, GridRowEventArgs e)
{
    DataRow dr = e.DataItem as DataRow;
    if (dr != null)
    {
        bool isOpen = Convert.ToBoolean(dr["IsOpen"]);
        e.Values[4] = isOpen
            ? "<img src='../Images/on.png' style='width:16px' />"
            : "<img src='../Images/off.png' style='width:16px' />";
    }
}

欄位內容置中

<ext:BoundField HeaderText="姓名" DataField="FullName"
    DataFormatString="<div style='text-align:center;width:100%'>{0}</div>" />

RowCommand 取得 DataKey 值

protected void gridEcUser_RowCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "Modi")
    {
        string userId = gridEcUser.DataKeys[e.RowIndex][0].ToString();
        Alert.Show("修改 ID: " + userId);
    }
    else if (e.CommandName == "Del")
    {
        // 刪除邏輯
    }
}

關鍵屬性速查