发现Ext中文官网论坛上一些Ext的好文章,真是相见恨晚啊,比自己看Document要快十倍,extit 简直是太伟大了。一点一点的学习,一点一点的摘抄到我的Blog,纯属收藏,急于看别的内容的朋友,请直接到论坛上去看:原文:http://www.cnblogs.com/mogen_yin/archive/2008/12/04/1347246.html
其实这篇所用到的代码在其它博客中都有完全一样的,可是有些朋友刚刚入手,你在一篇里实现了太多的功能,他们学习的复杂度就增加,所以,为了一个简单和清晰,我将以前实现过的示例剥离出来,仅仅就是一个实现绑定的功能。希望真的对你们有所帮助或者启发。
效果图如下:
显示列表页面的html代码
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridDynamic3.aspx.cs" Inherits="WebExt.Sample3.gridDynamic3" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head id="Head1" runat="server">
- <title>动态生成GridPanel</title>
- <link rel="Stylesheet" type="text/css" href="../ExtJS/resources/css/ext-all.css" />
- <link rel="Stylesheet" type="text/css" href="../ExtJS/resources/css/xtheme-green.css" />
- <script type="text/javascript" src="../ExtJS/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="../ExtJS/ext-all.js"></script>
- <script type="text/javascript" src="../ExtJS/ext-lang-zh_CN.js"></script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <div id="grid_div"></div>
- <script type="text/javascript">
- //这里主要实现一个从后台获取数据列,然后动态添加到ColumnModel中,再也不用手动配置的方式
- function ready()
- {
- //声明函数变量
- var data;
- //动态添加列,这是关键代码
- var addColumn = function()
- {
- this.fields = '';
- this.columns = '';
- this.addColumns=function(name,caption)
- {
- if(this.fields.length > 0)
- {
- this.fields += ',';
- }
- if(this.columns.length > 0)
- {
- this.columns += ',';
- }
- this.fields += '{name:"' + name + '"}';
- this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",width:100,sortable:true}';
- };
- };
- //从服务器端获取列,然后动态添加到ColumnModel中
- Ext.Ajax.request
- ({
- url:"jsonGridDynamic.aspx?param=column",
- success:function(response,option)
- {
- if(response.responseText=="")
- {
- return;
- }
- data = new addColumn();
- var res = Ext.util.JSON.decode(response.responseText);
- for(var i=0;i<res.length;i++)
- {
- for(var p in res[i])
- {
- data.addColumns(p,p);
- }
- }
- //动态生成GridPanel
- makeGrid();
- },
- failure:function()
- {
- Ext.Msg.alert("消息","查询出错---->请打开数据库查看数据表名字是否正确");
- }
- });
- //动态生成GridPanel
- var makeGrid = function()
- {
- var cm = new Ext.grid.ColumnModel(eval('([' + data.columns + '])'));
- cm.defaultSortable = true;
- var fields = eval('([' + data.fields + '])');
- var newStore = new Ext.data.Store
- ({
- proxy:new Ext.data.HttpProxy({url:"jsonGridDynamic.aspx?param=data"}),
- reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root",fields:fields})
- });
-
- newStore.load({params:{start:0,limit:16}});
- var pagingBar = new Ext.PagingToolbar
- ({
- displayInfo:true,
- emptyMsg:"没有数据显示",
- displayMsg:"显示从{0}条数据到{1}条数据,共{2}条数据",
- store:newStore,
- pageSize:16
- });
- var gridPanel = new Ext.grid.GridPanel
- ({
- title:"动态生成grid",
- cm:cm,
- id:"grid_panel",renderTo:"grid_div",
- store:newStore,
- frame:true,
- border:true,
- layout:"fit",
- pageSize:16,
- width:500,
- height:400,
- viewConfig:{forceFit:true},
- bbar:pagingBar
- });
- };
- }
- Ext.onReady(ready);
- </script>
- </div>
- </form>
- </body>
- </html>
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jsonGridDynamic.aspx.cs" Inherits="WebExt.Sample3.jsonGridDynamic" %>
- public partial class jsonGridDynamic : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- #region 分页
- int pagesize = 20;
- int start = 1;
- string field, asc_desc;
- if (string.IsNullOrEmpty(Request["sort"]))
- {
- field = "ID";
- asc_desc = "desc";
- }
- else
- {
- field = Request["sort"];
- asc_desc = Request["dir"];
- }
- if (!string.IsNullOrEmpty(Request["limit"]))
- {
- pagesize = int.Parse(Request["limit"]);
- start = int.Parse(Request["start"]);
- }
- start = start / pagesize;
- start += 1;
- #endregion
- string param = Request["Param"];
- switch (param)
- {
- case "data":
- Response.Write(Select(field, asc_desc, pagesize, start));
- break;
- case "column":
- Response.Write(GetDataColumn());
- break;
- default:
- break;
- }
- }
- //获取数据
- string Select(string field, string asc_desc, int pagesize, int start)
- {
- string json = "";
- try
- {
- DataSet ds = ExtUtil.PaginationByTableName(field, asc_desc, pagesize, start, "TypeTable");//获取集合
- if (ds != null && ds.Tables[0].Rows.Count > 0)
- {
- json = ExtUtil.GetJsonString(ds);//获取Json字符串
- int count = ExtUtil.GetCountByTableName("TypeTable");//获取行数
- json = "{totalPorperty:" + count + ",root:" + json + "}";
- }
- }
- catch (Exception ee)
- {
- string error = ee.Message;
- }
- return json;
- }
- //获取数据列
- string GetDataColumn()
- {
- DataSet ds = ExtBusiness.GetMoreRow();//获取dataset集合
- //只要ds不为null,则不管该表是否有数据,都有数据列生成
- if (ds != null)
- {
- List<Hashtable> htList = new List<Hashtable>();
- foreach (DataColumn col in ds.Tables[0].Columns)
- {
- Hashtable ht = new Hashtable();
- ht.Add(col.ColumnName, col.ColumnName);
- htList.Add(ht);
- }
- try
- {
- string json = JavaScriptConvert.SerializeObject(htList);//获取Json字符串
- return json;
- }
- catch (Exception ee)
- {
- string error = ee.Message;
- }
- }
- return "";
- }
- }