如何用easyui动态加载表格标题
博客专区 > MissGu 的博客 > 博客详情
如何用easyui动态加载表格标题
MissGu 发表于3年前
如何用easyui动态加载表格标题
  • 发表于 3年前
  • 阅读 5171
  • 收藏 9
  • 点赞 4
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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


  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 3
博文 5
码字总数 2899
×
MissGu
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: