jqGrid专栏组

Question

我可以像jQuery EasyUI库一样在jqGrid中实现一个列组吗？

你可以通过jQuery EasyUI 演示网站找出我的意思,然后从左侧菜单中选择Datagrid然后选择Column Group.

谢谢你的帮助

Answer 1

你的问题并不新鲜.很多时候,在trirand论坛或stackoverflow上询问了相应的功能请求.我在前一段时间对这个封闭的问题给出了另一个答案.

在阅读了你的问题之后,我决定不做出支持所有jqGrid功能的完美解决方案(这一点太难了).而不是我决定创建一个可以在很多情况下使用但有一些限制的解决方案.

该演示显示了我的第一个结果:

限制:

• 网格的列无法调整大小.我在demo cmTemplate: {resizable: false}参数中使用在resizable: false所有网格列中设置.
• sortable: true 不受支持
• showCol, hideCol或columnChooser目前不支持,但我相信可以很快解决这些问题.
• 一个将放置其他列标题的列应具有相同的宽度.如果列具有不同的宽度值,则列的总宽度将自动在列之间分配.

另一方面,在我的所有测试中,一切都没有任何问题,可以使用其他常用选项shrinkToFit: false,autowidth: true或者根据setGridWidth方法更改网格宽度(有或没有收缩).

现在首先介绍该功能的用法.我写insertColumnGroupHeader了上面例子中使用的函数

insertColumnGroupHeader(grid, 'amount', 3, '<em>Information about the Price</em>');

它从"amount"列开始,在3列中插入一个额外的列标题,其中包含HTML片段" 有关价格的信息 ".因此使用非常简单.您当然可以使用任何文本,例如"有关价格的信息"作为附加列标题.

该函数insertColumnGroupHeader具有以下代码:

var denySelectionOnDoubleClick = function ($el) {
        // see https://stackoverflow.com/questions/2132172/disable-text-highlighting-on-double-click-in-jquery/2132230#2132230
        if ($.browser.mozilla) {//Firefox
            $el.css('MozUserSelect', 'none');
        } else if ($.browser.msie) {//IE
            $el.bind('selectstart', function () {
                return false;
            });
        } else {//Opera, etc.
            $el.mousedown(function () {
                return false;
            });
        }
    },
    insertColumnGroupHeader = function (mygrid, startColumnName, numberOfColumns, titleText) {
        var i, cmi, skip = 0, $tr, colHeader, iCol, $th,
            colModel = mygrid[0].p.colModel,
            ths = mygrid[0].grid.headers,
            gview = mygrid.closest("div.ui-jqgrid-view"),
            thead = gview.find("table.ui-jqgrid-htable>thead");

        mygrid.prepend(thead);
        $tr = $("<tr>");
        for (i = 0; i < colModel.length; i++) {
            $th = $(ths[i].el);
            cmi = colModel[i];
            if (cmi.name !== startColumnName) {
                if (skip === 0) {
                    $th.attr("rowspan", "2");
                } else {
                    denySelectionOnDoubleClick($th);
                    $th.css({"padding-top": "2px", height: "19px"});
                    $tr.append(ths[i].el);
                    skip--;
                }
            } else {
                colHeader = $('<th class="ui-state-default ui-th-ltr" colspan="' + numberOfColumns +
                    '" style="height:19px;padding-top:1px;text-align:center" role="columnheader">' + titleText + '</th>');
                denySelectionOnDoubleClick($th);
                $th.before(colHeader);
                $tr.append(ths[i].el);
                skip = numberOfColumns - 1;
            }
        }
        mygrid.children("thead").append($tr[0]);
    };

此外,还需要在jqGrid代码中进行一些更改.您可以jquery.jqGrid.src.js从此处下载修改后的版本(4.1.2版本的修改).这些变化包括两个街区.首先,我更改了sortData功能代码,即1874 - 1884行

var thd= $("thead:first",ts.grid.hDiv).get(0);
$("tr th:eq("+ts.p.lastsort+") span.ui-grid-ico-sort",thd).addClass('ui-state-disabled');
$("tr th:eq("+ts.p.lastsort+")",thd).attr("aria-selected","false");
$("tr th:eq("+idxcol+") span.ui-icon-"+ts.p.sortorder,thd).removeClass('ui-state-disabled');
$("tr th:eq("+idxcol+")",thd).attr("aria-selected","true");
if(!ts.p.viewsortcols[0]) {
    if(ts.p.lastsort != idxcol) {
        $("tr th:eq("+ts.p.lastsort+") span.s-ico",thd).hide();
        $("tr th:eq("+idxcol+") span.s-ico",thd).show();
    }
}

以下内容:

var previousSelectedTh = ts.grid.headers[ts.p.lastsort].el,
    newSelectedTh = ts.grid.headers[idxcol].el;
$("span.ui-grid-ico-sort",previousSelectedTh).addClass('ui-state-disabled');
$(previousSelectedTh).attr("aria-selected","false");
$("span.ui-icon-"+ts.p.sortorder,newSelectedTh).removeClass('ui-state-disabled');
$(newSelectedTh).attr("aria-selected","true");
if(!ts.p.viewsortcols[0]) {
    if(ts.p.lastsort != idxcol) {
        $("span.s-ico",previousSelectedTh).hide();
        $("span.s-ico",newSelectedTh).show();
    }
}

接下来我将getColumnHeaderIndex功能定义如下

var getColumnHeaderIndex = function (th) {
    var i, headers = ts.grid.headers, ci = $.jgrid.getCellIndex(th);
    for (i = 0; i < headers.length; i++) {
        if (th === headers[i].el) {
            ci = i;
            break;
        }
    }
    return ci;
};

和更改的行2172和2185的grid.base.js由

var ci = $.jgrid.getCellIndex(this);

至

var ci = getColumnHeaderIndex(this);

这就是全部.上述更改不应对原始jqGrid代码产生负面影响,并且可以照常使用.我将在下一次在trirand论坛上发表我的建议.

更新:演示的另一个版本允许调整所有列的大小,但具有标题的列除外.在版本中,将放置其他列标题的所有列必须具有相同的宽度.列的宽度不会自动在列之间分配.您必须手动设置相同的列宽.

UDPATED 2:我想了解一下创建更多高级版多头jqGrid的一些进展.首先,wildraid 发布了非常有趣的解决方 在这里看他的演示.顺便说一句,如果使用方法jqGrid与我建议的修复(见上文),将解决在演示中排序图标的问题.在这里看到演示作为构象.

在那之后,我在多列方法中更多地减少限制,rowSpan用于增加列的高度.这是我目前的中间结果:新的演示.新的演示工作在Internet Explorer 9/8,Firefox和Opera中已经非常出色.在基于Webkit的浏览器(谷歌浏览器和Safari)中,它仍然具有上面列出的限制(具有多头的列标题必须具有相同的大小并且不可调整大小).该演示看起来很好有限制,它在基于Webkit的Web浏览器中看起来很好.不过,你可以看到排序时间的进展.

我打算增加用于调整基于列的可调整大小的区域的高度演示从答案.因为还支持在列标题上使用许多标题.也支持ColumnChooser或showCol/hideCol.我现在最感兴趣的是找到一种清晰的方法,如何rowSpan在基于Webkit的浏览器(谷歌浏览器和Safari)中使用多行列标题.可能其他人会找到解决方案吗？这是我决定在这里分享未完成结果的主要原因.

更新3:jqGrid 的主要代码中包含了jqGrid代码的更改(请参阅此处).我提高了我在这里描述的解决这个和这个演示.如果增加列宽,第二个演示会增加网格宽度.我个人喜欢这种行为.

更新4:您可以在此处看到演示的下一个版本.它有一个布尔选项(参数useColSpanStyle),它定义是否colspan应该使用它.使用false参数值,结果如下.