easyui动态加载表格标题

原 如何用easyui动态加载表格标题

 

MissGu

• 发布时间: 2015/03/28 16:53 
• 阅读: 1383 
• 收藏: 7 
• 点赞: 1 
• 评论: 0

     在最近做的项目中涉及到了需要加载大量表格的功能，采用了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