浏览 13630 次
锁定老帖子 主题:在datagrid的表格体中合并单元格
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-07-08
最后修改:2010-07-08
jquery-easyui的datagrid具有创建复杂表头和合并表格体单元格的能力,下面介绍如何合并单元格。合并后的效果图如下:
合并单元格主要通过调用mergeCells方法实现,先看创建未合并单元格时的表格代码: $('#tt').datagrid({ title:'Merge Cells', iconCls:'icon-ok', width:600, height:300, singleSelect:true, rownumbers:true, idField:'itemid', url:'datagrid_data.json', pagination:true, frozenColumns:[[ {field:'productid',title:'Product',width:100, formatter:function(value){ for(var i=0; i<products.length; i++){ if (products[i].productid == value) return products[i].name; } return value; } }, {field:'itemid',title:'Item ID',width:80} ]], columns:[[ {title:'Price',colspan:2}, {field:'attr1',title:'Attribute',width:150,rowspan:2}, {field:'status',title:'Status',width:60,align:'center',rowspan:2} ],[ {field:'listprice',title:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',width:80,align:'right'} ]] }); 合并单元格时调用以下代码: 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 });
原文及下载地址:http://jquery-easyui.wikidot.com/tutorial:datagrid13 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-07-09
不错,项目中正需要可以合并的功能。EXTJS的表格不错,可惜没找到能合并单元格的解决方案。
|
|
返回顶楼 | |
发表时间:2010-07-09
这个功能很强大
但是一般如果要用到动态合并我宁愿跳转到另一个页面 |
|
返回顶楼 | |
发表时间:2010-07-10
extdev 写道 不错,项目中正需要可以合并的功能。EXTJS的表格不错,可惜没找到能合并单元格的解决方案。
那你真的好好找找了 |
|
返回顶楼 | |
发表时间:2010-07-10
|
|
返回顶楼 | |
发表时间:2010-07-10
这是表格头合并,非表格体合并.
|
|
返回顶楼 | |
发表时间:2010-07-12
我发现 easyui 这东东bug 挺多。远没有 jquery ui 成熟。
打算放弃了。。 有空试试 jquery tools. |
|
返回顶楼 | |
发表时间:2010-07-14
其实要是这么做。完全可以考虑用其他的产品代替。譬如:ExtJs。岂不是更美?
|
|
返回顶楼 | |
发表时间:2010-07-14
dhtmlxGrid不错。
|
|
返回顶楼 | |