Как программно выбрать скрытые узлы в jsTree? - PullRequest
Новая
       8

Как программно выбрать скрытые узлы в jsTree?

0 голосов
/ 30 апреля 2018

У меня есть jsTree с флажками. Каждый элемент в дереве представляет элемент проверки, который может иметь состояние «новый», «запущен» или «завершен». Состояния добавляются в @class элементов.

Это часть неупорядоченного списка, из которого создается jsTree 

<ul>
    <li class="job started" id="j_09f2fbe4-a7ff-4723-af3d-c54d389d6020" start="March 31, 2018" due="April 12">j_09f2fbe4-a7ff-4723-af3d-c54d389d6020
        <ul>
            <li class="pub new" id="p_939519b7-e500-44b7-9be8-d7535d182b94">ANI22 Web Guide<span class="info float-right"> new: 10  started: 0  done: 0</span>
                <ul>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_DEU">DEU </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_FRE">FRE </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_IND">IND </li>
                <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_JPN">JPN     </li>
                <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_KOR">KOR </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_NLT">NLT </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_POR">POR </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_RUS">RUS </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_SPA">SPA </li>
                    <li class="lang new" id="p_939519b7-e500-44b7-9be8-d7535d182b94_ZHS">ZHS </li>
                </ul>
            </li>
            <li class="pub done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3">ANIUSB Matrix Web Guide<span class="info float-right"> new: 0  started: 0  done: 10</span>
                <ul>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_DEU">DEU </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_FRE">FRE </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_ITA">ITA </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_JPN">JPN </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_KOR">KOR </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_NLT">NLT </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_POR">POR </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_RUS">RUS </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_SPA">SPA </li>
                    <li class="lang done" id="p_72ec6459-2d08-4e11-8002-26d5ba5a3ef3_ZHS">ZHS </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Теперь я хочу установить флажки для всех узлов, которые имеют класс .done. Этот код должен вызываться кнопкой на панели инструментов и работать независимо от того, скрыты ли узлы (свернуты) или нет. Но свернутые узлы не видны в HTML и не попадают в список при выборе всех элементов этого класса. 

function selectDone() {
    $('#joblist').jstree(true).select_node('.done');
}

Когда jsTree свернуто (отображаются только элементы списка верхнего уровня), ничего не выбирается, и никакие флажки не ставятся. collapsed jsTree after running selectNode

Когда я расширяю узлы, они выбираются одним и тем же кодом. enter image description here

Я не знаю, как jsTree скрывает свернутые элементы, и я не нашел ни одного метода jsTree для создания выделения на основе класса и затем установки их флажка.

1 Ответ

0 голосов
/ 02 мая 2018

Один из способов сделать это - получить все узлы и перебрать их, чтобы выбрать те, которые имеют класс. 

function selectNodewithClass(sClass) {
    var oTree = $('#jstree_demo_div').jstree(true);
    var oList = oTree.get_json(null, { flat : true });
    oList.forEach(function (node) {
        if (node.li_attr.class.indexOf(sClass) >= 0) {
            oTree.select_node(node)
        }
    });
};

selectNodewithClass("done");

Метод get_json вернет все узлы в дереве. Классы, назначенные тегам li, доступны как li_attr в данных узла дерева.

...