jQuery EasyUI使用教程:合并数据网格的单元格

boyanx4个月前技术教程34

数据网格经常需要合并多个单元格,本教程将教会您在数据网格中如何合并单元格。

合并数据网格的单元格,您只需要简单地调用'mergeCells'方法并传入合并信息参数,告诉数据网格如何合并单元格。在合并的单元格中,除了第一个单元格以外,其他的单元格在合并后会被隐藏。

创建数据网格

Product ID Item ID
Price Attribute Stauts
List Price Unit Cost

合并单元格

当数据加载时,我们在数据网格中合并单元格,因此在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; i++)
$('#tt').datagrid('mergeCells',{
index:merges[i].index,
field:'productid',
rowspan:merges[i].rowspan
});
}
});

购买jQuery EasyUI最新正版授权!详情请"咨询在线客服"
葡萄城经典UI产品新年大促,惊喜折扣礼品送不停!

慧都科技,十三年行业经验,专注提供软件技术整体解决方案,致力打造全球最大的软件技术一站式服务平台。

慧都控件|帮助企业打造成功软件

慧都提供全球优质控件产品/控件培训/项目定制开发/方案咨询/现场实施/项目外包/专业测试

微信ID:EVGET_Huidu

企业QQ:800018081|电话:023-66090381

扫码关注微信

标签: 在线jquery

相关文章

jQuery EasyUI使用教程:创建一个课程表

jQuery EasyUI最新版下载>本教程将为你展示如何使用jQuery EasyUI创建一个学校的课程表。我们将创建两个表:学校的科目在左边,时间表在右边,你可以拖动学校科目并将其放在时间表...

jQuery EasyUI使用教程:在数据网格中自定义排序

jQuery EasyUI最新试用版免费下载>如果默认排序行为不能满足您的需求,您可以自定义数据网格的排序行为。基本上用户可以在列上定义一个函数名为sorter的排序函数。这个函数将要接受两个值...

php手把手教你做网站(三十八)jquery 转轮盘抽奖,开盲盒

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。图1 转轮盘抽奖图2 转轮盘抽奖结果1、转轮盘本来是想直接绘图实现轮盘,但是没有找到怎么填充文字,只好把轮盘弄成了背景图,通常用于游戏抽道具,...

用户界面框架jQuery EasyUI发布v1.4.5

jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的...

jQuery EasyUI使用教程:设置数据网格的冻结列

jQuery EasyUI最新试用版免费下载>本教程演示了如何冻结一些列,当用户在网格上水平移动滚动条时,冻结列不能滚动到视图的外部。想要定义冻结列,首先您应该定义frozenColumns属性...

jQuery EasyUI使用教程:格式化数据网格列

jQuery EasyUI最新试用版免费下载>下面的示例格式化easyui数据网格中的列,并使用自定义列的格式程序,如果价格小于20那么文本就将变为红色。想要格式化一个数据网格列,我们需要设置f...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。