http://blog.csdn.net/zwk626542417/article/details/19248747

概要

在前面两篇文章中,我们已经介绍了在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>

接下来我们就看下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. }

在这里我们需要说下的是,我们需要将我们所有要显示的数据的表头都在这里提前创建好,然后利用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. }

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

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

总结

通过本篇文章我们就可以在前台根据我们的需要,来创建我们需要的表头,以此在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. 【第一篇】说说MVC+EF easyui dataGrid 动态加载分页表格

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

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

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

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

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

  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: ' ...

随机推荐

  1. GridPanel中getSelectionModel

    GridPanel中getSelectionModel 更多 2014/5/1 来源:extjs学习浏览量:6783 学习标签: GridPanel extjs 本文导读:Ext.grid.GridP ...

  2. MVC4项目中验证用户登录一个特性就搞定

    在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性. // 摘要: // 表示一个特性,该特性用于限制调用方对操作方法的访问. [AttributeUsage(Attribu ...

  3. [vim]的关键字补全

    除了complete关键字补全,所有补全相关命令都以CTRL-X开始,然后再接与补全类型相关的命令.CTRL-N与CTRL-P在找的的内容中选择的通用的命令,上下选择用的,CTRL-E则是取消选择.( ...

  4. tabbar的自定义

    [self createCustomTabBar]; -(void)createCustomTabBar{    //创建一个UIImageView,作为底图    UIImageView *bgVi ...

  5. 文本模板转换工具包和 ASP.NET MVC

    http://msdn.microsoft.com/zh-sg/magazine/ee291528.aspx

  6. EF实体框架之CodeFirst七

    前面的6篇博客基本把Code First学习的差不多了,今天这篇学习下code first中的并发控制和事务,基本也快学完了,顶多就差数据迁移. 在数据库中也是有锁和事务的概念,在C#中也是存在,当然 ...

  7. java识别简单的验证码

    1.老规矩,先上图 要破解类似这样的验证码: 拆分后结果: 然后去匹配,得到结果. 2.拆分图片 拿到图片后,首先把图片中我们需要的部分截取出来. 具体的做法是,创建一个的和图片像素相同的一个代表权重 ...

  8. How to set China Azure Storage Connection String

    Configure Visual Studio to access China Azure Storage Open Visual Studio 2012, Server Explorer Add n ...

  9. EntityFramework_MVC4中EF5 新手入门教程之二 ---2.执行基本的 CRUD 功能

    在前面的教程中,您创建 MVC 应用程序中,存储和显示数据使用实体框架和 SQL 服务器 LocalDB.在本教程中,您会审查和自定义的 CRUD (创建. 读取. 更新. 删除) MVC 脚手架会自 ...

  10. 第十二章:window对象

    第十一章介绍了window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一 ...