此封装的Grid是根据http://www.cnblogs.com/mogen_yin/archive/2008/12/04/1347246.html改造而来。
Grid源码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//**
2
* @author sunfishlu
3
*/
4
var simplyGrid =
5![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{
6
data: null,
7
url_data: null, //Grid数据源
8
url_column: null, //列数据源
9
_width: null, //宽度
10
_height: null, //高度
11
_pagesize: null, //每页显示数据数
12
romanceContainer: null, //渲染Grid的容器
13
hiddenColumnCount: null, //隐藏的列数,默认无隐藏列
14
enableChecked: false, //是否有CheckBox,默认为无。
15
grid: null,
16
ToHrefField: null, //链接列
17
ToHrefUrl: null, //链接地址
18![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
ToHref: function(value)
{
19
return '<a href=' + simplyGrid.ToHrefUrl + '>' + value + '</a>';
20
},
21![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
simply: function()
{
22
//动态添加列
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var addColumn = function()
{
24
this.fields = '';
25
this.columns = '';
26![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.addColumns = function(name, caption)
{
27![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.fields.length > 0)
{
28
this.fields += ',';
29
}
30![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (this.columns.length > 0)
{
31
this.columns += ',';
32
}
33
this.fields += '{name:"' + name + '"}';
34![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (simplyGrid.ToHrefField == name)
{
35
this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",width:100, menuDisabled:true,sortable:true,renderer:' + simplyGrid.ToHref + '}';
36
}
37![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
38
this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",width:100, menuDisabled:true,sortable:true}';
39
}
40
};
41
};
42
//从服务器端获取列,然后动态添加到ColumnModel中
43
Ext.Ajax.request
44![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
(
{
45
url: simplyGrid.url_column,
46![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
success: function(response, option)
{
47![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (response.responseText == "")
{
48
return;
49
}
50
simplyGrid.data = new addColumn();
51
var res = Ext.util.JSON.decode(response.responseText);
52![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var i = 0; i < res.length; i++)
{
53![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var p in res[i])
{
54
simplyGrid.data.addColumns(p, p);
55
}
56
}
57
//动态生成GridPanel
58
makeGrid();
59
},
60![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
failure: function()
{
61
Ext.Msg.alert("消息", "查询出错---->请打开数据库查看数据表名字是否正确");
62
}
63
});
64
//动态生成GridPanel
65![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var makeGrid = function()
{
66![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (simplyGrid.enableChecked)
{
67![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var sm = new Ext.grid.CheckboxSelectionModel(
{ singleSelect: false, moveEditorOnEnter: true, sortable: false });
68
var arr = [sm];
69
var sunfish = eval('([' + simplyGrid.data.columns + '])');
70![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var i = 0; i < sunfish.length; i++)
{
71
arr.push(sunfish[i]);
72
}
73
}
74![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
75
arr = eval('([' + simplyGrid.data.columns + '])');
76
}
77
var cm = new Ext.grid.ColumnModel(arr);
78
//隐藏列
79![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (simplyGrid.hiddenColumnCount != null)
{
80![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
for (var j = 0; j < simplyGrid.hiddenColumnCount; j++)
{
81
cm.setHidden(j, true);
82
}
83
}
84
cm.defaultSortable = true;
85
var fields = eval('([' + simplyGrid.data.fields + '])');
86
var newStore = new Ext.data.Store
87![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
(
{
88![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
proxy: new Ext.data.HttpProxy(
{ url: simplyGrid.url_data }),
89![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
reader: new Ext.data.JsonReader(
{ totalProperty: "totalPorperty", root: "root", fields: fields })
90
});
91![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
newStore.load(
{ params:
{ start: 0, limit: simplyGrid._pagesize} });
92
var pagingBar = new Ext.PagingToolbar
93![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
(
{
94
displayInfo: true,
95
emptyMsg: "没有数据显示",
96
displayMsg: "显示从{0}条数据到{1}条数据,共{2}条数据",
97
store: newStore,
98
pageSize: simplyGrid._pagesize
99
});
100
101
var gridPanel = new Ext.grid.GridPanel
102![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
(
{
103
sm: sm,
104
cm: cm,
105
id: "grid_panel",
106
renderTo: simplyGrid.romanceContainer,
107
store: newStore,
108
frame: true,
109
border: true,
110
layout: "fit",
111
pageSize: simplyGrid._pagesize,
112
width: simplyGrid._width,
113
height: simplyGrid._height,
114![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
viewConfig:
{ forceFit: true },
115
bbar: pagingBar
116
});
117
simplyGrid.grid = gridPanel;
118
};
119
}
120
}
在页面中简单调用如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
function init()
{
2
simplyGrid.url_data = "jsonGridDynamic.aspx?param=data"; //Grid数据源
3
simplyGrid.url_column = "jsonGridDynamic.aspx?param=column"; //列数据源
4
simplyGrid._width = Ext.get("grid_div").getComputedWidth(); //宽度
5
simplyGrid._height = 400; //高度
6
simplyGrid.romanceContainer = 'grid_div'; //渲染Grid的容器
7
simplyGrid._pagesize = 16; //每页显示数据数
8
simplyGrid.hiddenColumnCount = 0; //隐藏的列数,默认无隐藏列
9
simplyGrid.enableChecked = true; //是否有CheckBox,默认为无。
10
simplyGrid.ToHrefField = "TypeCName";
11
simplyGrid.ToHrefUrl = "about:blank";
12
simplyGrid.simply();
13
}
14
Ext.onReady(init);
效果图:
![](https://images.cnblogs.com/cnblogs_com/sunfishlu/174144/o_%E6%8D%95%E8%8E%B7.PNG)