三层模式开发使用GridPanel(.net)控件代码实例详解(展示层代码)

收藏本信息编号：376 发布时间：2009-09-12 截止日期：地区：

ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。
但在很多地方的使用都不是详细下面就针对这个控件的排序和列的点击等功能的处理贴出代码
如下图所示:

页面展示的内容(界面没有美化只是用于功能能的实现)
绿绦工作室

页面中各行各列都可以实现的点击弹出window 控件的效果获取制定列的信息如图:

判断某行某列的点击可以控制显示的内容并弹出window控件的效果如下图:

禁止点击的使用并做逻辑判断后可以实现复杂的其他功能如下图:

绿绦工作室

但仅仅弹出window控件进行显示;这完全不能满足我们的需要为此可以在window的空间中在添加按钮或逻辑控制回传处理
比如刷新主页提交重置等可能关键还是在于刷新主页的GridPanel 控件值效果如下:

在实际使用中GridPanel这个控件的刷新按钮的功能需要注意我们代码的加载的地方是否加了这个验证 if (!Ext.IsAjaxRequest)

绿绦工作室

这是页面的.aspx的代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> <%@ Import Namespace="System.Collections.Generic" %> <%@ Import Namespace="Model" %> <%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>CellSelectionModel</title> <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <ext:ScriptManager ID="ScriptManager1" runat="server" ></ext:ScriptManager> <ext:Store ID="Store1" runat="server" > <Reader> <ext:JsonReader ReaderID="id"><%--  --%> <Fields> <ext:RecordField Name="id" ></ext:RecordField> <ext:RecordField Name="Departmentname" ></ext:RecordField> <ext:RecordField Name="TaxationAddressID" ></ext:RecordField> <ext:RecordField Name="Parent" ></ext:RecordField> <ext:RecordField Name="Telephone" ></ext:RecordField> <ext:RecordField Name="Fax" ></ext:RecordField> <ext:RecordField Name="Address" ></ext:RecordField> <ext:RecordField Name="Emaile" ></ext:RecordField> <ext:RecordField Name="Flag" ></ext:RecordField> <ext:RecordField Name="Status" ></ext:RecordField> <ext:RecordField Name="UpdateTime" ></ext:RecordField> <ext:RecordField Name="CreateTime" ></ext:RecordField> </Fields> </ext:JsonReader> </Reader> </ext:Store> <ext:GridPanel Icon="Add" ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true" Title="部门信息" AutoExpandColumn="DepartmentModel" Collapsible="true" EnableColumnMove="true" Height="300" IDMode="Explicit"> <ColumnModel ID="ColumnModel1" runat="server" IDMode="Explicit"> <Columns> <ext:Column ColumnID="DepartmentModel" Header="id" Width="160" Sortable="true" DataIndex="id" Hidden="true" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="Departmentname" Sortable="true" DataIndex="Departmentname"> <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="TaxationAddressID" Sortable="true" DataIndex="TaxationAddressID" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="Parent" Sortable="true" DataIndex="Parent" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="Telephone" Sortable="true" DataIndex="Telephone" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="Fax" Sortable="true" DataIndex="Fax" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="Address" Sortable="true" DataIndex="Address" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="Emaile" Sortable="true" DataIndex="Emaile" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="Flag" Sortable="true" DataIndex="Flag" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="Status" Sortable="true" DataIndex="Status" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="UpdateTime" Sortable="true" DataIndex="UpdateTime" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> <ext:Column Header="CreateTime" Sortable="true" DataIndex="CreateTime" > <PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="False"></PrepareCommand> </ext:Column> </Columns> </ColumnModel> <SelectionModel> <ext:CellSelectionModel ID="CellSelectionModel1" runat="server" IDMode="Explicit"> <AjaxEvents> <CellSelect OnEvent="Cell_Click" ></CellSelect> </AjaxEvents> </ext:CellSelectionModel> </SelectionModel> <BottomBar> <ext:PagingToolBar ID="PagingToolBar1" runat="server" PageSize="10" IDMode="Explicit" ></ext:PagingToolBar> </BottomBar> </ext:GridPanel> <ext:Window ID="Window1" runat="server" Collapsible="true" Icon="Anchor" Title="Title" Modal="true" ShowOnLoad="False" Height="232px" Width="433px" > <Body> <ext:Label ID="Label1" runat="server" ></ext:Label> </Body> </ext:Window> <ext:Window ID="Window2" runat="server" Icon="ApplicationError" ShowOnLoad="False" Modal="true" Title="错误点击" > <Body> 有事么事不许点我 </Body> </ext:Window> <ext:Window ID="Window3" Icon="BuildingAdd" runat="server" Collapsible="true" ShowOnLoad="False" Modal="true" Title="系统消息" Height="160px" Width="387px"> <Body> <ext:Label ID="Label2" runat="server"> </ext:Label> <ext:Button ID="Button1" runat="server" onclick_fckprotectedatt="%20onclick%3D%22Button1_Click%22" Text="刷新主页" AutoPostBack="True" AutoShow="True" > <AjaxEvents AutoDataBind="True"> </AjaxEvents> </ext:Button> </Body> </ext:Window> </form> </body> </html>

这是.cs文件代码

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using Coolite.Ext.Web; using Model; public partial class Default2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //if (!Ext.IsAjaxRequest) //{ //this.Store1.DataSource = new List<Company> // { // new Company("3m Co", 71.72, 0.02, 0.03), // new Company("Alcoa Inc", 29.01, 0.42, 1.47), // new Company("Altria Group Inc", 83.81, 0.28, 0.34), // new Company("American Express Company", 52.55, 0.01, 0.02), // new Company("American International Group, Inc.", 64.13, 0.31, 0.49), // new Company("AT&T Inc.", 31.61, -0.48, -1.54), // new Company("Boeing Co.", 75.43, 0.53, 0.71), // new Company("Caterpillar Inc.", 67.27, 0.92, 1.39), // new Company("Citigroup, Inc.", 49.37, 0.02, 0.04), // new Company("E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28), // new Company("Exxon Mobil Corp", 68.1, -0.43, -0.64), // new Company("General Electric Company", 34.14, -0.08, -0.23), // new Company("General Motors Corporation", 30.27, 1.09, 3.74), // new Company("Hewlett-Packard Co.", 36.53, -0.03, -0.08), // new Company("Honeywell Intl Inc", 38.77, 0.05, 0.13), // new Company("Intel Corporation", 19.88, 0.31, 1.58), // new Company("International Business Machines", 81.41, 0.44, 0.54), // new Company("Johnson & Johnson", 64.72, 0.06, 0.09), // new Company("JP Morgan & Chase & Co", 45.73, 0.07, 0.15), // new Company("McDonald\"s Corporation", 36.76, 0.86, 2.40), // new Company("Merck & Co., Inc.", 40.96, 0.41, 1.01), // new Company("Microsoft Corporation", 25.84, 0.14, 0.54), // new Company("Pfizer Inc", 27.96, 0.4, 1.45), // new Company("The Coca-Cola Company", 45.07, 0.26, 0.58), // new Company("The Home Depot, Inc.", 34.64, 0.35, 1.02), // new Company("The Procter & Gamble Company", 61.91, 0.01, 0.02), // new Company("United Technologies Corporation", 63.26, 0.55, 0.88), // new Company("Verizon Communications", 35.57, 0.39, 1.11), // new Company("Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63) // }; this.Store1.DataSource = new BLL.DepartmentBLL().GetAllList(); this.Store1.DataBind(); //} if (!this.IsPostBack) { CellSelectionModel sm = this.GridPanel1.SelectionModel.Primary as CellSelectionModel; sm.SelectedCell.ColIndex = 1; sm.SelectedCell.RowIndex = 1; // selection by record id and field name working also //sm.SelectedCell.RecordID = "Alcoa Inc"; //sm.SelectedCell.Name = "Price"; } } //public class Company //{ // public Company(string name, double price, double change, double pctChange) // { // this.Name = name; // this.Price = price; // this.Change = change; // this.PctChange = pctChange; // } // public string Name { get; set; } // public double Price { get; set; } // public double Change { get; set; } // public double PctChange { get; set; } //} protected void Cell_Click(object sender, AjaxEventArgs e) { CellSelectionModel sm = this.GridPanel1.SelectionModel.Primary as CellSelectionModel; if (sm.SelectedCell.ColIndex == 7) { Label2.Html = string.Format(" 有个隐藏的编号{0} 不要给别人说哦 ", sm.SelectedCell.RecordID); Window3.Show(); } else if (sm.SelectedCell.ColIndex == 6) { //LTP.Common.MessageBox.Show(this,"有事么事不许点我"); Window2.Show(); } else if (sm.SelectedCell.ColIndex == 5) { this.Label1.Html = string.Format("你点的是第{1}行的第{2}列 这一列不给你显示.....^@^ 不过你都点了 .... 意思一下给你id={0} 你自己拿去用", sm.SelectedCell.RecordID.ToString(), sm.SelectedCell.RowIndex.ToString(), sm.SelectedCell.ColIndex.ToString()); this.Window1.Show(); } else { this.Label1.Html = string.Format("主键ID: {0} 列名: {1} 选择的值: {2} 行号: {3} 列数(从0开始编号): {4} 其他", sm.SelectedCell.RecordID, sm.SelectedCell.Name, sm.SelectedCell.Value, sm.SelectedCell.RowIndex.ToString(), sm.SelectedCell.ColIndex.ToString()); this.Window1.Show(); } } protected void Button1_Click(object sender, EventArgs e) { GridPanel1.Reload(); // Store1.DataBind(); } }

三层模式开发使用GridPanel(.net)控件代码实例详解打包下载 gridpanel使用window的示例

不包含数据库文件需要数据库文件请点击此处