JQGrid Grouping GroupText 格式化和修改 [英] JQGrid Grouping GroupText formatting and modification

问题描述

我有一个实现分组的网格，但想扩展显示在 groupText: 区域中的详细信息.理想情况下，我可以获取有关该分组的数据并使用组名({0} 默认值)显示在该组行中.

换句话说，我想要实现的是一种方法，不仅可以显示组名，还可以将 JSON 提要中包含的其他一些数据项显示到网格中.

我的搜索似乎缺少任何能够实现此目标的人，但我希望有人能对扩展此设置并提供对该区域进行格式化的访问有所了解.

解决方案

我觉得你的问题很有趣，但实现并不简单.在 可用于两个目的:在按列分组的情况下，对相应列的内容进行格式化和分组文本的格式化.代码有点棘手，但我希望所有人都能遵循它.代码通过输入参数的不同来定义是调用格式化程序来格式化列内容还是格式化分组文本.

获取(test4,test7)"等文本的部分代码在使用大量行的情况下效果不佳，但它可以工作.

以下是日期"列的格式化程序代码，通常与预定义的 formatter: 'date' 一起使用.我在部分代码中调用了原始日期格式化程序，但用于分组文本更复杂的代码:

formatter: function (cellval, opts, rowObject, action) {var fullOpts = $.extend({}, $.jgrid.formatter.date, opts),formattedDate = $.fmatter.util.DateFormat('Y-m-d', cellval, 'd-M-Y', fullOpts),groupIdPrefix = opts.gid + "ghead_",groupIdPrefixLength = groupIdPrefix.length,month = Number(cellval.split('-')[1]),//输入格式 'Y-m-d'名称= []，数据，我，l，项目；//测试 opts.rowId 是否以 opts.gid + "ghead_" 和整数开头//并且 rowObject 是数组，动作是未定义的.if (opts.rowId.substr(0, groupIdPrefixLength) === groupIdPrefix && typeof action === "undefined") {//自定义组头格式//我们只是通过测试月份来模拟一些登录 >9//下一个代码片段无效，但可以使用//如果组数和本地数据不是很多数据 = $(this).jqGrid("getGridParam", "data");for (i = 0, l = data.length; i < l; i++) {项目=数据[i]；if (item.invdate === cellval) {名称.push(item.name);}}return (month > 9 ? ('

更新:演示的固定版本是 这里.它使用 $.fn.fmatter 而不是当前从 jqGrid 方法中移除的 $.fmatter.util.DateFormat.

I have a grid that implements grouping but would like to expand on the details that display in the groupText: area. Ideally I would be able to take data about that grouping and display in that group row with the group name ({0} default value).

In other words what I am trying to achieve is a way to display not only the group name but also some other data items contained in the JSON feed to the grid.

My searching seems to be coming up short on anyone being able to achieve this but I'm hoping someone can shed some light on expanding this setting and providing access to formating this area.

解决方案

I find your question interesting, but the implementation is not simple. In the answer I showed before how one could use custom formatter in summary rows of the grouping.

In the demo you can see how to implement custom formatting of the grouping text. The demo display the following:

The implementation consist just from the implementation of the custom formatter which can be used for both purpose: formatting of the content of the corresponding column and formatting of the grouping text in case of grouping by the column. The code is a little tricky, but I hope that all will be able follow it. The code use the differences of the input parameters to define whether the formatter will be called to format the column content or to format the grouping text.

One part of the code which get the texts like "(test4,test7)" is not so effective in case of the usage of large number of rows, but it works.

Below is the code of formatter of the "Date" column which would by typically used with the predefined formatter: 'date'. I called in the part of the code the original Date-formatter, but used for the the grouping text more sophisticated code:

formatter: function (cellval, opts, rowObject, action) {
    var fullOpts = $.extend({}, $.jgrid.formatter.date, opts),
        formattedDate = $.fmatter.util.DateFormat('Y-m-d', cellval, 'd-M-Y', fullOpts),
        groupIdPrefix = opts.gid + "ghead_",
        groupIdPrefixLength = groupIdPrefix.length,
        month = Number(cellval.split('-')[1]), // input format 'Y-m-d'
        names = [], data, i, l, item;

    // test wether opts.rowId start with opts.gid + "ghead_" and integer
    // and rowObject is the array and action is undefined.

    if (opts.rowId.substr(0, groupIdPrefixLength) === groupIdPrefix && typeof action === "undefined") {
        // custom formating of the group header
        // we just simulate some login by testing of the month > 9

        // the next code fragment is not effective, but it can be used
        // in case of not so large number of groups and the local data
        data = $(this).jqGrid("getGridParam", "data");
        for (i = 0, l = data.length; i < l; i++) {
            item = data[i];
            if (item.invdate === cellval) {
                names.push(item.name);
            }
        }

        return (month > 9 ? ('<span class="ui-icon ui-icon-alert" style="float: left;"></span>' +
            '<span style="color:tomato; margin-left: 5px;">') : "<span>") +
            formattedDate + ' (' + names.join() + ')</span>'
    }
    return formattedDate;
}

UPDATED: The fixed version of the demo is here. It uses $.fn.fmatter instead of currently removed from jqGrid method $.fmatter.util.DateFormat.

这篇关于JQGrid Grouping GroupText 格式化和修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！