Extjs6 下动态生成grid表头

最新推荐文章于 2021-03-20 11:08:27 发布

chouchenjiu4843

最新推荐文章于 2021-03-20 11:08:27 发布

阅读量296

点赞数

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/niaoge/blog/1635997

版权

前端使用Extjs6j技术。遇到动态生成gird的需求。这里记录下，便于以后使用。

首先定义表格

{
    xtype: 'grid',
    region: 'center',
    reference: 'salaryGrid',
    columnLines: true,
    //enableLocking:true,
    //enableColumnHide:false,
    bind: { store: '{salaryResult}' },
    tbar: [
        {text: '查询', handler: 'onQuery'},'->',
        {text: '后退', handler: 'onBack'}
    ],
    columns: [
        { text: '列1', dataIndex: 'c1',width:100,minWidth:80,menuDisabled: true,locked:true},
        { text: '列2', dataIndex: 'c2' ,width:100,minWidth:80,menuDisabled: true,locked:true}
    ],
    bbar: {
        xtype: 'pagingtoolbar', //分页绑定
        bind: { store: '{salaryResult}' }
    }
}

后台在页面加载后获取数据，动态生成表格的列头

//加载数据
salaryResult.loadPage(1,{
	callback: function (records) {
		if (records==null || records.length == 0)
			return;
			
		//获取数据
		var r = records[0],
		cols = [
			{ text: '固定列1', dataIndex: 'c1',menuDisabled: true,locked:true,draggable:false,width:100,minWidth:80,disabled : true},
			{ text: '固定列2', dataIndex: 'c2' ,menuDisabled: true,locked:true,draggable:false,width:100,minWidth:80,disabled : true}
		];
		
		//遍历数据
		for (var key in r.data) {
			//排除不使用列
			if (key == "id"|| key == "name" ) {
				continue;
			}
			
			//动态加入。text可以使用Map去值替代
			cols.push({ text: key, dataIndex: key ,menuDisabled: false,locked:false ,sortable:true,minWidth:80,flex: 1})
		}
		
		//获取数据源加入动态的列
		me.lookupReference('salaryGrid').reconfigure(null, cols);
	}
});

转载于:https://my.oschina.net/niaoge/blog/1635997