4

私は深い木を持っていて、ユーザーにとってレベルを区別するのは難しいです。レベルごとにカスタムcssクラスを作成することは可能ですか？たとえば、最初のようなh1と太字、2番目の太字..。

4

1 に答える 1

7

質問は面白いと思いますが、ツリーノードには個々のアイコンを使用した方がよいと思います。行ごとにCSSスタイルを設定する必要がある場合は、回答とこれに転送できます。level非表示の列の内容をテストするには、デモのテスト基準を変更する必要があります。

そこで、ノードレベルごとに個々のアイコンを設定する方法を示すデモを作成しました。

ここに画像の説明を入力してください

まず最初に、TreeGridはすぐに使用できるリーフの個々のアイコンをサポートしていることを述べておきます。icon投稿されたデータにプロパティを追加するだけです。divプロパティの値は、アイコンを表すに追加されるCSSクラスである必要があります。たとえばicon: "ui-icon-star"。アイコンの標準クラスは「ui-icon-radio-off」です。さらに、divはクラス「ui-icontree-leaftreeclick」を受け取ります。したがって、標準のjQuery UIアイコンで必要なアイコンを見つけた場合、リーフのアイコンが非常に簡単になるかどうかを変更できます。

非リーフツリーノードには2つのアイコンがあります。1つは折りたたまれた形式で、もう1つは展開された形式です。jqGrid構成ごとにアイコンを変更する簡単な方法はありませんが、ここで提案したようなメソッドのチェーン（上書きまたはサブクラス化）の内部およびloadCompleteそれに関して追加のJavaScriptコードを記述することで要件を実装できます。expandNodecollapseNode

デモでは、トップレベルのツリーノードのアイコンを変更しました。同様に、他のレベルのアイコンを変更できます。以下に、私のデモのコードの最も重要な部分を示します。

var $grid = $("#treegrid"),
    orgExpandNode = $.fn.jqGrid.expandNode,
    orgCollapseNode = $.fn.jqGrid.collapseNode;

$grid.jqGrid({
    ....
    loadComplete: function (data) {
        var item, i, l = data.length || 0;
        for (i = 0; i < l; i++) {
            item = data[i];
            if (!item.isLeaf && (item.level === "0" || item.level === 0)) {
                if (item.expanded) {
                    $("#" + item.id + " div.treeclick")
                        .removeClass("ui-icon-triangle-1-s")
                        .addClass("ui-icon-carat-1-s");
                } else {
                    $("#" + item.id + " div.treeclick")
                        .removeClass("ui-icon-triangle-1-e")
                        .addClass("ui-icon-carat-1-e");
                }

            }
        }
    }
});

$.jgrid.extend({
    expandNode: function (rc) {
        var ret = orgExpandNode.call(this, rc);
        if (!rc.isLeaf && (rc.level === "0" || rc.level === 0)) {
            $("#" + rc._id_ + " div.treeclick")
                .removeClass("ui-icon-triangle-1-s ui-icon-carat-1-e")
                .addClass("ui-icon-carat-1-s");
        }
        return ret;
    },
    collapseNode: function (rc) {
        var ret = orgCollapseNode.call(this, rc);
        if (!rc.isLeaf && (rc.level === "0" || rc.level === 0)) {
            $("#" + rc._id_ + " div.treeclick")
                .removeClass("ui-icon-triangle-1-e ui-icon-carat-1-s")
                .addClass("ui-icon-carat-1-e");
        }
        return ret;
    }
});

更新：ツリーアイコンの問題についてもう少し考え、コードを新しいデモに変更しました。

葉の場合とまったく同じようにツリーノードのアイコンを定義できる方が実用的であると判断しました。2つのアイコンを指定する必要があるため、折りたたみアイコンと展開アイコンのクラスをコンマで区切ることができます。例：icon: "ui-icon-carat-1-e,ui-icon-carat-1-s"。コードは次のように書き直すことができます。

var $grid = $("#treegrid"),
    orgExpandNode = $.fn.jqGrid.expandNode,
    orgCollapseNode = $.fn.jqGrid.collapseNode,
    changeTreeNodeIcon = function (item) {
        var icons, $div, id;
        if (!item.isLeaf && typeof item.icon === "string") {
            icons = item.icon.split(',');
            if (icons.length === 2) {
                id = item[this.p.localReader.id] || item[this.p.jsonReader.id];
                $div = $("#" + $.jgrid.jqID(id) + " div.treeclick");
                if (item.expanded) {
                    $div.removeClass(icons[0])
                        .removeClass("ui-icon-triangle-1-s")
                        .addClass(icons[1]);
                } else {
                    $div.removeClass(icons[1])
                        .removeClass("ui-icon-triangle-1-e")
                        .addClass(icons[0]);
                }
            }
        }
    };

$grid.jqGrid({
    ....
    loadComplete: function (data) {
        var item, i, l = data.length || 0;
        for (i = 0; i < l; i++) {
            item = data[i];
            changeTreeNodeIcon.call(this, item);
        }
    }
});

$.jgrid.extend({
    expandNode: function (rc) {
        var ret = orgExpandNode.call(this, rc);
        changeTreeNodeIcon.call(this[0], rc);
        return ret;
    },
    collapseNode: function (rc) {
        var ret = orgCollapseNode.call(this, rc);
        changeTreeNodeIcon.call(this[0], rc);
        return ret;
    }
});

更新：上記の機能をTreeGridに追加する機能リクエストとプルリクエストを投稿しました。

于 2012-02-28T12:38:57.513 に答える