您的位置:首页 > Web前端 > JavaScript

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

2016-12-21 14:07 531 查看
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);  

     }  

 }  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐