树视图复选框 展开折叠

Tree View Checkbox Expand collapse

本文关键字：折叠 复选框 视图      更新时间：2023-09-26

我试图添加扩展折叠效果，但它不起作用:(

Here is my fiddle

http://jsfiddle.net/Pervez/udc8f/6/

编辑：

我还想将这些"li"并排放置在两列中

  1. 您的id='chk_7''有一个额外的'。 你可以在jsfiddle语法高亮显示中清楚地看到它。
  2. 您最好将复选框包装在标签内（将使标签单击作为复选框单击工作）
  3. 它的效果更好一些，但仅当您单击<li>而不是复选框时。

还有其他几个小错误，还有一些错误仍然存在。你最好练习调试（即设置断点、单步执行代码等）。我更改了它以处理复选框单击和此处的一些修复：http://jsfiddle.net/jjfaB/4/。它仍然不完美，但你应该做自己的调试......

这是我为您制作的树视图的简单示例。它基本上显示了如何组织代码。如果你看不清它，你怎么能操纵它。

超级简单的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="utf-8" />
      <title></title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
      <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
      <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
      <script>
    $(document).ready(function(){
            $('.parent >ul').each(function(){ $(this).hide();});
            $('.parent >label').click(function(){
               $(this).parent().find('ul').each(function(){  
                  $(this).toggle();
               });
            });
    });
  </script>
</head>
<body>
<ul>
    <li class='parent'>
        <label value="*">*</label><input type="checkbox" value="" />
        <ul>
           <li><input type="checkbox" value="" class="child"/></li>
           <li><input type="checkbox" value="" class="child"/></li>
           <li><input type="checkbox" value="" class="child"/></li>
        </ul>
    </li>
    <li class='parent'>
        <label value="*">*</label><input type="checkbox" value="" />
        <ul>
            <li><input type="checkbox" value="" class="child"/></li>
            <li><input type="checkbox" value="" class="child"/></li>
        </ul>
    </li>
<ul>
</body>
</html>

您可以增强到n级节点，动画，Id明智的检索，每个级别的不同颜色，什么不是..

我已经将jstree用于我的一个项目。 http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/4_themes.html..检查它是否对您有帮助。

相关文章：