Проверьте загрузку radobutton и разверните дерево, используя jquery

Question

У меня есть дерево, которое реализовано с помощью jquery Treeview версии 1.4. TreeView осуществляются, как показано ниже

<div id="container"> 
    <ul id="outerlist"> 
     <li> 
     <span>level-1</span> 
     <ul> 
      <li> 
       <span>level-2</span> 
       <ul> 
        <li> 
        <input type="radio" name="lastnode" value="125" onclick="somefunction()" /> 
        <span>lastnodetext</span> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
</div> 

Что мне нужно, OnLoad LastNode радиокнопки, чтобы проверить и все его родительские узлы должны быть расширены (примечание: есть несколько уровней и радиокнопки в дереве).

Ниже приведен код, который я использовал добиться этого

$('#container').find(':radio').each(function (index, value) { 
var $this = $(this); 
if ($this.val() != undefined && $this.val() == "125") { 
    $this.attr('checked', 'checked'); 
    $(this).parents('ul').show(); 
    return false; 
}}); 

Этот код работает прекрасно с точки зрения выбора радиокнопку и расширения узлов уровня 2 и уровня 1. Хотя изображение (+ или -) не изменяется. Как я могу достичь этого

Спасибо заранее!

Answer 1

Я прошел через tree view document и обнаружили, что вам просто нужно добавить class="open" для li, который должен быть открыт. Это будет обрабатывать все другие вещи, такие как добавление изображений и т. Д.

Также вы делаете свою операцию на одной радиокнопке, поэтому вам не нужно перебирать все, а затем выберите нужный. Вместо этого используйте селектор jQuery, чтобы получить только ваш переключатель и выполнить операцию на нем.

Использование ниже код -

HTML: добавить класс CSS для вашего первого уровня и второго уровня li ов

<div id="container"> 
    <ul id="outerlist"> 
     <li class="firstLevel"> 
     <span>level-1</span> 
     <ul> 
      <li class="secondLevel"> 
       <span>level-2</span> 
       <ul> 
        <li> 
        <input type="radio" name="lastnode" value="125" onclick="somefunction()" /> 
        <span>lastnodetext</span> 
        </li> 
       </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
</div> 

JQuery: найти первый уровень и второй уровень Li, чтобы добавить open класс CSS к нему.

var $radio = $('#container input[type="radio"][value="125"]'); 
$radio.attr('checked',true); 
$radio.closest('.firstLevel').addClass('open'); 
$radio.closest('.secondLevel').addClass('open');