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
Detect language » Hungarian
0 0
原创粉丝点击