注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

extjs之Dynamic Grid  

2010-07-19 15:53:06|  分类: extjs |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

显示列表页面的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>
复制代码
jsonGridDynamic.aspx页面的html代码 再强调下 就一行 多余的务必删除 经常有人问我 前台获取数据总是提示少一个括弧,就是因为处理Ext请求的页面没有将多余的html代码删除掉
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jsonGridDynamic.aspx.cs" Inherits="WebExt.Sample3.jsonGridDynamic" %>
复制代码
jsonGridDynamic.aspx.cs页面的后台代码
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 "";
}
}
  评论这张
 
阅读(1099)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017