1. 扩展LigerUI的Grid中的相同列合并行功能，代码如下：
    $.extend($.ligerui.controls.Grid.prototype, {
  2.     _getHtmlFromData:function(data, frozen) {
  3.         if (!data) return "";
  4.         var g = this, p = this.options;
  5.         var gridhtmlarr = [];
  6.         var rowSpanData = {};
  7.         var islast = false;
  8.         for (var i = 0, l = data.length; i < l; i++)
  9.         {
  10.             islast = (i==data.length-1);
  11.             var item = data[i];
  12.             var rowid = item['__id'];
  13.             if (!item) continue;
  14.             gridhtmlarr.push('<tr');
  15.             gridhtmlarr.push(' id="' + g._getRowDomId(item, frozen) + '"');
  16.             gridhtmlarr.push(' class="l-grid-row'); //class start
  17.             if (!frozen && g.enabledCheckbox() && p.isChecked && p.isChecked(item))
  18.             {
  19.                 g.select(item);
  20.                 gridhtmlarr.push(' l-selected');
  21.             }
  22.             else if (g.isSelected(item))
  23.             {
  24.                 gridhtmlarr.push(' l-selected');
  25.             }
  26.             else if (p.isSelected && p.isSelected(item))
  27.             {
  28.                 g.select(item);
  29.                 gridhtmlarr.push(' l-selected');
  30.             }
  31.             if (item['__index'] % 2 == 1 && p.alternatingRow)
  32.                 gridhtmlarr.push(' l-grid-row-alt');
  33.             //自定义css class
  34.             if (p.rowClsRender)
  35.             {
  36.                 var rowcls = p.rowClsRender(item, rowid);
  37.                 rowcls && gridhtmlarr.push(' ' + rowcls);
  38.             }
  39.             gridhtmlarr.push('" ');  //class end
  40.             if (p.rowAttrRender) gridhtmlarr.push(p.rowAttrRender(item, rowid));
  41.             if (p.tree && g.collapsedRows && g.collapsedRows.length)
  42.             {
  43.                 var isHide = function ()
  44.                 {
  45.                     var pitem = g.getParent(item);
  46.                     while (pitem)
  47.                     {
  48.                         if ($.inArray(pitem, g.collapsedRows) != -1) return true;
  49.                         pitem = g.getParent(pitem);
  50.                     }
  51.                     return false;
  52.                 };
  53.                 if (isHide()) gridhtmlarr.push(' style="display:none;" ');
  54.             }
  55.             else if (p.tree && p.tree.isExtend)
  56.             {
  57.                 var isHide = function ()
  58.                 {
  59.                     var pitem = g.getParent(item);
  60.                     while (pitem)
  61.                     {
  62.                         if (p.tree.isExtend(pitem) == false) return true;
  63.                         pitem = g.getParent(pitem);
  64.                     }
  65.                     return false;
  66.                 };
  67.                 if (isHide()) gridhtmlarr.push(' style="display:none;" ');
  68.             }
  69.             gridhtmlarr.push('>');
  70.             $(g.columns).each(function (columnindex, column)
  71.             {
  72.                 if (frozen != column.frozen) return;
  73.                 if(column.rowSpan){
  74.                     var key = column.name;
  75.                     var data = rowSpanData[key];
  76.                     var value = g._getCellContent(item, column);
  77.                     if(data){
  78.                         if(data.value==value){
  79.                             data.count = data.count+1;
  80.                             rowSpanData[key] = data;
  81.                             if(!islast){
  82.                                 return true;
  83.                             }
  84.                         }else{
  85.                             if((data.domId&&data.count>1)){
  86.                                 var rowSpanTd = 'id="'+data.domId+'"';
  87.                                 $.each(gridhtmlarr,function(index,str){
  88.                                     if(rowSpanTd==$.trim(str)){
  89.                                         str = str+" rowspan="+data.count;
  90.                                         gridhtmlarr[index] = str;
  91.                                     }
  92.                                 });
  93.                             }
  94.                             data = {value:value,count:1,domId:g._getCellDomId(item, this)};
  95.                             rowSpanData[key] = data;
  96.                         }
  97.                         if(islast){
  98.                             if((data.domId&&data.count>1)){
  99.                                 var rowSpanTd = 'id="'+data.domId+'"';
  100.                                 $.each(gridhtmlarr,function(index,str){
  101.                                     if(rowSpanTd==$.trim(str)){
  102.                                         str = str+" rowspan="+data.count;
  103.                                         gridhtmlarr[index] = str;
  104.                                     }
  105.                                 });
  106.                                 return true;
  107.                             }
  108.                         }
  109.                     }else{
  110.                         data = {value:value,count:1,domId:g._getCellDomId(item, this)};
  111.                         rowSpanData[key] = data;
  112.                     }
  113.                 }
  114.                 gridhtmlarr.push('<td');
  115.                 gridhtmlarr.push(' id="' + g._getCellDomId(item, this) + '"');
  116.                 //如果是行序号(系统列)
  117.                 if (this.isrownumber)
  118.                 {
  119.                     gridhtmlarr.push(' class="l-grid-row-cell l-grid-row-cell-rownumbers" style="width:' + this.width + 'px"><div class="l-grid-row-cell-inner"');
  120.                     if (p.fixedCellHeight)
  121.                         gridhtmlarr.push(' style = "height:' + p.rowHeight + 'px;" ');
  122.                     else
  123.                         gridhtmlarr.push(' style = "min-height:' + p.rowHeight + 'px;" ');
  124.                     gridhtmlarr.push('>' + (parseInt(item['__index']) + 1) + '</div></td>');
  125.                     return;
  126.                 }
  127.                 //如果是复选框(系统列)
  128.                 if (this.ischeckbox)
  129.                 {
  130.                     gridhtmlarr.push(' class="l-grid-row-cell l-grid-row-cell-checkbox" style="width:' + this.width + 'px"><div class="l-grid-row-cell-inner"');
  131.                     if (p.fixedCellHeight)
  132.                         gridhtmlarr.push(' style = "height:' + p.rowHeight + 'px;" ');
  133.                     else
  134.                         gridhtmlarr.push(' style = "min-height:' + p.rowHeight + 'px;" ');
  135.                     gridhtmlarr.push('>');
  136.                     gridhtmlarr.push('<span class="l-grid-row-cell-btn-checkbox"></span>');
  137.                     gridhtmlarr.push('</div></td>');
  138.                     return;
  139.                 }
  140.                 //如果是明细列(系统列)
  141.                 else if (this.isdetail)
  142.                 {
  143.                     gridhtmlarr.push(' class="l-grid-row-cell l-grid-row-cell-detail" style="width:' + this.width + 'px"><div class="l-grid-row-cell-inner"');
  144.                     if (p.fixedCellHeight)
  145.                         gridhtmlarr.push(' style = "height:' + p.rowHeight + 'px;" ');
  146.                     else
  147.                         gridhtmlarr.push(' style = "min-height:' + p.rowHeight + 'px;" ');
  148.                     gridhtmlarr.push('>');
  149.                     if (!p.isShowDetailToggle || p.isShowDetailToggle(item))
  150.                     {
  151.                         gridhtmlarr.push('<span class="l-grid-row-cell-detailbtn"></span>');
  152.                     }
  153.                     gridhtmlarr.push('</div></td>');
  154.                     return;
  155.                 }
  156.                 var colwidth = this._width;
  157.                 gridhtmlarr.push(' class="l-grid-row-cell ');
  158.                 if (g.changedCells[rowid + "_" + this['__id']]) gridhtmlarr.push("l-grid-row-cell-edited ");
  159.                 if (this.islast)
  160.                     gridhtmlarr.push('l-grid-row-cell-last ');
  161.                 gridhtmlarr.push('"');
  162.                 //if (this.columnname) gridhtmlarr.push('columnname="' + this.columnname + '"');
  163.                 gridhtmlarr.push(' style = "');
  164.                 gridhtmlarr.push('width:' + colwidth + 'px; ');
  165.                 if (column._hide)
  166.                 {
  167.                     gridhtmlarr.push('display:none;');
  168.                 }
  169.                 gridhtmlarr.push(' ">');
  170.                 gridhtmlarr.push(g._getCellHtml(item, column));
  171.                 gridhtmlarr.push('</td>');
  172.             });
  173.             gridhtmlarr.push('</tr>');
  174.         }
  175.         return gridhtmlarr.join('');
  176.     }
  177. });
    但我们往往在合并行时，是需要根据行的其他值来判断，譬如订单号不同，那其后面的行就不能合并成一行，因为如果合并成一行，反而不清晰，最佳的办法是如果前面的列不同，后面的列合并时，不能跨行合并
    以上代码稍作调整：
  1.         if (column.rowSpan) {//如果列定义了合并行 update zjy
  2.                         var key = column.name;
  3.                         var data = rowSpanData[key]; //获取合并行的合集
  4.                         var value = g._getCellContent(item, column);//这个行对应列的值
  5.                         if (data) {//存在, 在循环第二行或者多行的情况下，判断是否和上一行有相同的值，如果有相同，表示合并1行+1，
  6.                             if (data.value == value) {
  7.                                 data.count = data.count + ;//合并的行数
  8.                                 rowSpanData[key] = data;//重新赋值到集合
  9.                                 if (!islast) {
  10.                                     return true;
  11.                                 }
  12.                             } else {
  13.                                 //如果相同的列名，但和上一行不一致，那就重新赋值，重新赋值之前，将之前的rowspan赋值。
  14.                                 if ((data.domId && data.count > )) {
  15.                                     var rowSpanTd = 'id="' + data.domId + '"';
  16.                                     $.each(gridhtmlarr, function (index, str) {
  17.                                         if (rowSpanTd == $.trim(str)) {
  18.                                             str = str + " rowspan=" + data.count;
  19.                                             gridhtmlarr[index] = str;
  20.                                         }
  21.                                     });
  22.  
  23.                                     $(g.columns).each(function (x, m) {
  24.                                         if (m.rowSpan) {
  25.                                             if (data.orderseq < x) {
  26.                                                 var _find = rowSpanData[m.name]; //获取合并行的合集
  27.                                                 if (_find) {
  28.                                                     if ((_find.domId && _find.count > )) {
  29.                                                         var _findRowSpanTd = 'id="' + _find.domId + '"';
  30.                                                         $.each(gridhtmlarr, function (_index, _str) {
  31.                                                             if (_findRowSpanTd == $.trim(_str)) {
  32.                                                                 _str = _str + " rowspan=" + _find.count;
  33.                                                                 gridhtmlarr[_index] = _str;
  34.                                                             }
  35.                                                         });
  36.                                                     }
  37.                                                     //data = { value: g._getCellContent(item, m), count: 1, domId: g._getCellDomId(item, this), orderseq: x };
  38.                                                     rowSpanData[m.name] = null; //置空
  39.                                                 }
  40.                                             }
  41.  
  42.                                         }
  43.  
  44.                                     });
  45.                                 }
  46.                                 else if (data.domId && data.count == ) {
  47.                                     $(g.columns).each(function (x, m) {
  48.                                         if (m.rowSpan) {
  49.                                             if (data.orderseq < x) {
  50.                                                 var _find = rowSpanData[m.name]; //获取合并行的合集
  51.                                                 if (_find) {
  52.                                                     if ((_find.domId && _find.count > )) {
  53.                                                         var _findRowSpanTd = 'id="' + _find.domId + '"';
  54.                                                         $.each(gridhtmlarr, function (_index, _str) {
  55.                                                             if (_findRowSpanTd == $.trim(_str)) {
  56.                                                                 _str = _str + " rowspan=" + _find.count;
  57.                                                                 gridhtmlarr[_index] = _str;
  58.                                                             }
  59.                                                         });
  60.                                                     }
  61.                                                     rowSpanData[m.name] = null; //置空
  62.                                                 }
  63.                                             }
  64.                                         }
  65.                                     });
  66.                                 }
  67.                                 //重新将这个列名赋值到集合列
  68.                                 data = { value: value, count: , domId: g._getCellDomId(item, this), orderseq: columnindex };
  69.                                 rowSpanData[key] = data;
  70.                                 //rowSpanData[key] = null;
  71.                             }
  72.                             if (islast) {
  73.                                 //最后一个直接赋值rowSpan
  74.                                 if ((data.domId && data.count > )) {
  75.                                     var rowSpanTd = 'id="' + data.domId + '"';
  76.                                     $.each(gridhtmlarr, function (index, str) {
  77.                                         if (rowSpanTd == $.trim(str)) {
  78.                                             str = str + " rowspan=" + data.count;
  79.                                             gridhtmlarr[index] = str;
  80.                                         }
  81.                                     });
  82.                                     return true;
  83.                                 }
  84.                             }
  85.                         } else {
  86.                             //没有在合并行中出现，就是第一个，将这个值保存在临时合并行集合中
  87.  
  88.                             data = { value: value, count: , domId: g._getCellDomId(item, this), orderseq: columnindex };
  89.                             rowSpanData[key] = data;
  90.                         }
  91.                     }
  1.  
  1.  
  1.     columns: [ { rowSpan: true }]

ligerui.grid.extend.rowSpan的更多相关文章

  1. 扩展Jquery方法创建LigerUI Grid

    ///** //*封装jquery get请求ajax //*author:叶明龙 //*time:2012-12-10 //*/ function getAjax(url, para, fn) { ...

  2. Ligerui Grid组件--学生信息列表

    一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 4.Ligerui Grid组件--学生信 ...

  3. 关于ligerui grid 行内编辑 combobox 只能选择的问题

    这个貌似是天然的不支持,修复方案,在ligerGridOrd.js中添加一行代码,如下,跟了一下午的源码,发现在这里的时候,options中只保留了combobox中的一部分属性,所以可能combob ...

  4. [ligerUI] grid封装调用方法

    /** * 获取页面参数 */ function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && wind ...

  5. ligerui grid行编辑示例

    <%@ page contentType="text/html; charset=UTF-8" %> <% String path = request.getCo ...

  6. LigerUI权限系统之角色管理

    角色管理比前面几个页面都稍显复杂点.好吧,还是先看图. 左边是角色列表,右边是页面列表,它们也是多对多的关系,即一个角色可以访问多个页面,同时一个页面也可以被多个角色访问. 点击左边的角色,刷新右边页 ...

  7. ligerUI实现分页

    在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来 简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后, ...

  8. 14、手把手教你Extjs5（十四）模块字段和Grid列的定义[2]

    model和columns生成好了,下面要修改一下Module.js和Grid.js中的代码,使其能够协同工作. /** * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系 */ ...

  9. Ligerui首页的快速搭建

    一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 4.Ligerui Grid组件--学生信 ...

随机推荐

  1. php 获得访问者的IP

    <?php $user_IP = ($_SERVER["HTTP_VIA"]) ? $_SERVER["HTTP_X_FORWARDED_FOR"] : ...

  2. bing map for wpf 怎么显示中文地图

    添加一下代码: string suriFormat = "http://r2.tiles.ditu.live.com/tiles/r{quadkey}.png?g=41"; Mic ...

  3. js文件中如何使用 获取EL表达式的值

    转: js文件中如何使用 获取EL表达式的值 原先做法是在jsp页面引入头文件 <%@ page language="java" pageEncoding="UTF ...

  4. 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局（27分36秒）

    Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...

  5. Scratch3架构结构说明

    Scratch3.0整体项目结构比较庞大,对于不同二次开发开始的时候会出现一头雾水,需要先了解下整体框架,可以按需要在指定的源码下进行修改,大致结构如下: 1. scratch-gui: 是基于Rea ...

  6. 斑马打印机ZBL语言

    ZBL手册:https://pan.baidu.com/s/1I8DaMUlf-9ytUwqtURw8rw 下面是打印CODE128条形码的代码 ^XA^FO100,100^BY6          ...

  7. 游戏协议模拟测试工具（TcpEngine）使用简介

    功能介绍 在有的网络开发需要走二进制流协议场景,比如网络游戏开发,在开发阶段,前端和后端协商好协议后就分别开发.在开发写代码的时候,有时需要对端发送一条完整的协议过来触发一下自己的代码,进行单步调试或 ...

  8. 【miscellaneous】MPEG2、MPEG4、H264的差异

    MPEG2.MPEG4.H264的差异 MPEG-2简介 MPEG-2制定于1994年,设计目标是高级工业标准的图象质量以及更高的传输率.MPEG-2所能提供的传输率在3-10Mbits/sec间,其 ...

  9. lcd timing的理解

    所谓调lcd timing就是去调lcd时序,一般是6个部分:HFPD(在一行扫描以前需要多少个像素时钟),HBPD(一行扫描结束到下一行扫描开始需要多少个像素时钟),VFPD(一帧开始之前需要多少个 ...

  10. 26.Spark创建RDD集合

    打开eclipse创建maven项目 pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:x ...