文档章节

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

MissGu
 MissGu
发布于 2015/03/28 16:53
字数 662
阅读 5957
收藏 9
点赞 4
评论 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":"公司法人"
    }
  ]
}


© 著作权归作者所有

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

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

Miss_Hello_World
2015/11/18
0
0
关于EasyUI使用tree方法生成树形结构加载两次的问题

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

Doublec
2015/04/21
0
0
jQuery EasyUI使用教程之创建可折叠面板

<jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识。折叠面板包含了一系列的面板,其中所有的面板标题都是可见的,但只有一个面板的主体内容在某个时间是可见的。...

Miss_Hello_World
2015/11/13
0
0
jquery easyui tab加载内容的几种方法

两者特点: href方式加载数据的特点: 被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。 加载远程url时有遮罩效果,也就是“等待中……”效果,用户体...

文文1
2015/03/26
0
0
AngularJS和EasyUI结合使用的注意点

最近在着手用angular重构一个项目,原来的前台是纯easyui做的,最近花了一周学了angular,决定把它们结合下,用纯html 和 暴露后台rest api搞起。结果在ng-view多页切换的时候遇到了一个问题...

Big_BoBo
2013/12/26
0
8
EasyUI datagrid在ie下reload失败的问题

EasyUI datagrid在ie下reload失败的问题 --- 问题 最近使用EasyUI开发后台系统,测试时发现个奇葩的问题, 重新加载表格数据时,ie下一点反应都没有。后来发现其实并不是没有反应,而是浏览器...

Tek_Eternal
2015/03/07
0
0
EasyUI基础入门之Parser(解析器)

前言 JQuery EasyUI提供的组件包括功能强大的DataGrid,TreeGrid、面板、下拉组合等。用户可以组合使用这些组件,也可以单独使用其中一个。(使用的形式是以插件的方式提供的) EasyUI体系结构 ...

LCore
2014/07/11
0
9
jQuery EasyUI 的EasyLoader功能介绍

jQuery EasyUI是一款基于JQuery的UI快速搭建组件。 今天介绍下EasyLoader的功能。EasyLoader是可以动态加载脚本和CSS文件,也可以动态加载EasyUI已有组件。使用EasyLoader的时候需要引用Eas...

Amamatthew
2014/09/20
0
0
解决JQuery EasyUI 加载两次url的问题

解决JQuery EasyUI 加载两次url的问题 1、传统方式 1 $(function () { 2 var url = "../Source/Query/jhDataQry.ashx?action=query"; 3 $(dg).datagrid({ 4 url: url, 5 queryParams: { 6 q......

地瓜2013
2014/07/09
0
1
easyui dialog自定义可拖曳

看到标题的朋友一定会觉得本人很奇怪,easyui的dialog不是自带可拖曳的属性吗。是的,dialog继承了Window的一个属性draggable,设为true之后,窗口便可以拖曳。事实是,一,easyui的draggab...

MissGu
2015/04/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储

存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储 存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储。 顺序结构和链接结构适用在内存结构中。 顺序表每个单元都是按物理...

DannyCoder
13分钟前
0
0
Firefox 61已经为Ubuntu 提供支持

最新和最好的Mozilla Firefox 61 “Quantum”网络浏览器已经为Ubuntu Linux操作系统的用户提供了支持,现在可以通过官方软件库进行更新。 Mozilla于2018年6月26日发布了Firefox 61版本,该版...

六库科技
40分钟前
0
0
Win10升级后执行系统封装(Sysprep)报错

开始封装 一年多以前开始给公司封装Win10系统,便于统一给公司电脑初始化携带各种软件的系统,致力于装完既可以开发的状态。那时候最新的版本是Win10 1703版本,自然就以他为母盘,然后结合V...

lyunweb
今天
38
0
php 性能优化

#什么情况下会遇到性能问题 PHP 语法使用的不恰当

to_be_better
今天
0
0
Jenkins 构建触发器操作详解

前言 跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。 一、定时构建语法 * * * * * (五颗星,中间用空格隔...

覃光林
今天
0
0
IDEA配置技巧

超详细设置Idea类注释模板和方法注释模板 idea去掉注解param下划线 JetBrains全系列破解

AK灬
今天
0
0
rsync通过服务同步/Linux系统日志/screen工具

rsync通过服务同步 分为服务端(机器A) 和客户端(机器B) 机器A操作编辑/etc/rsyncd.conf配置文件 [root@yolks1 ~]# vim /etc/rsyncd.conf 文件中添加以下配置 port=873 ...

Hi_Yolks
今天
0
0
分发系统介绍expect脚本远程登录expect脚本远程执行命令 expect脚本传递参数

分发系统介绍 分发系统-expect讲解(也就是一个分发的脚本) 场景: 业务越来越大,网站app,后端,编程语言是php,所以就需要配置lamp或者lnmp,最好还需要吧代码上传到服务器上;但是因为业...

lyy549745
今天
0
0
android studio 中设置创建类时的说明信息(包含 作者 ,创建时间,注释说明等)

今天简单来说一下android studio开发工具中的 一个小设置功能; 在开发过程中我们习惯给新建的类添加一些注释信息,创建日期、时间和作者等。 设置信息 File—>Settings—>Editor—>File and...

切切歆语
今天
0
0
开源监控利器Prometheus初探

前言: Kubernetes作为当下最炙手可热的容器管理平台,在给应用部署运维带来便捷的同时,也给应用及性能监控带来了新的挑战。本文给大家分享一款十分火热的开源监控工具Prometheus,让我们一...

寰宇01
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部