Easyui Datagrid相同连续列合Demo之三

全栈程序员-站长 • 2022年2月21日下午2:00 • 未分类 • 阅读 44

大家好，又见面了，我是全栈君。

效果图：

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Merge Cells for DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../extends.js"></script>
</head>
<body>
    <h2>Merge Cells for DataGrid</h2>
    <p>Cells in DataGrid body can be merged.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" id="dg" title="Merge Cells for DataGrid" style="width:700px;height:250px"
            data-options="
                rownumbers: true,
                singleSelect: true,
                iconCls: 'icon-save',
                data:qyData,
                method: 'get',
                onLoadSuccess: onLoadSuccess
            ">
        <thead>
            <tr>
                <th data-options="field:'productid',width:100">Product</th>
                <th data-options="field:'productname',width:80">ProductName</th>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:240">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>
    <input type="button" value="合并" id="mergeCells" οnclick="hb()">
    <script type="text/javascript">
       var qyData = {"total":11,"rows":[
                            
                {"productid":"d1","productname":"p1","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
                {"productid":"d1","productname":"p1","unitcost":10.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
                {"productid":"d1","productname":"p2","unitcost":10.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
                {"productid":"d2","productname":"p2","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
                {"productid":"d2","productname":"p2","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
                {"productid":"d2","productname":"p2","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
                {"productid":"d3","productname":"p3","unitcost":14.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
                {"productid":"d3","productname":"p3","unitcost":14.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
                {"productid":"d5","productname":"p5"},
                {"productid":"d4","productname":"p2","unitcost":10.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
                {"productid":"d4","productname":"p2","unitcost":10.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
            ]}

        var jcData = [
            {"unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
            {"unitcost":10.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
            {"unitcost":10.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
            {"unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"}
        ]
        
        function onLoadSuccess(data){
            $(this).datagrid("autoMergeCellAndCells",['productid','productname']);
        
        }
        
        function hb(){
            var id = "d5";
            var data = $("#dg").datagrid('getData');
            var rows = data.rows;
            var total = data.total;
            var qFileds = ['productid','productname'];
            var qrow = {};
            var n = null;
            var d = 0;
            for(var i = 0;i<rows.length;i++){
               if(rows[i][qFileds[0]] == id){
                 if(n == null)  n = i;
                 d++;
               }
            }
            for(var i = 0;i<qFileds.length;i++){
                qrow[qFileds[i]] = rows[n][qFileds[i]];
            }
            var r = null;
            for(var i = 0;i<jcData.length;i++){
              //Array.prototype.push.apply(jcData[i], qrow);  //数组追加
              jcData[i] = $.extend({}, jcData[i],qrow);//json对象追加
              if(i == 0){
                 r = rows.splice(n,d,jcData[i]);//从n个位置，开始删除d个，并追加jcData 
              }else{
                 r = rows.splice(n,0,jcData[i]);
              }
            }
            total = total - d + jcData.length;
            $("#dg").datagrid('loadData',{total:total,rows:rows})
        }
    </script>
</body>
</html>

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/108858.html原文链接：https://javaforall.net