### ExtAspNet GridPanel 的一般用法详解
#### 一、简介
在开发Web应用程序时，尤其是在.NET平台上构建基于ASP.NET的应用程序，对于数据展示的需求是非常常见的。为了更好地处理这种需求，许多开发人员会选择使用功能强大的控件库来帮助实现。ExtAspNet就是这样一个流行的JavaScript库的.NET版本，它提供了一系列丰富的UI组件，包括GridPanel，用于展示和操作数据。
#### 二、GridPanel 基础用法
GridPanel是ExtAspNet中用于显示表格数据的核心组件之一，它可以非常方便地集成到ASP.NET应用程序中。下面我们将通过一个具体的例子来详细解释GridPanel的基本配置及使用方法。
##### （一）GridPanel基本配置
在页面上定义一个`GridPanel`控件，并设置其基础属性：
```xml
<ext:Grid ID="gridEcUser" runat="server" EnableCheckBoxSelect="false" EnableRowNumber="true"
Title="用户管理" AllowPaging="True"
onpageindexchange="gridEcUser_PageIndexChange" PageSize="10"
onrowdatabound="gridEcUser_RowDataBound" DataKeyNames="UserId">
```
- **EnableCheckBoxSelect**：设置是否启用复选框选择功能，默认为`false`表示不启用。
- **EnableRowNumber**：设置是否显示行号，默认为`true`。
- **Title**：设置Grid的标题。
- **AllowPaging**：设置是否启用分页功能，默认为`true`。
- **onpageindexchange**：当分页索引改变时触发的事件。
- **PageSize**：每页显示的数据条数。
- **onrowdatabound**：行数据绑定事件。
- **DataKeyNames**：指定主键字段名，通常用于更新或删除操作。
##### （二）工具栏配置
接下来，我们配置GridPanel的工具栏，用于放置按钮等交互元素：
```xml
<Toolbars>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="btnAddEcUser" runat="server" Text="添加" Icon="Add">
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
</ext:ToolbarSeparator>
<ext:Button ID="btnToHome" runat="server" Text="首页" OnClick="btnToHome_Click" Icon="House">
</ext:Button>
</Items>
</ext:Toolbar>
</Toolbars>
```
- **ext:Button**：用于创建工具栏上的按钮。
- **Text**：按钮的文本。
- **Icon**：按钮的图标。
- **OnClick**：点击按钮时触发的方法。
##### （三）列配置
然后配置GridPanel中的列，以展示不同类型的数据：
```xml
<Columns>
<ext:BoundField HeaderText="用户ID" Width="50px" Hidden="true" DataField="UserId" ColumnID="UserId"/>
<ext:BoundField HeaderText="姓名" Width="150px" ExpandUnusedSpace="True" DataField="FullName" ColumnID="FullName"/>
<ext:BoundField HeaderText="登陆用户名" Width="150px" DataField="LoginName" ColumnID="LoginName"/>
<ext:BoundField HeaderText="用户组" Width="150px" ColumnID="RolesFullName" DataField="RolesFullName"/>
<ext:CheckBoxField HeaderText="用户状态" Width="80px" ColumnID="IsOpen" DataField="IsOpen"/>
<ext:LinkButtonField HeaderText="" Width="60px" ColumnID="ModiUser" Text="修改" CommandName="Modi"/>
<ext:LinkButtonField HeaderText="" Width="60px" ColumnID="DelUser" Text="删除" CommandName="Del" ConfirmIcon="Question" ConfirmText="确认要删除用户吗？" ConfirmTitle="易彩国际"/>
</Columns>
```
- **ext:BoundField**：绑定字段。
- **HeaderText**：列标题。
- **Width**：列宽度。
- **Hidden**：是否隐藏该列。
- **DataField**：绑定的数据字段。
- **ColumnID**：列的唯一标识符。
- **ExpandUnusedSpace**：如果为`True`，则该列将扩展以填充剩余的空间。
- **ext:CheckBoxField**：用于创建复选框列。
- **ext:LinkButtonField**：用于创建链接样式按钮列。
##### （四）数据绑定
我们需要在后端代码中实现数据绑定逻辑：
```csharp
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// 数据绑定
DataTable userDt = UserBLL.GetEcUserList();
gridEcUser.DataSource = userDt;
gridEcUser.DataBind();
}
}
protected void gridEcUser_RowDataBound(object sender, ExtAspNet.GridRowEventArgs e)
{
DataRow dr = e.DataItem as DataRow;
if (dr != null)
{
bool isOpen = Convert.ToBoolean(dr["IsOpen"]);
if (isOpen) e.Values[4] = "<img src='../Images/png-0010.png' style='width:16px;text-align:center'";
else e.Values[4] = "<img src='../Images/png-0012.png' style='width:16px;'";
}
}
```
- **Page_Load**：页面加载时进行数据绑定。
- **GetEcUserList**：获取用户列表数据的方法。
- **gridEcUser_RowDataBound**：行数据绑定事件，可以在其中进行自定义处理。
#### 三、总结
本文详细介绍了ExtAspNet GridPanel的基本用法，包括如何配置GridPanel、工具栏、列以及数据绑定。通过这些配置，可以轻松地在.NET应用程序中实现复杂的数据展示和操作功能。此外，还可以根据具体需求进一步扩展GridPanel的功能，如增加排序、搜索等功能，使其更加符合实际应用场景的需求。
