在最近做的項目中涉及到了需要加載大量表格的功能，採用了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":"公司法人"
}
]
}轉載網址：http://my.oschina.net/missGu/blog/393069?p=1