扩展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 + ;//合并的行数
rowSpanData[key] = data;//重新赋值到集合
if (!islast) {
return true;
}
} else {
//如果相同的列名,但和上一行不一致,那就重新赋值,重新赋值之前,将之前的rowspan赋值。
if ((data.domId && data.count > )) {
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 > )) {
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 == ) {
$(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 > )) {
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: , domId: g._getCellDomId(item, this), orderseq: columnindex };
rowSpanData[key] = data;
//rowSpanData[key] = null;
}
if (islast) {
//最后一个直接赋值rowSpan
if ((data.domId && data.count > )) {
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: , domId: g._getCellDomId(item, this), orderseq: columnindex };
rowSpanData[key] = data;
}
}


    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. requests与urllib.request

    requests很明显,在写法上与urllib.request不同,前者多一个 S.导入包时:import requestsimport urllib.requesturllib.request请求模 ...

  2. ps 快捷键大全

    一.工具箱(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取)矩形.椭圆选框工具 [M]移动工具 [V]套索.多边形套索.磁性套索 [L]魔棒工具 [W]裁剪工具 [C]切片工具.切片选择 ...

  3. Qt编写控件属性设计器9-数据库采集

    一.前言 数据库作为数据源,在很多组态软件中使用非常多,指定数据库类型,填写好数据库连接信息,指定对应的数据库表和字段,采集间隔,程序按照采集间隔自动采集数据库数据,绑定到界面上的控件赋值显示即可.使 ...

  4. 纯js脚本操作excel

    纯js脚本解析excel,并渲染为htm表格,投放大屏并滚动! 代码:https://github.com/tianbogit/js_excel

  5. Python源码编译安装,supervisor配置管理

    apt-get remove 会删除软件包而保留软件的配置文件 apt-get purge 会同时清除软件包和软件的配置文件 virtualenv -p /usr/local/bin/python3. ...

  6. 01.轮播图之一 :scrollView 轮播

    接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写: 这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处 scrollvi ...

  7. Docker 容器的资源限制 cgroup(九)

    目录 一.cgroup简介 二.CPU资源配额控制 1.CPU份额控制 2.CPU周期控制 3.CPU core控制 4.CPU配额控制参数的混合使用 二.对内存的限额 三.对 Block IO 的限 ...

  8. 谈谈NPM和Webpack的关系

    为什么有NPM: 当包引入数量很多时管理就成为了一个问题,这个就是npm为开发者行了方便之处,npm已经为你做好了依赖和版本的控制,也就是说使用npm可以让你从繁杂的依赖安装和版本冲突中解脱出来,进而 ...

  9. 网站架构(LNMP)

    说明: 1)LNMP架构的组成(作用) 2)LNMP架构的部署 3)LNMP架构通讯原理 4)LNMP服务之间如何建立管理 nginx+php   运维负责 php+mysql   开发负责 5) 运 ...

  10. 采用霍夫曼编码(Huffman)画出字符串各字符编码的过程并求出各字符编码 --多媒体技术与应用

    题目:有一个字符串:cabcedeacacdeddaaaba,问题: (1)采用霍夫曼编码画出编码的过程,并写出各字符的编码 (2)根据求得的编码,求得各编码需要的总位数 (3)求出整个字符串总编码长 ...