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

Posted 2023-05-09

【中文标题】检查单选按钮 onload 并使用 jquery 相应地展开树视图

【英文标题】：Check a radiobutton onload and expand the treeview accordingly using jquery

【发布时间】：2015-06-10 12:54:35

【问题描述】：

我有一个使用 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 级节点方面工作得非常好。虽然图像（+ 或 -）没有改变。我怎样才能做到这一点

提前致谢！！

【问题讨论】：

你的 + / - 图片在哪里？

@BhushanKawadkar 位于 1 级和 2 级

我建议您发布代码的 jsFiddle

您是否对图像使用任何 CSS 类？发布 jsfiddle 链接，以便我们以更好的方式为您提供帮助。

@BhushanKawadkar 我正在使用“jquery.treeview.js”和“jquery.treeview.css”版本 1.4

【参考方案1】：

我浏览了tree view document，发现需要打开的li只需要添加class="open"即可。这将处理所有其他事情，例如添加图像等。

此外，您正在对单个单选按钮进行操作，因此无需全部迭代然后选择您想要的。相反，使用 jQuery 选择器只获取您的单选按钮并对其进行操作。

使用下面的代码 -

html : 将 css 类添加到您的第一级和第二级 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 类。

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