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

boyanx9个月前技术教程47

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

合并数据网格的单元格,您只需要简单地调用'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

加载在线版的 jquery 文件地址<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.slim.min.js"></s...

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

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

用户界面框架jQuery EasyUI示例大全之Layout

jQuery EasyUI最新试用版免费下载>jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery...

jQuery EasyUI使用教程:在数据网格中添加复选框

本教程为您演示如何放置一个复选框到数据网格中。通过复选框用户将可以选择选中/取消选中网格行数据。想要添加一个复选框列,用户只需要添加一个列的checkbox属性,并将其设置为true。代码如下所示:...

用户界面框架jQuery EasyUI示例大全之Accordion

jQuery EasyUI最新试用版免费下载>jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。jQuery EasyUI提供了基于当下流行的jQuery...

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

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

发表评论    

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