ExtJs中根据后台数据动态创建表格列及其数据

renderDynamicTable: function(dataset,type, tab) {
        var resultSetId = type === 'control' ? '#controlResultSet' : '#testResultSet';
        var ctlSet = dataset;
        if(Ext.isArray(ctlSet) && ctlSet.length > 0){
            var ctlData = [];
            var fields = [];
			//根据数据集动态创建store fields及行数据
            ctlSet.forEach(function(row,index){
                var rowData = {};
                if(row && row.length > 0){
                    if(fields.length === 0){
                        for(var i=0;i<row.length;i++){
                            fields.push('col' + i);
                        }
                    }
                    row.forEach(function(value,index){
                        rowData[fields[index]] = value;
                    });
                    ctlData.push(rowData);
                }
            });
            var columns = [];
			//根据数据集动态创建列
            fields.forEach(function(name,index){
                columns.push({
                    text: name,
                    dataIndex: name,
                    renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                        if(!Ext.isEmpty(value)){
                            metaData.tdAttr = 'data-qtip="' + value + '"';
                        }
                        return value;
                    }});
            });
			//创建内存store,绑定数据及fields
            Ext.create('Ext.data.Store', {
                storeId:'ctlStore',
                fields:fields,
                data: ctlData,
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json'
                    }
                }
            });
			//给表格重写配置store和列
            tab.down(resultSetId).reconfigure(Ext.data.StoreManager.lookup('ctlStore'),columns);
        }
    }

相关推荐