Ext2.2动态生成ColumnModel
本篇主要介绍动态生成ColumnModel,进而生成动态生成GridPanel
前台的js部分:
<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:"JsonData.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:"JsonData.aspx?param=data"}),
reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:fields})
});
newStore.load({params:{start:0,limit:9}});
var pagingBar = new Ext.PagingToolbar
({
displayInfo:true,
emptyMsg:"没有数据显示",
displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
store:newStore,
pageSize:9
});
var gridPanel = new Ext.grid.GridPanel
({
title:"动态生成ColumnModel",
cm:cm,
id:"grid_panel",renderTo:"grid_div",
store:newStore,
frame:true,
border:true,
layout:"fit",
pageSize:16,
autoWidth:true,
height:300,
width:600,
viewConfig:{forceFit:true},
bbar:pagingBar
});
};
}
Ext.onReady(ready);
</script>
</div>
</form>
后台的cs部分:
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;
case "data_column":
Response.Write(GetDataAndColumn(field, asc_desc, pagesize, start));
break;
default:
break;
}
}
string GetDataAndColumn(string field, string asc_desc, int pagesize, int start)
{
string data = Select(field, asc_desc, pagesize, start);
string column = GetDataColumn();
List<Hashtable> htList = new List<Hashtable>();
Hashtable ht = new Hashtable();
ht.Add("data", data);
ht.Add("column", column);
htList.Add(ht);
string json = JavaScriptConvert.SerializeObject(htList);
return json;
}
string Select(string field, string asc_desc, int pagesize, int start)
{
string json = "";
try
{
DataSet ds = CommonUtil.PaginationByTableName(field, asc_desc, pagesize, start, "TypeTable");
if (ds != null && ds.Tables[0].Rows.Count > 0)
{
json = CommonUtil.GetJsonString(ds);
int count = CommonUtil.GetCountByTableName("TypeTable");
json = "{totalPorperty:" + count + ",root:" + json + "}";
}
}
catch (Exception ee)
{
string error = ee.Message;
}
return json;
}
这里留个大家一个思考:
细心的读者可能够已经注意到了,
这个程序向服务器请求了2次,
第一次是获取数据列,
第二次是获取分页的数据,
那么如何做到只向服务器请求一次就能够实现这个功能呢?
期待大家的讨论.