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

发现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>

复制代码

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 "";
}
}

复制代码

转载于:https://www.cnblogs.com/fmxyw/archive/2009/04/30/1447135.html

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

EXTJS学习系列提高篇:第二十五篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--右键菜单篇...
本文介绍如何在grid列表里在某行上面单击右键弹出菜单的功能先看看效果图: 如上图所示,具体菜单的功能没有去实现,这里和前几篇的后台都极为类似,有需要后台代码的朋友只需要浏览前几篇即可. 下面仅仅 ...
grid系列--删除
來源:http://www.cnblogs.com/wenjl520/archive/2008/12/23/1325655.html <!DOCTYPE html PUBLIC "-/ ...
用ExtJs+Linq+Wcf打造简单grid
本系列文章列表 1)Ajax访问Xml Web Service的安全问题以及解决方案 2)Ajax与WCF交互-WCF之美 3) Ajax与Wcf交互-JSON 4) ExtJs与WCF交互:生成树 ...
Ext2.0框架的Grid使用介绍(转)
Ext2.0框架的Grid使用介绍最近空闲时间在学习Ext2.0框架,只有一个字的感叹"强",我从未想到JS代码能够写出这么绚丽的Web页面出来,以前看到YUI,惊若天人,如今 ...
Unity3D的坑系列：动态加载dll
Unity3D的坑系列:动态加载dll 我现在参与的项目是做MMO手游,目标平台是Android和iOS,iOS平台不能动态加载dll(什么原因找乔布斯去),可以直接忽略,而在Android平台是可以 ...
音视频开发（2）---red5+java打造直播平台系列初级
red5+java打造直播平台系列初级 red5+java打造直播平台系列 (搭建调测) 前言:如今各式各样的直播平台,像雨后春笋般冒出来.本系列重零开始,基于RED5为服务器,通过JAVA编写后台 ...
[Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)
前言延续: [Ext JS 4] 实战之Grid, Tree Gird 动态添加列这一篇. 在上一篇中有提到在grid 中如何进行带隐藏栏位的动态添加方式.归纳一下思路就是: 先显示,后隐藏. 当 ...
[Ext JS 4] 实战之Grid, Tree Gird 动态添加行
前言在 [Ext JS 4] 实战之Grid, Tree Gird 动态添加列这一篇中,有介绍到如何动态添加一列 -- 设置新columns 后调用reconfigure 方法. 这里来承接这一篇 ...
在线报表设计实战系列 – 制作动态列与静态列混排的报表（5）
在线报表设计实战系列 – 制作动态列与静态列混排的报表(5) 葡萄城报表是一套强大的报表开发和系统搭建工具,既能与您开发的报表软件项目紧密集成,也可独立部署运行,支持多数据源,具有无编码.灵活.稳定等 ...

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

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

最新文章

热门文章