easyui动态表头 && 动态添加tabs

标签：动态表头   easyui   动态   tabs   

今天在实现一个业务的时候，需要根据后台业务数据生成多个tab页，并且每个tab页中表格的表头需要根据数据动态生成。

后台返回的数据格式如下：

实现方法如下：

//$("#compareResWin")//弹窗
//$('#compareResTabs')//弹窗内的tab页面
success: function(result) {
 if(result.length==0){
  alert('无比对结果');
 }else{
  $("#compareResWin").window('open');//弹窗需要先打开，不然表格内容初始化不出来。
  //循环创建tab
  for(var i=0;i<result.length;i++){
   var oneScene = result[i];
   
   var content = '<div title="'+oneScene.scene_name+'" style="padding: 10px"><table id="dg'+i+'"></table></div>';
   
   $('#compareResTabs').tabs('add',{
    title : oneScene.scene_name,
    content:content
   });
 
   var header = oneScene.header;
   var columns = [];
   for(var j=0;j<header.length;j++){
    columns.push({
     field:header[j],
     title:header[j],
     width:100,
     align:'center'
    });
   }
   
   $('#dg'+i).datagrid({columns : [columns]});
   $('#dg'+i).datagrid('loadData',oneScene.data);
   
   //$.parser.parse('compareResTabs'+i);
   //$.parser.parse('#dg'+i);
  }
 }
 parent.$.messager.progress('close');
}

easyui动态表头 && 动态添加tabs

标签：动态表头   easyui   动态   tabs   

原文地址：http://blog.csdn.net/i_chenjiahui/article/details/46425607