效果图：

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" onclick="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>
 

Easyui Datagrid相同连续列合Demo之三的更多相关文章

  1. 扩展-Easyui Datagrid相同连续列合并扩展（一）

    一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){     $(this).datagrid("autoMerge ...

  2. EasyUI DataGrid 相同连续列合并

    扩展方法:$.extend($.fn.datagrid.methods, { autoMergeCells: function(jq, fields) { return jq.each(functio ...

  3. Easyui Datagrid相同连续列合并扩展（三）

    function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || fields == null | ...

  4. Easyui Datagrid相同连续列合并扩展（二）

    JS: //合并相同数据的单元格 function MergeCells(seletor, rows, fields) { if(rows == null || rows.length == 0 || ...

  5. jQuery Easyui Datagrid相同连续列合并扩展

    /** * author ____′↘夏悸 * create date 2012-11-5 **/$.extend($.fn.datagrid.methods, { autoMergeCells : ...

  6. 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

    需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...

  7. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  8. easyui datagrid Column Group 列组、 复杂表头 嵌套表头 组合表头 （转载）

    核心: rowspan:2   //占两行 colspan:3    //占三列 所有的colspan下的二级列表头,统一放在一个数组里. 文章一: 转载来源:https://blog.csdn.ne ...

  9. easyui datagrid自定义操作列

    通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...

随机推荐

  1. Mysqldump参数大全（参数来源于mysql5.5.19源码）

    参数 参数说明 --all-databases  , -A 导出全部数据库. mysqldump  -uroot -p --all-databases --all-tablespaces  , -Y ...

  2. JavaScript ,Css and Jquery In OpenERP 7.0

    From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...

  3. profiler跟踪事件模板文件

    查找执行情况最差的查询. 例如,可以创建一个捕获与 TSQL 和 Stored Procedure 事件类(RPC:Completed 和SQL:BatchCompleted)相关的事件的跟踪.在此跟 ...

  4. Entity Framework Code First关系映射约定【l转发】

    本篇随笔目录: 1.外键列名默认约定 2.一对多关系 3.一对一关系 4.多对多关系 5.一对多自反关系 6.多对多自反关系 在关系数据库中,不同表之间往往不是全部都单独存在,而是相互存在关联的.两个 ...

  5. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

  6. 【Linux】more命令

    用途 more主要用于一页一页查看档案 全称 全称即为more 说明 空格键 :代表向下翻一页,也可以使用CTRL+F Enter :代表下翻一行 :f      :立刻显示出文件名以及目前显示的行数 ...

  7. <a>标签实现锚点跳跃，<a>标签实现href不跳跃另外加事件（ref传参）

    1.锚点跳跃 HTML: <div class="page_title" id="maodian"> <h1>客房节日价格管理</ ...

  8. sphinx相关文章

    sphinx配置文件详解http://yanue.net/post-129.html Sphinx+Scws 搭建千万级准实时搜索&应用场景详解 http://blog.csdn.net/pi ...

  9. 函数适配器bind2nd 、mem_fun_ref 源码分析、函数适配器应用举例

    一.适配器 三种类型的适配器: 容器适配器:用来扩展7种基本容器,利用基本容器扩展形成了栈.队列和优先级队列 迭代器适配器:(反向迭代器.插入迭代器.IO流迭代器) 函数适配器:函数适配器能够将仿函数 ...

  10. Silver Cow Party

    Description One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to atten ...