Jquery_easyUI,多行合并,根据多列合并
来源:互联网 发布:淘宝首页设计欣赏 编辑:程序博客网 时间:2024/06/05 08:39
json:
{
rows:[{priority:低优先级, info:sss,g111,werwer,ss, title:空中充值, msgCount:4, deptTitle:A部门}
{priority:普通优先级, info:CZSBX, title:空中充值, msgCount:1, deptTitle:A部门}
{priority:低优先级, info:abc, title:余额查询, msgCount:1, deptTitle:B部门}
{priority:低优先级, info:sss,g111,g,werwer,ss, title:在线充值, msgCount:5, deptTitle:A部门}
{priority:高优先级, info:CZSBX, title:在线充值, msgCount:1, deptTitle:A部门}
{priority:低优先级, info:abc, title:未到帐查询, msgCount:1, deptTitle:B部门}
{priority:低优先级, info:SQ3GLL,g111,s, title:GPRS流量查询, msgCount:3, deptTitle:A部门}
{priority:低优先级, info:abc, title:GPRS流量查询, msgCount:1, deptTitle:B部门}
{priority:低优先级, info:sss,ss, title:本月消费查询, msgCount:2, deptTitle:A部门}
{priority:低优先级, info:abc, title:本月消费查询, msgCount:1, deptTitle:B部门}
]
total: 10
}
js:
<script type="text/javascript">var basePath='${ctx}';</script>
<script type="text/javascript">
function mergeCellsByField(tableID,colList){
var ColArray = colList.split(",");
var tTable = $('#'+tableID);
var TableRowCnts=tTable.datagrid("getRows").length;
var tmpA;
for (j=0;j<=ColArray.length-1 ;j++ ) //列
//for (j=ColArray.length-1;j>=0 ;j-- )
{
//当循环至某新的列时,变量复位。
PerTxt="";
tmpA=1;
var PerTxt = "";
var CurTxt = "";
//从第一行(表头为第0行)开始循环,循环至行尾(溢出一位)
for (i=0;i<=TableRowCnts ;i++ )//行
{
var tempStr="";
if (i==TableRowCnts)
{
CurTxt="";
}
else
{
for(var tempi=0;tempi<j;tempi++){
tempStr = tempStr+tTable.datagrid("getRows")[i][ColArray[tempi]];
}
}
if (PerTxt==tempStr)
{
alert(PerTxt);
tmpA+=1;
}
else
{
tTable.datagrid('mergeCells',{
index:i-tmpA,
field:ColArray[j-1],
rowspan:tmpA,
colspan:null
});
tmpA=1;
}
PerTxt=tempStr;
}
}
}
$(document).ready(function() {
var mediaMsgs = $("#mediaMsgs").val();
sy.ns('category.view');
$('#category_view').datagrid({
iconCls:'icon-save',
height: 'auto',
url : basePath+"/category/category!getMediaMsgPriorityInfo.action?mediaMsgs=" + mediaMsgs + "&operate=" + $("#operate").val() + "&activityId=" + $("#editActivityId").val(),
loadMsg : '数据装载中......',
columns:[[
{title:'触点消息名称',width:'150',field:'title',align:'left'},
{title:'优先级',width:'100',field:'priority',align:'center'},
{title:'部门',width:'100',field:'deptTitle',align:'center'},
{title:'数量',width:'50',field:'msgCount',align:'center'},
{title:'活动信息',width:'200',field:'info',align:'left',
formatter:function (value,row,index){
var detail = "<div style='width:200px;white-space:normal;'>"+value+"</div>";
return detail;
}
}
]],
pagination : true,
rownumbers : true,
onLoadSuccess:function(){
mergeCellsByField("category_view","title,priority,deptTitle,msgCount,info");
}
});
});
</script>
<table id="category_view"></table>
参考:http://www.cnblogs.com/AlexYuan/articles/jquery-easyUI-datagrid-Merge-Cell.html
http://www.jeasyui.com/tutorial/datagrid/datagrid13.php- Jquery_easyUI,多行合并,根据多列合并
- Jquery_easyUI,多行合并,根据多列合并
- EXCEL合并多列
- GridView多行合并与多列合并
- GridView多行合并与多列合并
- 合并多行的某一列值
- Excel多列插入合并
- ireport合并多列单元格
- 多行合并2列并去掉重复列。
- Easyui-DataGrid纵向合并单元格(根据某列合并)
- 行转列,同一字段合并转列,多值合并
- 行合并到列
- EXtjsgrid合并列行
- SQL数据多行合并成一行多列
- ORACLE-024:列行转换、多行合并
- SQL 转置行为列,合并多行
- oracle和mysql多行的列合并
- 利用jquery实现合并多列重复行
- WebConfig的httpHandlers无效解决处理
- 如何实现控件随对话框大小变化而自动调整大小和位置
- 四边形优化dp
- 数据库原理与设计 --上机指导册
- JPA注解 Java Persistence API
- Jquery_easyUI,多行合并,根据多列合并
- VirtualBox 创建com对象失败,解决方法
- Storm高级原语(五) — State in Trident
- Android开发的学习路线
- <二>UITableViewCell的重用(性能优化)
- 45个android实例源码分享
- 安卓巴士Android开发神贴整理
- 浅谈ThreadPool 线程池
- php-array_splice