项目总结—jQuery EasyUI-DataGrid动态加载表头

 
 
 

概要

在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid中有参数和无参数的情况下将数据库中数据显示到前台,但是对于前面两篇文章显示的数据表头是固定的,如果我们显示到前台的数据来自数据库不同的表,那么表头也需要动态的加载,这篇文章我们就来看下在EasyUI-DataGrid中动态加载表头和数据.

实现

我们要实现的功能是根据我们的需要,让DataGrid显示不同的数据,表头也同样在变,我们可以先看下我们要实现功能的页面.

如图所示我们点击左侧不同的节点,右侧将会显示不同DataGrid的数据.

现在我们来看下前台html页的代码,因为表头是变的,所以我们的前台代码跟前面两篇博客就有点不一样了.

  1. <divdata-optionsdivdata-options="region:'center',title:'考核对象数据录入情况',iconCls:'icon-ok'">
  2. <divclassdivclass="demo-info"data-options="fit:true,border:false,plain:true">
  3. <table id="dg"title="考核对象数据计算得分" class="easyui-datagrid"style="width: 900px; height: 400px; padding-left: 200px;"data-options="rownumbers:true,pageSize:5,pageList:[5,10,15,20],method:'get',"
  4. pagination="true" rownumbers="true"fitcolumns="false" striped="true"singleselect="true">
  5. <thead>
  6. </thead>
  7. </table>
  8. </div>
  9. </div>
<divdata-options="region:'center',title:'考核对象数据录入情况',iconCls:'icon-ok'">
<divclass="demo-info"data-options="fit:true,border:false,plain:true"> <table id="dg"title="考核对象数据计算得分" class="easyui-datagrid"style="width: 900px; height: 400px; padding-left: 200px;"data-options="rownumbers:true,pageSize:5,pageList:[5,10,15,20],method:'get',"
pagination="true" rownumbers="true"fitcolumns="false" striped="true"singleselect="true">
<thead>
</thead> </table>
</div> </div>

接下来我们就看下js代码生成表头的代码,如图所示的县市区定量的表头.

  1. //县市区定量指标计算情况查询
  2. function reloadgridCityQuanty() {
  3. var test =document.getElementById("NodeChild").innerHTML;
  4. //于一般处理程序进行交互,同时生成县市区定量表头
  5. $('#dg').datagrid({
  6. url:"CalculateScoreFrameCity.ashx?test=" + test,
  7. columns: [[
  8. { field: 'TargerName',title: '指标名称', width: 300 },
  9. { field: 'ConditionInput',title: '数据录入情况', width: 300 },
  10. { field: 'Operate', title:'操作', width: 300 }
  11. ]]
  12. })
  13. }
 //县市区定量指标计算情况查询
function reloadgridCityQuanty() {
var test =document.getElementById("NodeChild").innerHTML; //于一般处理程序进行交互,同时生成县市区定量表头
$('#dg').datagrid({
url:"CalculateScoreFrameCity.ashx?test=" + test,
columns: [[
{ field: 'TargerName',title: '指标名称', width: 300 },
{ field: 'ConditionInput',title: '数据录入情况', width: 300 },
{ field: 'Operate', title:'操作', width: 300 }
]] })
}

在这里我们需要说下的是,我们需要将我们所有要显示的数据的表头都在这里提前创建好,然后利用js语句进行动态加载.

我们再来看个表头的js代码,和上面的本质上是一样的.

  1. //县市区定性计算情况查询
  2. functionreloadgridCharacterizationCity() {
  3. var test =document.getElementById("NodeChild").innerHTML;
  4. //于一般处理程序进行交互,同时生成县市区定性表头
  5. $('#dg').datagrid({
  6. url:"CalculateScoreFrameCity.ashx?test=" + test,
  7. columns: [[
  8. { field: 'Name', title:'指标名称', width: 225 },
  9. { field: 'ConditionInput',title: '数据录入情况', width: 225 },
  10. { field: 'CalculateInput',title: '计算情况', width: 225 },
  11. { field: 'Operate', title:'操作', width: 225 }
  12. ]]
  13. })
  14. }
           //县市区定性计算情况查询
functionreloadgridCharacterizationCity() {
var test =document.getElementById("NodeChild").innerHTML; //于一般处理程序进行交互,同时生成县市区定性表头
$('#dg').datagrid({
url:"CalculateScoreFrameCity.ashx?test=" + test,
columns: [[
{ field: 'Name', title:'指标名称', width: 225 },
{ field: 'ConditionInput',title: '数据录入情况', width: 225 },
{ field: 'CalculateInput',title: '计算情况', width: 225 },
{ field: 'Operate', title:'操作', width: 225 }
]] }) }

关于一般处理程序的书写与前面两篇文章是一样的,大家可以参考前面一篇的文章.

我们也来看下我们创建的另一个表头的效果

总结

通过本篇文章我们就可以在前台根据我们的需要,来创建我们需要的表头,以此在DataGrid中显示不同的数据.有心的同学可能注意到我们这篇文章显示的数据与前面两篇文章显示的数据不一样,前面文章DataGrid表格中显示的数据是全部来自数据库表,而我们这篇文章中显示的数据不是直接来自数据库的,是我们手动拼接成的,至于具体的实现我们在下一篇文章中进行介绍.

jQuery EasyUI-DataGrid动态加载表头的更多相关文章

  1. jquery easyui datagrid 动态 加载列

    实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...

  2. EasyUI datagrid 动态加载表头和数据

    首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...

  3. EasyUI datagrid动态加载json数据

    最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...

  4. jquery easyui datagrid 远程加载数据----javascript法

    jquery easyui有三种办法生成datagrid(数据网格),本篇专门讨论javascript借助jquey easy ui实现的方式 html部分 <main role="m ...

  5. easyui datagrid 动态加载数据 渲染问题,表格错位问题

    $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...

  6. jquery easyui datagrid 远程加载数据----把主键渲染为值遇到的问题及解决方案

    起因:数据库中一些字段存的是代表具体值的数字,需要渲染为具体值 monggodb中的字典 mysql中存放的值为:expertin代表教练擅长的搏击技能 jquery easyui中的相关代码如下:用 ...

  7. 【第一篇】说说MVC+EF easyui dataGrid 动态加载分页表格

    首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载 ...

  8. 转 -- MVC+EF easyui dataGrid 动态加载分页表格

    首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载 ...

  9. jquery easyui tree动态加载子节点

    1.前端tree绑定时,使用onBeforeExpand事件:当节点展开时触发加载子节点,自动会向服务端发送请求:url为绑定url,参数为当前节点id this.tree = { method: ' ...

  10. 项目总结—jQuery EasyUI-DataGrid动态加载表头

    http://blog.csdn.net/zwk626542417/article/details/19248747 概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGri ...

随机推荐

  1. UIScrollView原理

    我是Mike Ash的Let’s Build…系列文章的忠实粉丝,在这一系列文章中他从头设计Cocoa的控件来解释他们的工作原理.在这里我要做一点类似的事情,用几行代码来实现我自己的滚动试图.不过首先 ...

  2. Perl file checking --- How to get information about a file

    There are some short expressions in Perl that allow you to test files, which is handy if you want to ...

  3. node.js如何让前端请求时能跨域

    1995年,Netscape提出了一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同. 当一个浏览器的两个tab页中分别打开来 百度和谷 ...

  4. Windows Server2008 R2中的角色

    AD Certificate Services 官方说明: Active Directory 证书服务 (AD CS) 提供可自定义的服务,用于颁发和管理使用公钥技术的软件安全系统中的证书.可以使用 ...

  5. angularJS $routeProvider

    O'Reilly书上的伪代码 var someModule = angular.module('someModule',[...module dependencies]); someModule.co ...

  6. Spring Boot 集成 MyBatis和 SQL Server实践

    概 述 Spring Boot工程集成 MyBatis来实现 MySQL访问的示例我们见过很多,而最近用到了微软的 SQL Server数据库,于是本文则给出一个完整的 Spring Boot + M ...

  7. [HAOI2006]旅行 题解(kruskal)

    [HAOI2006]旅行 Description Z小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z小镇附近共有N个景点(编号为1,2,3,-,N),这些景点被M条道路连接着,所有道路都 ...

  8. 49、多线程创建的三种方式之继承Thread类

    继承Thread类创建线程 在java里面,开发者可以创建线程,这样在程序执行过程中,如果CPU空闲了,就会执行线程中的内容. 使用Thread创建线程的步骤: 1.自定义一个类,继承java.lan ...

  9. Oracle数据库中几种常见的SCN

    控制文件中的SCN 数据文件头的SCN 数据块中的SCN 日志文件头中的SCN 事务SCN 内存中的SCN 一 控制文件中的SCN 1.1 数据库SCN 数据库SCN表示最近一次全量checkpoin ...

  10. 【四校联考】【比赛题解】FJ NOIP 四校联考 2017 Round 7

    此次比赛为厦门一中出题.都是聚劳,不敢恭维. 莫名爆了个0,究其原因,竟然是快读炸了……很狗,很难受. 话不多说,来看看题: [T1] 题意: 样例: PS:1<=h[i]<=100000 ...