EasyUi Datagrid合并单元格+添加合计 +JAVA

1：先看效果图，我这截取一部分

 

2：话不多直接贴 前端代码

(1)  JS 

一.引用JS

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

$(function(){
    init();
});
function init() {
    var satrtTime=$("#satrtTime").val();
    var endTime=$("#endTime").val();
    $('#tt').datagrid({
        url:"fundsReportController.do?datagrid&satrtTime="+satrtTime+"&endTime="+endTime,
        nowrap:false,
        onLoadSuccess:function(data) {
            if (data.rows.length > 0) {
                //计算合计
                compute();
                //调用mergeCellsByField()合并单元格
                mergeCellsByField("tt", "projectName");
                //首列冻结
                $(this).datagrid('freezeRow',0);
            }
        }
    });
};

不要想太多，代码直接复制

function mergeCellsByField(tableID, colList) {
    var ColArray = colList.split(",");
    var tTable = $("#" + tableID);
    var TableRowCnts = tTable.datagrid("getRows").length;
    var tmpA;
    var tmpB;
    var PerTxt = "";
    var CurTxt = "";
    var alertStr = "";
    for (j = ColArray.length - 1; j >= 0; j--) {
        PerTxt = "";
        tmpA = 1;
        tmpB = 0;
        for (i = 0; i <= TableRowCnts; i++) {
            if (i == TableRowCnts) {
                CurTxt = "";
            }
            else {
                CurTxt = tTable.datagrid("getRows")[i][ColArray[j]];
            }
            if (PerTxt == CurTxt) {
                tmpA += 1;
            }
            else {
                tmpB += tmpA;

                tTable.datagrid("mergeCells", {
                    index: i - tmpA,
                    field: ColArray[j],　　//合并字段
                    rowspan: tmpA,
                    colspan: null
                });
                tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并
                    index: i - tmpA,
                    field: "Ideparture",
                    rowspan: tmpA,
                    colspan: null
                });
                tmpA = 1;
            }
            PerTxt = CurTxt;
        }
    }
}
//计算函数 总计 ,这个根据自己的字段
function compute() {
    var rows = $('#tt').datagrid('getRows')//获取当前的数据行
    var totalInvestment = 0 ;
    var trCount = 0;
    var zfCount=0;
    var wcCount=0;
    for (var i = 0; i < rows.length; i++) {
        totalInvestment += parseInt(rows[i]['totalInvestment']);
        trCount += parseInt(rows[i]['trCount']);
        zfCount += parseInt(rows[i]['zfCount']);
        wcCount += parseInt(rows[i]['wcCount']);
    }
    //新增一行显示统计信息
    $('#tt').datagrid('insertRow',{
        index: 0,   // 索引从0开始
        row: {
            projectName: '<b>总计：</b>',
            totalInvestment: totalInvestment,
            trCount:trCount,
            zfCount:zfCount,
            wcCount:wcCount
        }
    });
    //末尾添加总计 我这里是首列添加 所以没有,如果你是末尾添加请复制
 //   $('#tt').datagrid('insertRow', { projectName: '<b>总计：</b>', totalInvestment: totalInvestment,trCount:   //trCount,zfCount:zfCount,wcCount:wcCount });
}

(2) HTML页面

---

<table id="tt" title="资金构成"  style="width:100%;height:400px;"   singleSelect="true" rownumbers="true" idField="projectId">
    <thead>
        <tr>
            <th rowspan="2" field="projectName" width="180">项目名称</th>
            <th rowspan="2" field="scale" width="250" >建设规模</th>
            <th rowspan="2" field="totalInvestment" width="100">总投资（万元）</th>
            <th rowspan="2" field="trCount" width="100">${year}年计划完成投资(万元)</th>
            <th colspan="8">资金构成</th>
            <th rowspan="2" field="zfCount" width="100">${year}年已完成投资(万元)</th>
            <th colspan="8">资金构成</th>
            <th rowspan="2" field="wcCount" width="100">已支付资金(万元)</th>
            <th colspan="8">资金构成</th>
        </tr>
        <tr>
            <!--第一部分合并-->
            <th field="trZyystz" width="100" align="right">中央预算内</th>
            <th field="trZzqysntz" width="100" align="right">自治区预算内</th>
            <th field="trMjptzj" width="80" align="right">盟市配套</th>
            <th field="trZxjsjj" width="100" align="right">专项建设基金</th>
            <th field="trDfzfpt" width="100" align="right">地方财政资金</th>
            <th field="trQyzyzj" width="100" align="right">企业自有资金</th>
            <th field="trYhdk" width="80" align="right">银行贷款</th>
            <th field="trQtzj" width="80" align="right">其他资金</th>
            <!--第二部分合并-->
            <th field="wcZyystz" width="100" align="right">中央预算内</th>
            <th field="wcZzqysntz" width="100" align="right">自治区预算内</th>
            <th field="wcMjptzj" width="80" align="right">盟市配套</th>
            <th field="wcZxjsjj" width="100" align="right">专项建设基金</th>
            <th field="wcDfzfpt" width="100" align="right">地方财政资金</th>
            <th field="wcQyzyzj" width="100" align="right">企业自有资金</th>
            <th field="wcYhdk" width="80" align="right">银行贷款</th>
            <th field="wcQtzj" width="80" align="right">其他资金</th>
            <!--第三部分合并-->
            <th field="zfZyystz" width="100" align="right">中央预算内</th>
            <th field="zfZzqysntz" width="100" align="right">自治区预算内</th>
            <th field="zfMjptzj" width="80" align="right">盟市配套</th>
            <th field="zfZxjsjj" width="100" align="right">专项建设基金</th>
            <th field="zfDfzfpt" width="100" align="right">地方财政资金</th>
            <th field="zfQyzyzj" width="100" align="right">企业自有资金</th>
            <th field="zfYhdk" width="80" align="right">银行贷款</th>
            <th field="zfQtzj" width="80" align="right">其他资金</th>
        </tr>
    </thead>
</table>

3：JAVA 后台代码....我用的Spring MVC 

注意数格式是JSON  返回的时候 格式

 

不容易啊，还有个导出功能我就不贴出来了，想要的小伙伴可以私信我，导出样式和页面一直，看看效果图。导出框架用的是 easy POI