在最近做的项目中涉及到了需要加载大量表格的功能,采用了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":"公司法人"
}
]
}