效果图：

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. 【Android实战】----基于Retrofit实现多图片/文件、图文上传

    本文代码详见:https://github.com/honghailiang/RetrofitUpLoadImage 一.再次膜拜下Retrofit Retrofit不管从性能还是使用方便性上都非常屌 ...

  2. sql分页性能测试结果

    --方案一: declare @d datetime set @d = getdate() ID from Info order by ID) order by ID select [not in方法 ...

  3. QtGui.QComboBox

    The QtGui.QComboBox is a widget that allows a user to choose from a list of options. #!/usr/bin/pyth ...

  4. 【微信支付】公众号、商户基础配置和流程（包括设置支付授权目录、测试支付目录和白名单、JS接口安全域名、授权回调域名等）

    一.使用场景以及说明 使用场景:商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 说明:1.用户打开图文消息或者扫描二维码,在微信内置浏览器打开网 ...

  5. Ubuntu桌面操作快捷键

    Ubuntu操作基本快捷键 * 打开主菜单 = Alt + F1 * 运行 = Alt + F2 * 打开终端 = Alt+F2 然后输入gnome-terminal回车 * 显示桌面 = Ctrl ...

  6. Centos网络时好时超时问题解决

    近期公司使用的Centos突然出现网络不稳定现象,有公网,内部可以PING通外网,但是外部PING这个IP时,经常丢包现象,而且一丢包就是连续性的长达七八次,甚至十几次. 这个问题折腾了很长时间,因为 ...

  7. FFMPEG音视频解码

    文章转自:https://www.cnblogs.com/CoderTian/p/6791638.html 1.播放多媒体文件步骤 通常情况下,我们下载的视频文件如MP4,MKV.FLV等都属于封装格 ...

  8. ztree获取选中节点

    $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); functi ...

  9. LIntcode---将二叉搜索树转成较大的树

    Given a Binary Search Tree (BST), convert it to a Greater Tree such that every key of the original B ...

  10. Navicat Premium之MySQL客户端的下载、安装和使用（博主推荐）

    不多说,直接上干货! 前期工作 若需使用Navicat Premium,则需要先安装MySQL,在此就不叙述了.具体可见我的博客: MySQL Server类型之MySQL客户端工具的下载.安装和使用 ...