首页 > Web开发 > 详细

雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格

时间:2019-04-19 15:55:59      阅读:122      评论:0      收藏:0      [点我收藏+]

  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 IDItem ID
PriceAttributeStauts
List PriceUnit 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 数据网格 - 合并单元格

原文:https://www.cnblogs.com/pengpeng1208/p/10736057.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!