Пользовательский css-класс jqgrid treegrid для каждого уровня дерева - PullRequest
Новая
       28

Пользовательский css-класс jqgrid treegrid для каждого уровня дерева

4 голосов
/ 28 февраля 2012

У меня глубокое дерево, и пользователю сложно различить уровни.Можно ли иметь собственные классы CSS для каждого уровня?Например, firstlike h1 и жирный, второй жирный ...

1 Ответ

7 голосов
/ 28 февраля 2012

Мне интересен вопрос, но я думаю, что лучше использовать отдельные значки для узлов дерева.Если вам нужно установить стиль CSS для каждой строки, я могу переслать ответ и этот .Вам просто нужно изменить критерии тестирования в демоверсиях, чтобы протестировать содержимое скрытого столбца level.

Итак, я создал демонстрационную версию , которая демонстрирует, как можно устанавливать отдельные значки для уровня узла.:

enter image description here

Прежде всего, я должен упомянуть, что TreeGrid поддерживает отдельные иконки для листьев из коробки.Вы можете просто добавить свойство icon к опубликованным данным.Значением свойства должен быть класс CSS, который будет добавлен к div, который представляет значок.Например icon: "ui-icon-star".Стандартный класс для значка - «ui-icon-radio-off».Кроме того, div получает классы "ui-icon tree-leaf treeclick".Поэтому, если вы найдете нужную вам иконку в стандартных значках jQuery UI , то изменение иконки листа будет очень простым.

У нествольных узлов дерева есть две иконки: однав свернутой форме и другой в расширяющейся форме.Нет простого способа изменить значки для конфигурации jqGrid, но вы можете реализовать это требование, написав дополнительный код JavaScript внутри loadComplete и с учетом цепочки (перезаписи или подкласса) методов expandNode и collapseNode, таких какЯ предложил здесь .

В демоверсии я просто изменил значки узлов дерева верхнего уровня.Таким же образом вы можете менять иконки на любом другом уровне.Ниже вы найдете самые важные части кода из моей демонстрации: 

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;
    }
});

ОБНОВЛЕНО : Я немного подумал о проблеме значков дерева и изменил код на новая демонстрация .

Я решил, что было бы более целесообразно определить значки узла дерева точно так же, как для листьев.Поскольку необходимо указать две иконки, можно разделить классы свернутых и развернутых иконок запятыми.Например: 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.

...