ext2.2打造全新功能grid系列--仅仅动态生成GridPanel

发现Ext中文官网论坛上一些Ext的好文章，真是相见恨晚啊，比自己看Document要快十倍，extit 简直是太伟大了。一点一点的学习，一点一点的摘抄到我的Blog,纯属收藏，急于看别的内容的朋友，请直接到论坛上去看：原文:http://www.cnblogs.com/mogen_yin/archive/2008/12/04/1347246.html

其实这篇所用到的代码在其它博客中都有完全一样的，可是有些朋友刚刚入手，你在一篇里实现了太多的功能，他们学习的复杂度就增加，所以，为了一个简单和清晰，我将以前实现过的示例剥离出来，仅仅就是一个实现绑定的功能。希望真的对你们有所帮助或者启发。
效果图如下：

显示列表页面的html代码

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="gridDynamic3.aspx.cs" Inherits="WebExt.Sample3.gridDynamic3" %>

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head id="Head1" runat="server">
  7.     <title>动态生成GridPanel</title>
  8.     <link rel="Stylesheet" type="text/css" href="../ExtJS/resources/css/ext-all.css" />
  9.     <link rel="Stylesheet" type="text/css" href="../ExtJS/resources/css/xtheme-green.css" />
  10.     <script type="text/javascript" src="../ExtJS/adapter/ext/ext-base.js"></script>
  11.     <script type="text/javascript" src="../ExtJS/ext-all.js"></script>
  12.     <script type="text/javascript" src="../ExtJS/ext-lang-zh_CN.js"></script>
  13. </head>
  14. <body>
  15.     <form id="form1" runat="server">
  16.     <div>
  17.     <div id="grid_div"></div>
  18.     <script type="text/javascript">
  19.     //这里主要实现一个从后台获取数据列，然后动态添加到ColumnModel中，再也不用手动配置的方式
  20.     function ready()
  21.     {
  22.         //声明函数变量
  23.         var data;
  24.         //动态添加列，这是关键代码
  25.         var addColumn = function()
  26.         {
  27.             this.fields = '';
  28.             this.columns = '';      
  29.             this.addColumns=function(name,caption)
  30.             {
  31.                 if(this.fields.length > 0)
  32.                 {
  33.                     this.fields += ',';
  34.                 }
  35.                 if(this.columns.length > 0)
  36.                 {               
  37.                     this.columns += ',';
  38.                 }            
  39.                 this.fields += '{name:"' + name + '"}';
  40.                 this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",width:100,sortable:true}';
  41.             };
  42.         };
  43.         //从服务器端获取列，然后动态添加到ColumnModel中
  44.         Ext.Ajax.request
  45.         ({
  46.              url:"jsonGridDynamic.aspx?param=column",
  47.              success:function(response,option)
  48.              {                 
  49.                  if(response.responseText=="")
  50.                  {
  51.                     return;
  52.                  }                 
  53.                  data = new addColumn();
  54.                  var res = Ext.util.JSON.decode(response.responseText);                 
  55.                  for(var i=0;i<res.length;i++)
  56.                  {
  57.                      for(var p in res[i])
  58.                      {
  59.                         data.addColumns(p,p);
  60.                      }
  61.                  }
  62.                  //动态生成GridPanel
  63.                  makeGrid();
  64.              },
  65.              failure:function()
  66.              {
  67.                 Ext.Msg.alert("消息","查询出错---->请打开数据库查看数据表名字是否正确");
  68.              }
  69.         });
  70.         //动态生成GridPanel
  71.         var makeGrid = function()
  72.         {
  73.             var cm = new Ext.grid.ColumnModel(eval('([' + data.columns + '])'));
  74.             cm.defaultSortable = true;
  75.             var fields = eval('([' + data.fields + '])');
  76.             var newStore = new Ext.data.Store
  77.             ({
  78.                     proxy:new Ext.data.HttpProxy({url:"jsonGridDynamic.aspx?param=data"}),
  79.                     reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root",fields:fields})
  80.             });
  81.             
  82.             newStore.load({params:{start:0,limit:16}});
  83.             var pagingBar = new Ext.PagingToolbar
  84.             ({
  85.                     displayInfo:true,
  86.                     emptyMsg:"没有数据显示",
  87.                     displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
  88.                     store:newStore,
  89.                     pageSize:16
  90.             });        
  91.             var gridPanel = new Ext.grid.GridPanel
  92.             ({
  93.                     title:"动态生成grid",
  94.                     cm:cm,
  95.                     id:"grid_panel",renderTo:"grid_div",
  96.                     store:newStore,
  97.                     frame:true,
  98.                     border:true,                    
  99.                     layout:"fit",   
  100.                     pageSize:16,  
  101.                     width:500,
  102.                     height:400,
  103.                     viewConfig:{forceFit:true},
  104.                     bbar:pagingBar
  105.             });
  106.         };
  107.     }
  108.     Ext.onReady(ready);
  109.     </script>
  110.     </div>
  111.     </form>
  112. </body>
  113. </html>
复制代码
jsonGridDynamic.aspx页面的html代码 再强调下 就一行 多余的务必删除 经常有人问我 前台获取数据总是提示少一个括弧，就是因为处理Ext请求的页面没有将多余的html代码删除掉
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jsonGridDynamic.aspx.cs" Inherits="WebExt.Sample3.jsonGridDynamic" %>
复制代码
jsonGridDynamic.aspx.cs页面的后台代码
  1. public partial class jsonGridDynamic : System.Web.UI.Page
  2. {
  3.     protected void Page_Load(object sender, EventArgs e)
  4.     {
  5.         #region 分页
  6.         int pagesize = 20;
  7.         int start = 1;
  8.         string field, asc_desc;
  9.         if (string.IsNullOrEmpty(Request["sort"]))
  10.         {
  11.             field = "ID";
  12.             asc_desc = "desc";
  13.         }
  14.         else
  15.         {
  16.             field = Request["sort"];
  17.             asc_desc = Request["dir"];
  18.         }
  19.         if (!string.IsNullOrEmpty(Request["limit"]))
  20.         {
  21.             pagesize = int.Parse(Request["limit"]);
  22.             start = int.Parse(Request["start"]);
  23.         }
  24.         start = start / pagesize;
  25.         start += 1;
  26.         #endregion
  27.         string param = Request["Param"];
  28.         switch (param)
  29.         {
  30.             case "data":
  31.                 Response.Write(Select(field, asc_desc, pagesize, start));
  32.                 break;
  33.             case "column":
  34.                 Response.Write(GetDataColumn());
  35.                 break;
  36.             default:
  37.                 break;
  38.         }
  39.     }

  41.     //获取数据
  42.     string Select(string field, string asc_desc, int pagesize, int start)
  43.     {
  44.         string json = "";
  45.         try
  46.         {
  47.             DataSet ds = ExtUtil.PaginationByTableName(field, asc_desc, pagesize, start, "TypeTable");//获取集合
  48.             if (ds != null && ds.Tables[0].Rows.Count > 0)
  49.             {
  50.                 json = ExtUtil.GetJsonString(ds);//获取Json字符串
  51.                 int count = ExtUtil.GetCountByTableName("TypeTable");//获取行数
  52.                 json = "{totalPorperty:" + count + ",root:" + json + "}";
  53.             }
  54.         }
  55.         catch (Exception ee)
  56.         {
  57.             string error = ee.Message;
  58.         }
  59.         return json;
  60.     }

  62.     //获取数据列
  63.     string GetDataColumn()
  64.     {
  65.         DataSet ds = ExtBusiness.GetMoreRow();//获取dataset集合
  66.         //只要ds不为null，则不管该表是否有数据，都有数据列生成
  67.         if (ds != null)
  68.         {
  69.             List<Hashtable> htList = new List<Hashtable>();
  70.             foreach (DataColumn col in ds.Tables[0].Columns)
  71.             {
  72.                 Hashtable ht = new Hashtable();
  73.                 ht.Add(col.ColumnName, col.ColumnName);
  74.                 htList.Add(ht);
  75.             }
  76.             try
  77.             {
  78.                 string json = JavaScriptConvert.SerializeObject(htList);//获取Json字符串
  79.                 return json;
  80.             }
  81.             catch (Exception ee)
  82.             {
  83.                 string error = ee.Message;
  84.             }
  85.         }
  86.         return "";
  87.     }
  88. }
复制代码

 

posted on 2009-04-30 17:04  fmxyw  阅读(938)  评论(1)  编辑  收藏  举报
Powered by:
博客园
Copyright © 2024 fmxyw
Powered by .NET 8.0 on Kubernetes