jQuery EasyUI 数据网格 - 合并单元格

  数据网格(datagrid)经常需要合并一些单元格。本教程将向您展示如何在数据网格(datagrid)中合并单元格。

  为了合并数据网格(datagrid)单元格,只需简单地调用 'mergeCells' 方法,并传入合并信息参数,告诉数据网格(datagrid)如何合并单元格。在所有合并的单元格中,除了第一个单元格,其它单元格在合并后被隐藏。

  创建数据网格(DataGrid)

  

  url="data/datagrid_data.json"

  singleSelect="true" iconCls="icon-save" rownumbers="true"

  idField="itemid" pagination="true">

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

Product ID Item ID
Price Attribute Stauts
List Price Unit Cost

  合并单元格

  当数据加载之后,我们合并数据网格(datagrid)中的一些单元格,所以放置下面的代码在 onLoadSuccess 回调函数中。

  $('#tt').datagrid({

  onLoadSuccess:function(){

  var merges = [{

  index:2,

  rowspan:2

  },{

  index:5,

  rowspan:2

  },{

  index:7,

  rowspan:2

  }];

  for(var i=0; i<merges.length; p="" i++)<="">

  $('#tt').datagrid('mergeCells',{

  index:merges[i].index,

  field:'productid',

  rowspan:merges[i].rowspan

  });

  }

  });

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid13.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格的更多相关文章

  1. JQuery EasyUI DataGrid动态合并单元格

    /**        * EasyUI DataGrid根据字段动态合并单元格        * @param fldList 要合并table的id        * @param fldList ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格

    jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序

    jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...

随机推荐

  1. 范进中Nature——儒林外史新义

    范进中Nature——儒林外史新义 范进发了文章回办公室,实验室一块儿搬砖的挂名作者俱各欢喜.正待烧锅煮方便面,只见他老板胡副教授,手里拿着一包外卖和一瓶红星二锅头,走了进来.范进向他作揖,坐下.胡副 ...

  2. Java ee第五周作业

    Applet: Applet是采用Java编程语言编写的小应用程序,该程序可以包含在 HTML(标准通用标记语言的一个应用)页中,与在页中包含图像的方式大致相同. 含有Applet的网页的HTML文件 ...

  3. Java加载dll或so库文件的路径 java.library.path

      1. Java的System.load 和 System.loadLibrary都可以用来加载库文件   2.例如你可以这样载入一个windows平台下JNI库文件: System.load(&q ...

  4. 小型网站使用高德地图开发定位模块需要的php代码

    项目要求: 1.使用定位,获取gps信息 2.获取当前所在城市 3.从该城市中取数据,按照距离我的当前位置远近排序 方案 1.使用js获取当前位置信息,然后使用cookie或者session存储 fu ...

  5. 《Java程序设计》 第四周学习总结

    学号 20175313 <Java程序设计>第四周学习总结 教材学习内容总结 第五章主要内容 了解子类的继承性 子类和父类在同一包中的继承性(除private外其余都继承) 子类和父类不在 ...

  6. 【JVM】-NO.115.JVM.1 -【JDK11 HashMap详解-4-伸展树、B树】

    .Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  7. WGDC2019第八届全球地理信息开发者大会(北京)

    WGDC2019第八届全球地理信息开发者大会 会议召开时间:2019-07-09 08:00至 2019-07-10 18:00结束 会议召开地点:北京  北京国际会议中心  朝阳区北辰东路8号 会议 ...

  8. css3动态计算元素的高度及宽度

    1.px     像素,我们在网页布局中一般都是用px. 2.百分比     百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了 3.Viewport 当已知一个div的高度 ...

  9. WebForm复合控件RadioButtonList、CheckBoxList、DropDownList

    1.RadioButtonList     单选集合 -属性:RepeatDirection:Vertical (垂直排布)/Horizontal (横向排布) RepeatLayout:Table ...

  10. SQL SEVER 的基本请求指令

    SQL分类:DDL--数据定义语言(create,alter,drop,declare) DML--数据操纵语言(select,delete,update,insert) DCL--数据控制语言(gr ...