easyUI復雜表頭(效果圖)&&代碼

在這個項目中我們使用的是Ext+EasyUI(主要是解決多表頭問題),在這裡我就隻粘貼出部分EasyUI代碼:

最終實現效果圖:

 

以下是實現的代碼:

EasyUI版本:jquery-easyui-1.2.5

//生成JSON代碼js

[javascript] //轉換Json對象  
function  toColJson(){ 
      var jsonText='{'; 
      jsonArray=arguments[0]; 
      var digit=1; 
      for(var i=0;i<jsonArray.length;i++){ 
          if((typeof arguments[i+digit])=='string') 
             jsonText+=jsonArray[i]+': "'+arguments[i+digit]+'"'; 
           else if((typeof arguments[i+digit])=='function') 
               jsonText+=jsonArray[i]+':'+arguments[i+digit]+''; 
           else 
              jsonText+=jsonArray[i]+':"'+arguments[i+digit]+'"'; 
        if(i!=jsonArray.length-1){ 
            jsonText+=','; 
        } 
     } 
      jsonText+='}'; 
    // alert(jsonText);  
     return eval('('+jsonText+')');   

//轉換Json對象
function  toColJson(){
   var jsonText='{';
   jsonArray=arguments[0];
   var digit=1;
   for(var i=0;i<jsonArray.length;i++){
       if((typeof arguments[i+digit])=='string')
       jsonText+=jsonArray[i]+': "'+arguments[i+digit]+'"';
     else if((typeof arguments[i+digit])=='function')
      jsonText+=jsonArray[i]+':'+arguments[i+digit]+'';
     else
     jsonText+=jsonArray[i]+':"'+arguments[i+digit]+'"';
   if(i!=jsonArray.length-1){
    jsonText+=',';
   }
     }
   jsonText+='}';
 // alert(jsonText);
  return eval('('+jsonText+')'); 
}
EasyUI實現復雜表頭:

[javascript] //創建列  
         var keys01=['title','align','colspan']; 
         var keys03=['title','align','colspan','rowspan']; 
         var key02=['title','align','colspan','field','width','sortable']; 
         var key04=['title','align','colspan','rowspan','field','width','sortable']; 
         var continentGroupRow=new Array();//合並表頭  
         continentGroupRow.push(toColJson(key04,'區劃名稱','left',1,3,'areaName',100,true)); 
         continentGroupRow.push(toColJson(key04,'時間','left',1,3,'datetime',80,true)); 
 
         
         continentGroupRow.push(toColJson(keys03,'合計','center',1,2)); 
          
         continentGroupRow.push(toColJson(keys01,'流向縣級以外病人','center',6)); 
         continentGroupRow.push(toColJson(keys01,'流向縣級','center',2)); 
         continentGroupRow.push(toColJson(keys01,'流向鄉級','center',2)); 
         continentGroupRow.push(toColJson(keys01,'流向其它','center',2)); 
          
          
          
         var cityGroupRow=new Array();//合並表頭  
          
        // cityGroupRow.push(toColJson(keys01,'合計','center',1));  
         cityGroupRow.push(toColJson(keys01,'小計','center',2)); 
         cityGroupRow.push(toColJson(keys01,'流向省級定點醫療機構病人數','center',2)); 
         cityGroupRow.push(toColJson(keys01,'流向市級定點醫療機構病人數','center',2)); 
         cityGroupRow.push(toColJson(keys01,'醫療機構病人數','center',2)); 
         cityGroupRow.push(toColJson(keys01,'醫療機構病人數 ','center',2)); 
         cityGroupRow.push(toColJson(keys01,'醫療機構病人數','center',2)); 
          
         var columns=new Array();//列  
     
         columns.push(toColJson(key02,'(單位:人)','right',1,'totalNum',80,true)); 
         columns.push(toColJson(key02,'人數','right',1,'outCouLvlSumNum',60,true)); 
         columns.push(toColJson(key02,'比率','right',1,'p0',60,true)); 
         columns.push(toColJson(key02,'人數','right',1,'proLvlNum',85,true)); 
         columns.push(toColJson(key02,'比率','right',1,'p1',85,true)); 
         columns.push(toColJson(key02,'人數','right',1,'cityLvlNum',85,true)); 
         columns.push(toColJson(key02,'比率','right',1,'p2',85,true)); 
         columns.push(toColJson(key02,'人數','right',1,'couLvlNum',60,true)); 
         columns.push(toColJson(key02,'比率','right',1,'p3',60,true)); 
         columns.push(toColJson(key02,'人數','right',1,'vicusLvlNum',60,true)); 
         columns.push(toColJson(key02,'比率','right',1,'p4',60,true)); 
         columns.push(toColJson(key02,'人數','right',1,'elseLvlNum',60,true)); 
         columns.push(toColJson(key02,'比率','right',1,'p5',60,true)); 
          
          
         $('#grid').datagrid({ 
            url:'',//basePath+'/himp/tdata_finance_exp_and_rec_org_sta!ajaxList.action',  
            //title: '表信息',  
            fit: true, 
            nowrap:false, 
            rownumbers:true, 
            pagination:true, 
            pageNumber:1, 
            singleSelect:true,//隻允許選一行  
            sortOrder: 'desc', 
            remoteSort: false,//遠程排序禁止  
            striped:true, 
            loadMsg:'正在加載請稍後!',  
            pageSize:20, 
            pageList:[10,20,50,100],  
            showFooter:true, 
            //frozenColumns:[frozenColumns],//鎖定的列  
               columns:[continentGroupRow,cityGroupRow,columns] 
            }); 
//創建列
      var keys01=['title','align','colspan'];
      var keys03=['title','align','colspan','rowspan'];
      var key02=['title','align','colspan','field','width','sortable'];
      var key04=['title','align','colspan','rowspan','field','width','sortable'];
      var continentGroupRow=new Array();//合並表頭
      continentGroupRow.push(toColJson(key04,'區劃名稱','left',1,3,'areaName',100,true));
      continentGroupRow.push(toColJson(key04,'時間','left',1,3,'datetime',80,true));

    
      continentGroupRow.push(toColJson(keys03,'合計','center',1,2));
     
      continentGroupRow.push(toColJson(keys01,'流向縣級以外病人','center',6));
      continentGroupRow.push(toColJson(keys01,'流向縣級','center',2));
      continentGroupRow.push(toColJson(keys01,'流向鄉級','center',2));
      continentGroupRow.push(toColJson(keys01,'流向其它','center',2));
     
     
     
      var cityGroupRow=new Array();//合並表頭
     
     // cityGroupRow.push(toColJson(keys01,'合計','center',1));
      cityGroupRow.push(toColJson(keys01,'小計','center',2));
      cityGroupRow.push(toColJson(keys01,'流向省級定點醫療機構病人數','center',2));
      cityGroupRow.push(toColJson(keys01,'流向市級定點醫療機構病人數','center',2));
      cityGroupRow.push(toColJson(keys01,'醫療機構病人數','center',2));
      cityGroupRow.push(toColJson(keys01,'醫療機構病人數 ','center',2));
      cityGroupRow.push(toColJson(keys01,'醫療機構病人數','center',2));
     
      var columns=new Array();//列
 
      columns.push(toColJson(key02,'(單位:人)','right',1,'totalNum',80,true));
      columns.push(toColJson(key02,'人數','right',1,'outCouLvlSumNum',60,true));
      columns.push(toColJson(key02,'比率','right',1,'p0',60,true));
      columns.push(toColJson(key02,'人數','right',1,'proLvlNum',85,true));
      columns.push(toColJson(key02,'比率','right',1,'p1',85,true));
      columns.push(toColJson(key02,'人數','right',1,'cityLvlNum',85,true));
      columns.push(toColJson(key02,'比率','right',1,'p2',85,true));
      columns.push(toColJson(key02,'人數','right',1,'couLvlNum',60,true));
      columns.push(toColJson(key02,'比率','right',1,'p3',60,true));
      columns.push(toColJson(key02,'人數','right',1,'vicusLvlNum',60,true));
      columns.push(toColJson(key02,'比率','right',1,'p4',60,true));
      columns.push(toColJson(key02,'人數','right',1,'elseLvlNum',60,true));
      columns.push(toColJson(key02,'比率','right',1,'p5',60,true));
     
     
      $('#grid').datagrid({
       url:'',//basePath+'/himp/tdata_finance_exp_and_rec_org_sta!ajaxList.action',
    //title: '表信息',
    fit: true,
    nowrap:false,
    rownumbers:true,
    pagination:true,
    pageNumber:1,
    singleSelect:true,//隻允許選一行
    sortOrder: 'desc',
    remoteSort: false,//遠程排序禁止
    striped:true,
    loadMsg:'正在加載請稍後!',
    pageSize:20,
    pageList:[10,20,50,100],
    showFooter:true,
    //frozenColumns:[frozenColumns],//鎖定的列
      columns:[continentGroupRow,cityGroupRow,columns]
   });

以上代碼就是主要的實現;

 

 

摘自 yhc13429826359的專欄

發佈留言