效果图：

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 gallery 自定义边框+幻灯片效果

    最近在项目中用到图片轮播,试了Gallery,ViewFlipper,ViewPager,感觉Gallery最符合需求,但是Gallery的系统边框很难看,项目中要求用自己的背景图片. 下面来看一下使 ...

  2. UNIX网络编程学习笔记：值-结果（value-result）参数

    前言 当把套接口地址结构传递给套接口函数时,总是通过指针来传递的,即传递的是一个指向结构的指针.结构的长度也作为参数来传递,其传递的方式取决于结构的传递方向:从进程到内核,还是从内核到进程. 1.从进 ...

  3. Web中树形数据(层级关系数据)的实现—以行政区树为例

    在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...

  4. Python模块学习 --- urllib

    urllib模块提供的上层接口,使我们可以像读取本地文件一样读取www和ftp上的数据.每当使用这个模块的时候,老是会想起公司产品的客户端,同事用C++下载Web上的图片,那种“痛苦”的表情.我以前翻 ...

  5. PotPlayer 如何设置多屏幕全屏播放

      如何在播放器中,设置扩展播放模式? 全屏设置/主全屏显示设备:Display2   如何使视频播放时,没有黑边并且全屏充满? 高宽比/处理方式:保持全屏宽高比   如果取消掉视频上方的文字提示信息 ...

  6. Linux下的编译器（转）

    转自:http://ju.outofmemory.cn/entry/2051 简单的说,编译器就是一个可执行程序,它专门用于将程序员易于编写的高级语言 (如 C 语言) 翻译为机器可以识别的低级语言. ...

  7. 【转发】未能加载文件或程序集“Oracle.DataAccess”或它的某一个依赖项。试图加载格式不正确的程序。

     http://www.cnblogs.com/joey0210/archive/2012/09/29/2708420.html   上一篇文章说到了DLL引用问题,主要是说的程序中如果使用过了反射, ...

  8. Android开发笔记（一百三十四）协调布局CoordinatorLayout

    协调布局CoordinatorLayout Android自5.0之后对UI做了较大的提升.一个重大的改进是推出了MaterialDesign库,而该库的基础即为协调布局CoordinatorLayo ...

  9. ssh-keygen - 生成、管理和转换认证密钥

    通常使用:[b]ssh-keygen -i -f 公密匙名>> authorized_keys[/b]语法详细介绍[code]ssh-keygen [-q] [-b bits] -t ty ...

  10. OFBiz：添加实体栏位

    如何添加实体栏位?这里演示为PostalAddress添加planet栏位.打开applications/party/entitydef/entitymodel.xml,找到PostalAddress ...