5

グループ化を実装するグリッドがありますが、groupText: 領域に表示される詳細を拡張したいと考えています。理想的には、そのグループ化に関するデータを取得し、そのグループ行にグループ名 ({0} デフォルト値) とともに表示できます。

つまり、私が達成しようとしているのは、グループ名だけでなく、JSON フィードに含まれる他のデータ項目もグリッドに表示する方法です。

私の検索では、これを達成できる人が不足しているようですが、誰かがこの設定を拡張し、この領域をフォーマットするためのアクセスを提供することに光を当ててくれることを願っています.

4

1 に答える 1

8

あなたの質問は興味深いと思いますが、実装は簡単ではありません。回答では、グループ化の集計行でカスタム フォーマッタを使用する方法を前に示しました。

デモでは、グループ化テキストのカスタム フォーマットを実装する方法を確認できます。デモでは次のように表示されます。

ここに画像の説明を入力

実装は、両方の目的に使用できるカスタム フォーマッタの実装のみで構成されます。対応する列の内容の書式設定と、列によるグループ化の場合のグループ化テキストの書式設定です。コードは少しトリッキーですが、すべてが理解できることを願っています。このコードは、入力パラメーターの違いを使用して、フォーマッターを呼び出して列の内容をフォーマットするか、グループ化テキストをフォーマットするかを定義します。

"(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]), // 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;
}

更新: デモの修正版はこちらです。$.fn.fmatter現在 jqGrid メソッドから削除されている代わりに使用し$.fmatter.util.DateFormatます。

于 2012-05-29T19:32:06.727 に答える