- 说明：我使用的ExtJs版本是3.2，代码片段是基于实际项目
- gridpanel动态生成列的核心就是在后台拼凑columnmodel和store
- 此博客只是我自己记录为方便以后能更快处理类似问题，如果不能给你带来帮助，不喜勿喷
- JS片段，动态生成ColumnModel和GridStore
//动态生成grid列
function dynamicColumn(organId) {
Ext.Ajax.request({
url: path + "/depreciReport.do?method=genGridColumn",
params: 'orgId=' + orgId,
method: 'POST',
success: function(v) {
var myData = Ext.util.JSON.decode(v.responseText); // 得到服务器反回数据
var columnDate = new Array();
if (myData.success) {
monthDeprReportGridStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
},
myData.store)
});
monthDeprReportGridCm = new Ext.grid.ColumnModel(eval(myData.column));
monthDeprReportGrid.reconfigure(monthDeprReportGridStore, monthDeprReportGridCm);
monthDeprReportPaging.bindStore(monthDeprReportGridStore);
}
}
});
}- JAVA后台代码片段，主要是拼出store和columnmodel的json串
-
拼接触的columnModel json串/** * * @Title: getColumnModel * @Description: 动态生成grid表头 * @param: @param mapping * @param: @param form * @param: @param request * @param: @param response * @param: @return * @return: ActionForward * @throws */ public ActionForward genGridColumn(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) { String organId = request.getParameter("organId");//单位ID List<UnitList> list = new ArrayList<UnitList>(); if(StringUtils.isEmpty(organId)){ organId = request.getSession().getAttribute(LoginConstant.ORGANID).toString(); } list = this.depreciReportService.findBySql(UnitList.class,"select unit_id,unit_name from unit_list where is_enabled='1' and " + "(unit_id != unit_pid" + " OR ((SELECT COUNT (*) FROM unit_list u WHERE u.unit_pid = unit_list.unit_pid) = 1))" + " and organ_id="+organId+" order by unit_id"); String column = "[" ; String store = "[{name : 'kjqj'}," + "{name : 'classCode'}," + "{name : 'className'},"; column = "["+ "{header : '会计期间',width : 80,align : 'center',sortable : false,dataIndex : 'kjqj',menuDisabled :true},"+ "{header : '类别编号',width : 150,align : 'left',sortable : false,dataIndex : 'classCode',menuDisabled :true},"+ "{header : '类别名称',width : 120,align : 'left',sortable : false,dataIndex : 'className',menuDisabled :true}"; if(list != null && list.size() > 0){ for (UnitList unitlist : list) { column += ",{header : '"+unitlist.getUnitName()+"',width : 150,align : 'right',sortable : false,dataIndex : 'unit"+unitlist.getUnitId()+"',menuDisabled :true}"; store += ",{name : 'unit"+unitlist.getUnitId()+"'}"; } } column += "]"; store += "]"; JSONObject jo = new JSONObject(); jo.put("column", column); jo.put("store", store); jo.put("success", true); PrintWriter out = null; try { out = response.getWriter(); out.print(jo.toString()); } catch (IOException e) { e.printStackTrace(); } out.close(); return null; } -
[{ header: '会计期间', width: 80, align: 'center', sortable: false, dataIndex: 'kjqj', menuDisabled: true }, { header: '类别编号', width: 150, align: 'left', sortable: false, dataIndex: 'classCode', menuDisabled: true }, { header: '类别名称', width: 120, align: 'left', sortable: false, dataIndex: 'className', menuDisabled: true }, { header: '公司领导', width: 150, align: 'right', sortable: false, dataIndex: 'unit10042', menuDisabled: true }, { header: '董事会/总经理办公室', width: 150, align: 'right', sortable: false, dataIndex: 'unit10043', menuDisabled: true }, { header: '企业发展与考核部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10044', menuDisabled: true }, { header: '运营与投资管理部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10045', menuDisabled: true }, { header: '安全质量技术管理部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10046', menuDisabled: true }, { header: '人力资源部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10047', menuDisabled: true }, { header: '财务部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10048', menuDisabled: true }, { header: '法律事务部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10049', menuDisabled: true }, { header: '纪检监察审计部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10050', menuDisabled: true }, { header: '党委工作部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10051', menuDisabled: true }, { header: '工会', width: 150, align: 'right', sortable: false, dataIndex: 'unit10054', menuDisabled: true }, { header: '信息化部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10055', menuDisabled: true }, { header: '科技与国际合作部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10056', menuDisabled: true }, { header: '南方区域事业部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10058', menuDisabled: true }, { header: '北方区域事业部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10059', menuDisabled: true }, { header: '西南区域事业部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10060', menuDisabled: true }, { header: '华东区域事业部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10061', menuDisabled: true }, { header: '北京区域事业部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10062', menuDisabled: true }, { header: '工程技术研究院', width: 150, align: 'right', sortable: false, dataIndex: 'unit10063', menuDisabled: true }, { header: '安保离退事务部', width: 150, align: 'right', sortable: false, dataIndex: 'unit10191', menuDisabled: true }, { header: '存量土地开发项目办公室', width: 150, align: 'right', sortable: false, dataIndex: 'unit10194', menuDisabled: true }]store 对应的json串
-
[{ name: 'kjqj' }, { name: 'classCode' }, { name: 'className' }, , { name: 'unit10042' }, { name: 'unit10043' }, { name: 'unit10044' }, { name: 'unit10045' }, { name: 'unit10046' }, { name: 'unit10047' }, { name: 'unit10048' }, { name: 'unit10049' }, { name: 'unit10050' }, { name: 'unit10051' }, { name: 'unit10054' }, { name: 'unit10055' }, { name: 'unit10056' }, { name: 'unit10058' }, { name: 'unit10059' }, { name: 'unit10060' }, { name: 'unit10061' }, { name: 'unit10062' }, { name: 'unit10063' }, { name: 'unit10191' }, { name: 'unit10194' }]