文档章节

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

MissGu
 MissGu
发布于 2015/03/28 16:53
字数 662
阅读 6673
收藏 10

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


© 著作权归作者所有

共有 人打赏支持
MissGu
粉丝 3
博文 5
码字总数 2899
作品 0
北碚
私信 提问
jQuery EasyUI使用教程之创建标签页

<jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每...

Miss_Hello_World
2015/11/18
0
0
easyui是否可以生成动态列?如何可以,该怎么实现?

easyui是否可以支持动态列设置?比如:按照需求表格的列不是固定的,可能是三列,也有可能是4列,用户可以自由设置列,如果只选择的三列,那么页面上的数据表格就只显示3列,如果用户设置了4...

曾鹏
2012/09/11
2.8K
4
easyui datagrid 加载完数据前 标题和内容不对齐问题

如图等加载完之后标题和内容列才对齐 生成的表格是用easyui的datagrid做的

开源中国技术顾问
2014/12/08
3.7K
1
关于EasyUI使用tree方法生成树形结构加载两次的问题

html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解...

Doublec
2015/04/21
0
0
怎样设置easyui表格列的id,并 利用jquery隐藏已经加载完的easyui表格第一列

var globalcolumns = [ {field:'ck',checkbox:true}, { id : 'islimit', field : 'islimit', title : '是否超期', align : "center", width : 60, sortable : false { field : 'filenumber',......

OkSerIous
2013/01/20
6.8K
3

没有更多内容

加载失败,请刷新页面

加载更多

《阿里铁军》的读书笔记和读后感范文2600字

《阿里铁军》的读书笔记和读后感范文2600字: 在中国互联网,有一个流传很广的说法是,百度强在技术,腾讯强在产品,阿里强在运营。虽然发展到今天,已经不能再用这样简单的视角来看待这三个...

原创小博客
28分钟前
2
0
怎样实际项目中运用责任链模式

1 模式概要 1.1 简介 责任链模式为请求创建一个接收者对象链,每个接收者都包含对另一个接收者的引用,如果一个对象不能处理该请求,那么它会把请求传给下一个接收者,依此类推 责任链模式避...

小刀爱编程
43分钟前
2
0
【宇润日常疯测-004】JS 遍历数组如何快!快!快!

首先,我就是一后端全栈,对前端也只是会用罢了。闲的无聊来测测,不深究,只看表面,不喜勿喷! 遍历数组在写 JS 代码时候一定是经常用的,那么怎么遍历能达到最高效率呢,很多人一定没有测...

宇润
47分钟前
11
2
Linux系统如何定制History输出格式

Linux系统使用History命令来查看系统的运行记录,从而找出一些问题。但是History输出的数据中常常没有时间等信息。本文就来教大家Linux系统如何定制History输出格式。   具体方法如下 以r...

linuxprobe16
49分钟前
2
0
(一) pyhon 基础语法(数值 字符串 元组 列表 字典)

1、python的数据类型: 数值 字符串 列表 元组 字典; 数值类型包括; 整型(int) 长整型(long) 浮点型(float) 复数型 字符串; 可以通过type() 来查看是什么类型的; 注释:len()只支持 字符...

芬野de博客
50分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部