ligerui.grid.extend.rowSpan
扩展LigerUI的Grid中的相同列合并行功能,代码如下:
$.extend($.ligerui.controls.Grid.prototype, { _getHtmlFromData:function(data, frozen) { if (!data) return ""; var g = this, p = this.options; var gridhtmlarr = []; var rowSpanData = {}; var islast = false; for (var i = 0, l = data.length; i < l; i++) { islast = (i==data.length-1); var item = data[i]; var rowid = item['__id']; if (!item) continue; gridhtmlarr.push('<tr'); gridhtmlarr.push(' id="' + g._getRowDomId(item, frozen) + '"'); gridhtmlarr.push(' class="l-grid-row'); //class start if (!frozen && g.enabledCheckbox() && p.isChecked && p.isChecked(item)) { g.select(item); gridhtmlarr.push(' l-selected'); } else if (g.isSelected(item)) { gridhtmlarr.push(' l-selected'); } else if (p.isSelected && p.isSelected(item)) { g.select(item); gridhtmlarr.push(' l-selected'); } if (item['__index'] % 2 == 1 && p.alternatingRow) gridhtmlarr.push(' l-grid-row-alt'); //自定义css class if (p.rowClsRender) { var rowcls = p.rowClsRender(item, rowid); rowcls && gridhtmlarr.push(' ' + rowcls); } gridhtmlarr.push('" '); //class end if (p.rowAttrRender) gridhtmlarr.push(p.rowAttrRender(item, rowid)); if (p.tree && g.collapsedRows && g.collapsedRows.length) { var isHide = function () { var pitem = g.getParent(item); while (pitem) { if ($.inArray(pitem, g.collapsedRows) != -1) return true; pitem = g.getParent(pitem); } return false; }; if (isHide()) gridhtmlarr.push(' style="display:none;" '); } else if (p.tree && p.tree.isExtend) { var isHide = function () { var pitem = g.getParent(item); while (pitem) { if (p.tree.isExtend(pitem) == false) return true; pitem = g.getParent(pitem); } return false; }; if (isHide()) gridhtmlarr.push(' style="display:none;" '); } gridhtmlarr.push('>'); $(g.columns).each(function (columnindex, column) { if (frozen != column.frozen) return; if(column.rowSpan){ var key = column.name; var data = rowSpanData[key]; var value = g._getCellContent(item, column); if(data){ if(data.value==value){ data.count = data.count+1; rowSpanData[key] = data; if(!islast){ return true; } }else{ if((data.domId&&data.count>1)){ var rowSpanTd = 'id="'+data.domId+'"'; $.each(gridhtmlarr,function(index,str){ if(rowSpanTd==$.trim(str)){ str = str+" rowspan="+data.count; gridhtmlarr[index] = str; } }); } data = {value:value,count:1,domId:g._getCellDomId(item, this)}; rowSpanData[key] = data; } if(islast){ if((data.domId&&data.count>1)){ var rowSpanTd = 'id="'+data.domId+'"'; $.each(gridhtmlarr,function(index,str){ if(rowSpanTd==$.trim(str)){ str = str+" rowspan="+data.count; gridhtmlarr[index] = str; } }); return true; } } }else{ data = {value:value,count:1,domId:g._getCellDomId(item, this)}; rowSpanData[key] = data; } } gridhtmlarr.push('<td'); gridhtmlarr.push(' id="' + g._getCellDomId(item, this) + '"'); //如果是行序号(系统列) if (this.isrownumber) { gridhtmlarr.push(' class="l-grid-row-cell l-grid-row-cell-rownumbers" style="width:' + this.width + 'px"><div class="l-grid-row-cell-inner"'); if (p.fixedCellHeight) gridhtmlarr.push(' style = "height:' + p.rowHeight + 'px;" '); else gridhtmlarr.push(' style = "min-height:' + p.rowHeight + 'px;" '); gridhtmlarr.push('>' + (parseInt(item['__index']) + 1) + '</div></td>'); return; } //如果是复选框(系统列) if (this.ischeckbox) { gridhtmlarr.push(' class="l-grid-row-cell l-grid-row-cell-checkbox" style="width:' + this.width + 'px"><div class="l-grid-row-cell-inner"'); if (p.fixedCellHeight) gridhtmlarr.push(' style = "height:' + p.rowHeight + 'px;" '); else gridhtmlarr.push(' style = "min-height:' + p.rowHeight + 'px;" '); gridhtmlarr.push('>'); gridhtmlarr.push('<span class="l-grid-row-cell-btn-checkbox"></span>'); gridhtmlarr.push('</div></td>'); return; } //如果是明细列(系统列) else if (this.isdetail) { gridhtmlarr.push(' class="l-grid-row-cell l-grid-row-cell-detail" style="width:' + this.width + 'px"><div class="l-grid-row-cell-inner"'); if (p.fixedCellHeight) gridhtmlarr.push(' style = "height:' + p.rowHeight + 'px;" '); else gridhtmlarr.push(' style = "min-height:' + p.rowHeight + 'px;" '); gridhtmlarr.push('>'); if (!p.isShowDetailToggle || p.isShowDetailToggle(item)) { gridhtmlarr.push('<span class="l-grid-row-cell-detailbtn"></span>'); } gridhtmlarr.push('</div></td>'); return; } var colwidth = this._width; gridhtmlarr.push(' class="l-grid-row-cell '); if (g.changedCells[rowid + "_" + this['__id']]) gridhtmlarr.push("l-grid-row-cell-edited "); if (this.islast) gridhtmlarr.push('l-grid-row-cell-last '); gridhtmlarr.push('"'); //if (this.columnname) gridhtmlarr.push('columnname="' + this.columnname + '"'); gridhtmlarr.push(' style = "'); gridhtmlarr.push('width:' + colwidth + 'px; '); if (column._hide) { gridhtmlarr.push('display:none;'); } gridhtmlarr.push(' ">'); gridhtmlarr.push(g._getCellHtml(item, column)); gridhtmlarr.push('</td>'); }); gridhtmlarr.push('</tr>'); } return gridhtmlarr.join(''); } });
但我们往往在合并行时,是需要根据行的其他值来判断,譬如订单号不同,那其后面的行就不能合并成一行,因为如果合并成一行,反而不清晰,最佳的办法是如果前面的列不同,后面的列合并时,不能跨行合并
以上代码稍作调整:
if (column.rowSpan) {//如果列定义了合并行 update zjy var key = column.name; var data = rowSpanData[key]; //获取合并行的合集 var value = g._getCellContent(item, column);//这个行对应列的值 if (data) {//存在, 在循环第二行或者多行的情况下,判断是否和上一行有相同的值,如果有相同,表示合并1行+1, if (data.value == value) { data.count = data.count + 1;//合并的行数 rowSpanData[key] = data;//重新赋值到集合 if (!islast) { return true; } } else { //如果相同的列名,但和上一行不一致,那就重新赋值,重新赋值之前,将之前的rowspan赋值。 if ((data.domId && data.count > 1)) { var rowSpanTd = 'id="' + data.domId + '"'; $.each(gridhtmlarr, function (index, str) { if (rowSpanTd == $.trim(str)) { str = str + " rowspan=" + data.count; gridhtmlarr[index] = str; } }); $(g.columns).each(function (x, m) { if (m.rowSpan) { if (data.orderseq < x) { var _find = rowSpanData[m.name]; //获取合并行的合集 if (_find) { if ((_find.domId && _find.count > 1)) { var _findRowSpanTd = 'id="' + _find.domId + '"'; $.each(gridhtmlarr, function (_index, _str) { if (_findRowSpanTd == $.trim(_str)) { _str = _str + " rowspan=" + _find.count; gridhtmlarr[_index] = _str; } }); } //data = { value: g._getCellContent(item, m), count: 1, domId: g._getCellDomId(item, this), orderseq: x }; rowSpanData[m.name] = null; //置空 } } } }); } else if (data.domId && data.count == 1) { $(g.columns).each(function (x, m) { if (m.rowSpan) { if (data.orderseq < x) { var _find = rowSpanData[m.name]; //获取合并行的合集 if (_find) { if ((_find.domId && _find.count > 1)) { var _findRowSpanTd = 'id="' + _find.domId + '"'; $.each(gridhtmlarr, function (_index, _str) { if (_findRowSpanTd == $.trim(_str)) { _str = _str + " rowspan=" + _find.count; gridhtmlarr[_index] = _str; } }); } rowSpanData[m.name] = null; //置空 } } } }); } //重新将这个列名赋值到集合列 data = { value: value, count: 1, domId: g._getCellDomId(item, this), orderseq: columnindex }; rowSpanData[key] = data; //rowSpanData[key] = null; } if (islast) { //最后一个直接赋值rowSpan if ((data.domId && data.count > 1)) { var rowSpanTd = 'id="' + data.domId + '"'; $.each(gridhtmlarr, function (index, str) { if (rowSpanTd == $.trim(str)) { str = str + " rowspan=" + data.count; gridhtmlarr[index] = str; } }); return true; } } } else { //没有在合并行中出现,就是第一个,将这个值保存在临时合并行集合中 data = { value: value, count: 1, domId: g._getCellDomId(item, this), orderseq: columnindex }; rowSpanData[key] = data; } }
columns: [ { rowSpan: true }]