检查单选按钮 onload 并使用 jquery 相应地展开树视图

Check a radiobutton onload and expand the treeview accordingly using jquery

我有一个使用 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>

我需要的是,加载要检查的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 级节点方面工作得很好。尽管图像(+ 或 -)没有改变。我怎样才能做到这一点

提前致谢!!

查看了tree view document,发现需要打开的li只需要加上class="open"就可以了。这将处理所有其他事情,例如添加图像等。

另外,您是在单个单选按钮上进行操作,因此不需要遍历所有按钮然后选择您想要的按钮。相反,使用 jQuery 选择器只获取您的单选按钮并对其进行操作。

使用下面的代码-

HTML : 添加 css class 到你的第一级和第二级 lis

<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 class

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