如何用easyui動態加載表格標題

     在最近作的項目中涉及到了須要加載大量表格的功能，採用了easyui的datagrid，可是發現datdagrid表格標題須要手動寫，這在表格多的狀況是一件很麻煩的事情。通過了long long time 終於研究出來了動態加載表格標題的方法。

 首先給下效果圖。

剛開始本人用easyui最原始的方式將表格放入我須要它放置的位置。總體頁面由於某些緣由呢就不展現給你們看了。

首先你們能夠去網上下載easyui的包以及easyui的中文文檔。easyui包友情連接：http://www.jeasyui.com/download/list.php

中文文檔呢。直接百度下載離線就能夠了。

將包放在項目文件之下以後。

如下是html中的代碼：

 <table id="dg"  style="width:100%;height:95%;" data-options="
rownumbers:false,    
singleSelect:true,
autoRowHeight:false,
pagination:true,
resizeHandle:'right'">
              <thead>
               <tr>
               </tr>
               </thead>
</table>

如下是js代碼,是easyui的一種內置寫法.

$('#dg').datagrid({   
    url:'datagrid_data.json', 
  
    columns:[[   
        {field:'id',title:'公司自編碼',width:100},   
        {field:'name',title:'公司名稱',width:100},   
        {field:'coding',title:'編碼',width:100},   
    ]]   
});

而後而這種寫法並無將標題動態加載，只實現了數據的動態加載。若是表格數量的小夥伴能夠直接採用這種方式就能夠了。

要求動態加載的小夥伴們能夠往下看。

js代碼的修改：

$(function(){
    //動態加載標題和數據
    $.ajax({
        url:"datagrid_data.json",
        type:"post",
        dataType:"json",
        success:function(data){
            $("#dg").datagrid({
                columns:[data.title]    //動態取標題
            });
            $("#dg").datagrid("loadData",data.rows);  //動態取數據
        }
    });

在這裏，我採用了ajax請求數據，在回調函數中調用了easyui中內置的動態請求函數。先取標題，而後再進行數據的加載。

這種狀況下，對json數據的要求便要明確了：

{"total":8,"rows":[
  {"id":"101","name":"正義無限公司","coding":"01","abbreviation":"正義","industryRegistrationId":"1123456","corporation":"張三"},
  {"id":"101","name":"正義無限公司","coding":"01","abbreviation":"正義","industryRegistrationId":"1123456","corporation":"張三"},
  {"id":"101","name":"正義無限公司","coding":"01","abbreviation":"正義","industryRegistrationId":"1123456","corporation":"張三"},
  {"id":"101","name":"正義無限公司","coding":"01","abbreviation":"正義","industryRegistrationId":"1123456","corporation":"張三"},
  {"id":"101","name":"正義無限公司","coding":"01","abbreviation":"正義","industryRegistrationId":"1123456","corporation":"張三"},
  {"id":"101","name":"正義無限公司","coding":"01","abbreviation":"正義","industryRegistrationId":"1123456","corporation":"張三"},
  {"id":"101","name":"正義無限公司","coding":"01","abbreviation":"正義","industryRegistrationId":"1123456","corporation":"張三"},
  {"id":"101","name":"正義無限公司","coding":"01","abbreviation":"正義","industryRegistrationId":"1123456","corporation":"張三"}
],
  "title":[
    {
      "field":"id",
      "title":"公司自編碼"
    },
    {
      "field":"name",
      "title":"公司名稱"
    },
    {
      "field":"coding",
      "title":"編碼"
    },
    {
      "field":"abbreviation",
      "title":"公司簡稱"
    },
    {
      "field":"industryRegistrationId",
      "title":"工商註冊號"
    },
    {
      "field":"corporation",
      "title":"公司法人"
    }
  ]
}