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. SparkSQL与Hive on Spark的比较

    简要介绍了SparkSQL与Hive on Spark的区别与联系 一.关于Spark 简介 在Hadoop的整个生态系统中,Spark和MapReduce在同一个层级,即主要解决分布式计算框架的问题 ...

  2. 关于springMVC的日志管理

    主要是基于在spring aop特性. 1. 创建一个系统日志的操作类,类里面提供一个方法,可以向数据库或者表中写入:访问用户名,访问IP,操作时间,访问包名,具体函数名. /** * @Name S ...

  3. vs添加github代码库

    1.安装git for windows 2.在vs中工具->扩展和更新,安装github extension 3.在项目中右键,添加源码到git,之后配置git,然后选择同步或者commit即可

  4. vue -about

    j基于webpack4 搭建vue 环境:https://juejin.im/post/5bc30d5fe51d450ea1328877

  5. [js]作用域链查找规则获取值和设置值

    作用域链查找规则获取值和设置值 <script> /** 1.作用域链查找规则 私有作用域出现的一个变量不是私有的,则往上一级作用域查找,上级作用域没有则继续向上级查找,一直找到windo ...

  6. 使用jfreechart生成柱状图、折线图、和饼状图

    JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...

  7. HDU 2586 How far away(dfs+邻接表)

    How far away [题目链接]How far away [题目类型]dfs+邻接表 &题意: 题目大意:一个村子里有n个房子,这n个房子用n-1条路连接起来,接下了有m次询问,每次询问 ...

  8. git----------如何创建develop分支和工作流,以及如何将develop上的代码合并到master分支上

    1.点击sourceTree 右上角的git工作流,或弹出一个弹出框,无需修改任何东西直接点击确认就可以创建develop. . 2.这里有两个分支了,当前高亮的就是你当前处在的分支.此时develo ...

  9. js对象属性名驼峰式转下划线

    一.题目示例: 思路: 1.匹配属性名字符串中的大写字母和数字 2.通过匹配后的lastIndex属性获取匹配到的大写字母和数字的位置 3.判断大写字母的位置是否为首位置以及lastIndex是否为0 ...

  10. bootstrap-wysiwyg这个坑

    但是用wysiwyg也是费了我不少的精力,特别是在图片上传上,下面做一些总结. 1.引入文件 wysiwyg号称只有5kb,但是实际上是将其他的依赖文件在cdn上用外链链接进来了,有以下几个文件: c ...