通用EXT Grid 动态数据源自动生成列 封装

js代码：

 

var GenerGrid = { data: null, url_data: null,//Grid数据源 url_column: null,//列数据源 _width: null,//宽度 _height: null,//高度 _pagesize: null,//每页显示数据数 romanceContainer: null,//渲染Grid的容器 //hiddenColumnCount: null, //隐藏的列数，默认无隐藏列 enableChecked: false,//是否有CheckBox，默认为无。 grid: null, ToHrefField: null,//链接列 ToHrefUrl: null,//链接地址 ToHref: function(value) { return '<a href=" + GenerGrid.ToHrefUrl + " mce_href=" + GenerGrid.ToHrefUrl + ">' + value + '</a>'; }, GenerData: function() { //动态添加列，这是关键代码 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: GenerGrid.url_column, success: function(response, option) { if (response.responseText == "") { return; } GenerGrid.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]) { GenerGrid.data.addColumns(p, p); } } //动态生成GridPanel makeGrid(); }, failure: function() { Ext.Msg.alert("消息", "查询出错请查看语句是否配置正确"); } }); //动态生成GridPanel var makeGrid = function() { var cm = new Ext.grid.ColumnModel(eval('([' + GenerGrid.data.columns + '])')); cm.defaultSortable = false; var fields = eval('([' + GenerGrid.data.fields + '])'); var newStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: GenerGrid.url_data }), reader: new Ext.data.JsonReader({ totalProperty: "totalPorperty", root: "result", fields: fields }) }); newStore.load({ params: { start: 1, limit: 16 } }); var pagingBar = new Ext.PagingToolbar({ displayInfo: true, emptyMsg: "没有数据显示", displayMsg: "显示从{0}条数据到{1}条数据，共{2}条数据", store: newStore, pageSize: GenerGrid._pagesize, items: ['-', { pressed: true, enableToggle: true, text: '导出Excel', cls: 'x-btn-text-icon details', icon: "../images/plugin.gif", toggleHandler: function(btn, pressed) { var title = "数据下载"; //如果是作为uri后面的参数传值，那就需要对字符进行编码 //如果是通过post的方式传数据，就不要做任何的编码 var cols = eval(cm); var header = ""; var dataIndex = ""; for (var i = 0; i < cols.config.length; i++) { header += cols.config[i].header + ","; dataIndex += cols.config[i].dataIndex + ","; } var uri = "DataStore.aspx?param=ExpExcel" + "&filename=" + escape(title) + "&header=" + header + "&dataIndex=" + dataIndex; window.location.href = uri; } }, '-'] }); var gridPanel = new Ext.grid.GridPanel({ cm: cm, id: "grid_panel", loadMask: { msg: '正在加载数据，请稍侯. . . . . .' }, renderTo: GenerGrid.romanceContainer, store: newStore, frame: true, border: true, layout: "fit", pageSize: GenerGrid._pagesize, //width:GenerGrid._width, height: GenerGrid._height, viewConfig: { forceFit: true }, columnLines: false, bbar: pagingBar }); GenerGrid.grid = gridPanel; }; }}   

 

页面调用：

 

var gdate=function init(Container_id,sqlid) { Ext.Msg.alert("提示消息",sqlid);//测试用的 GenerGrid.url_data = "DataStore.aspx?sqlid="+sqlid+"¶m=griddata"; //Grid数据源 GenerGrid.url_column = "DataStore.aspx?sqlid="+sqlid+"¶m=gridcolumn"; //列数据源 //GenerGrid._width =Ext.get(Container_id).getComputedWidth(); //宽度 GenerGrid._height = 360; //高度 GenerGrid.romanceContainer = Container_id; //渲染Grid的容器 GenerGrid._pagesize = 20; //每页显示数据数 GenerGrid.enableChecked = false; //是否有CheckBox，默认为无。 GenerGrid.ToHrefField = "TypeCName"; GenerGrid.ToHrefUrl = "about:blank"; GenerGrid.GenerData(); }..............gdate(dtime,_TypeID);