效果图：

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. python分号使用

    一:python分号使用 每一条语句最后个加个分号:这是c,oc,java,php等语言中不可缺少的部分,但是对于python,分号是可加,可不加的 如:不加分号代码 >>> cla ...

  2. iOS 状态栏和导航条配置

    iOS 状态栏和导航条配置 一:隐藏: [self.navigationController setNavigationBarHidden:YES animated:YES]; [[UIApplica ...

  3. Android DataBinding库(MVVM设计模式)

    什么是MVVM 说到DataBinding,就有必要先提起MVVM设计模式.Model–View–ViewModel(MVVM) 是一个软件架构设计模式,相比MVVM,大家对MVC或MVP可能会更加熟 ...

  4. 从头学习MVC4基础之视图

    实例一:首先简单显示实例: 控制器代码: public class WujyTestController : Controller { public ActionResult Index() { Li ...

  5. ubuntu执行级别，设置单用户模式

    redhat的runlevel级别定义例如以下:   0:关机.不能将系统缺省执行级别设置为0,否则无法启动. 1:单用户模式.仅仅同意root用户对系统进行维护. 2:多用户模式.但不能使用NFS( ...

  6. 配置tomcat映射jsp

    <servlet>   <servlet-name>jfjf</servlet-name>   <jsp-file>/14.jsp</jsp-fi ...

  7. 优化技术之Android UI优化

    2013-06-30 UI 优化 在Android中,最常用LinearLayout表示UI的布局.比起LinearLayout,在资源利用上,RelativeLayout会占用更少的资源而达到相同的 ...

  8. 【CentOS6.5】安装之DNS配置错误，yum install 软件报错：ERROR 6或者56错误提示”could not retrieve mirrorlist http://mirrorlist.centos.org ***”

    刚安装完CentOS,使用yum命令安装一些常用的软件,使用如下命令:yum grouplist | more. 提示如下错误信息: Loaded plugins: fastestmirror Set ...

  9. Eclipse怎样连接并打开oracle等数据库？

    http://jingyan.baidu.com/article/a501d80cea3ed4ec630f5e2f.html

  10. 用Visual studio2012在Windows8上开发内核驱动监视线程创建

    在Windows NT中,80386保护模式的“保护”比Windows 95中更坚固,这个“镀金的笼子”更加结实,更加难以打破.在Windows 95中,至少应用程序I/O操作是不受限制的,而在Win ...