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

boyanx3个月前技术教程10

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

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

相关文章

用户界面干货盘点

本周,我们持续更新了Qt、jQuery EasyUI和C1 DataGrid for WPF的基础使用教程,DevExpress跨平台移动Web开发框架DevExtreme在线演示,Component...

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

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

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

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

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

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

jQuery EasyUI使用教程:自定义数据网格分页

jQuery EasyUI最新试用版免费下载>数据网格内置一个很好特性的分页功能,自定义也相当简单。在本教程中,我们将创建一个数据网格,并在分页工具栏上添加一些自定义按钮。创建数据网格Item...

如何加载jquery

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

发表评论    

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