·您现在的位置： 江北区云翼计算机软件开发服务部 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> Ext.Net-Grid 篇

【如有意向点此提交需求】关于我们

Ext.Net-Grid 篇

作者：佚名      ASP.NET网站开发编辑：admin      更新时间：2022-07-23

Ext.Net-Grid 篇

概述

前两篇分别介绍了Ext.NET-基础 和 Ext.NET-布局，从本篇开始我们尽量做一些实际工作中用到的例子。

在Ext.NET官方示例中，关于GridPanel的例子是最多的(近百个)，篇幅所限，我们这里只介绍一些常用的功能，包括页面布局、新建、编辑、查询、删除、排序、分组、统计等功能。

示例代码下载地址>>>>>

页面总体布局

首先，再来熟悉下前一篇Ext.NET-布局篇中提到的布局技术。

新建WebForm页面，在aspX文件中加入如下代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"     Inherits="WebFormDemo.GridDemo.Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>Grid示例</title>    <link rel="stylesheet" type="text/CSS" href="../Content/ExtjsExtra.css" /></head><body>    <ext:ResourceManager runat="server" />    <ext:Viewport runat="server" Layout="FitLayout">        <Items>            <ext:GridPanel runat="server" ID="gridMain">                <DockedItems>                    <ext:Toolbar runat="server" Dock="Top">                        <Items>                            <ext:Button runat="server" ID="btnAdd" Icon="Add">                            </ext:Button>                            <ext:ToolbarSeparator runat="server" />                            <ext:Button runat="server" ID="btnDelete" Icon="Delete">                            </ext:Button>                        </Items>                    </ext:Toolbar>                    <ext:PagingToolbar runat="server" Dock="Bottom">                    </ext:PagingToolbar>                </DockedItems>            </ext:GridPanel>        </Items>    </ext:Viewport></body></html>

以上代码在页面中加入了一个铺满整个浏览器窗口的GridPanel控件gridMain；顶端为工具栏，我们打算放一些动作按钮：如新建、删除等；底部未分页工具栏，用于GridPanel的分页；以上代码运行效果如下

页面布局

加入列

上面的代码组织了页面的整体布局，而目前的GridPanel里还没有任何实质性的内容，接下来我们为GridPanel添加需要显示的列。在</DockedItems>和</ext:GridPanel>之间加入如下代码

<ColumnModel>    <Columns>        <ext:RowNumbererColumn runat="server" />        <ext:Column runat="server" Text="姓名" />        <ext:NumberColumn runat="server" Text="年龄" />        <ext:BooleanColumn runat="server" Text="性别" TrueText="男" FalseText="女" />        <ext:DateColumn runat="server" Text="生日" Format="yyyy-MM-dd" />        <ext:Column runat="server" Text="民族" />        <ext:Column runat="server" Text="籍贯" Flex="1" />        <ext:Column runat="server" Text="备注" Flex="1" Hidden="true" />    </Columns></ColumnModel>

以上代码为GridPanel定义了一个ColumnModel,并定义了ColumnModel所包含的列，需要说明的是

  • <ext:RowNumbererColumn runat="server" /> 行号，将为GridPanel自动生成行号；
  • <ext:Column runat="server" Text="籍贯" Flex="1" />中的Flex="1"指定了此列将占满剩余宽度，多个时自动计算各自宽度，与Ext.NET-布局篇中介绍的Flex一致。

Grid列

Ext.NET与ExtJS中的列类型对照

Ext.NET不仅封装了ExtJS提供的列类型，并加入了一些自己的扩展，如下表

Ext.NET类型ExtJs类型说明
ActionColumnExt.grid.column.Action 
BooleanColumnExt.grid.column.Boolean 
CheckColumnExt.grid.column.Check 
ColumnExt.grid.column.Column 
CommandColumn-Ext.Net扩展
ComponentColumn-Ext.Net扩展
DateColumnExt.grid.column.Date 
HyperlinkColumn-Ext.Net扩展,3.x新加，参见此处
ImageCommandColumn-Ext.Net扩展
NumberColumnExt.grid.column.Number 
PRogressBarColumn-Ext.Net扩展
RatingColumn-Ext.Net扩展
RowNumbererColumnExt.grid.column.RowNumberer 
SummaryColumn-Ext.Net扩展,已过时
TagColumn-Ext.Net扩展
TemplateColumnExt.grid.column.Template 
TreeColumnExt.tree.Column 
WidgetColumnExt.grid.column.WidgetExt.NET3.x新加，参见此处

上表是Ext.NET与ExtJS列类型对照，每种类型的列提供了一些特殊功能，篇幅所限，不一一介绍，可参见链接指向的说明或示例。

数据库及CRUD代码

目前为止，页面布局完成了一大半，实际的工作中，我们的数据一般是存储在数据库中，所以，为了接下来的例子更贴近实际，先来创建数据库，本例中使用MS SQL Server 2012(Developer Edition)。

数据库访问相关的技术不是本文的主要目的，为了使示例代码尽量简单，这里我们使用MS提供的SqlHelper类，详情参见Data access application Block for .NET，下载地址.

创建数据库

创建名为ExtNetDemo的数据库加入测试数据，并执行如下脚本创建Person表：

CREATE TABLE [dbo].[Person]([Id] UNIQUEIDENTIFIER NOT NULL PRIMARY KEY,     [Name] NVARCHAR(50) NULL,     [Age] INT NULL,     [Gender] BIT NULL,     [Birthdate] DATETIME NULL,     [Ethnic] NVARCHAR(50) NULL,     [Origo] NVARCHAR(200) NULL,     [Remarks] NVARCHAR(1000) NULL)INSERT INTO [dbo].[Person] ([Id], [Name], [Age], [Gender], [Birthdate], [Ethnic], [Origo], [Remarks]) VALUES (N'f0d1d8bf-31f4-49c1-ac69-898138356b75', N'任盈盈', 18, 0, N'2015-08-08 00:00:00', N'汉族', N'陕西西安', N'备注')INSERT INTO [dbo].[Person] ([Id], [Name], [Age], [Gender], [Birthdate], [Ethnic], [Origo], [Remarks]) VALUES (N'b1fef104-195d-422c-b729-f0c81149b6f0', N'令狐冲', 26, 1, N'2015-05-05 00:00:00', N'回族', N'河北沧州', N'备注说明')INSERT INTO [dbo].[Person] ([Id], [Name], [Age], [Gender], [Birthdate], [Ethnic], [Origo], [Remarks]) VALUES (N'02ddad1a-91f0-4ec3-8d2b-3ed01c6fda6e', N'风清扬', 35, 1, N'1960-02-05 00:00:00', N'汉族', N'陕西渭南', N'大神')

加入实体类

我们继续使用Ext.NET-基础篇中使用的Person类，修改后的代码如下:

using System;namespace WebFormDemo{    public class Person    {        public Guid Id { get; set; }        public string Name { get; set; }        public int Age { get; set; }        public bool Gender { get; set; }        public DateTime Birthdate { get; set; }        public string Ethnic { get; set; }        public string Origo { get; set; }        public string Remarks { get; set; }        public string Desc { get; set; }    }}

加入CRUD代码

CRUD代码很枯燥，也不是本文重点。建议用成熟的O