带checkbox的dtree

最新推荐文章于 2024-04-17 10:03:41 发布

xiaobaoxiaodun

最新推荐文章于 2024-04-17 10:03:41 发布

阅读量7.5k

点赞数 5

分类专栏： javascript 文章标签： input stylesheet function xhtml 数据库数据结构

本文链接：https://blog.csdn.net/xiaobaoxiaodun/article/details/6844314

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

dtree是一个被广泛使用的js树形控件，不过原生的dtree没有提供带checkbox的处理，在有些应用中，是需要的，对此，我给了两种解决方案，

方案1：在设计数据库时，添加一个列，标示该行数据的性质，如100，代表根数据，100001就表示根数据下的一个子数据，而100001001则表示根数据的一个孙子数据，相信大家应该能明白这种数据库设计技巧。好，当数据库中有了这列标示数据关系的列时，在构造树时，就可以这样处理：

<!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>
  <title> new document </title>  
  <link rel="StyleSheet" href="dtree.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
 <script type="text/javascript" src="dtree.js"></script>
 <script type="text/javascript">
 <!--
     $(function(){
            d = new dTree('d');
           //d.config.inOrder = true;
           d.add(0,-1,"家");
          d.add(1,0,"<input type='checkbox' name='where' value='2' id='t100'>爸爸");
          d.add(2,0,"<input type='checkbox' name='where' value='2' id='t101'>妈妈");
         d.add(3,2,"<input type='checkbox' name='where' value='2' id='t101001'>姐姐");
        //d.add(4,3,"胖胖");
         d.add(5,1,"<input type='checkbox' name='where' value='2' id='t100001'>小冬");
        d.add(6,2,"<input type='checkbox' name='where' value='2' id='t101002'>小宝");
        d.add(7,0,"<input type='checkbox' name='where' value='2' id='t103'>其他");
        d.add(8,2,"<input type='checkbox' name='where' value='2' id='t101003'>女婿");
        d.add(9,7,"<input type='checkbox' name='where' value='2' id='t103001'>其他2");
        d.add(10,5,"<input type='checkbox' name='where' value='2' id='t100001001'>小小冬");
        d.add(11,10,"<input type='checkbox' name='where' value='2' id='t100001001001'>小小小冬");
        window.d=d;
       $("#tree").html(d.toString());

      $("input[type='checkbox']").click(function(){
              var pId=this.id;
             $("input[id*='"+pId+"']").attr("checked",this.checked);
       });
  }); 

  
 //-->
 </script>
 </head>

 <body>
  <div id="tree"></div>
 </body>
</html>

如图：

方法2：利用递归实现。在一般的数据库设计这种主从关系的数据结构时，都是利用一个pid字段指向自己的父数据，这时就需要这样处理：

<!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>
  <title> new document </title>  
  <link rel="StyleSheet" href="dtree.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
 <script type="text/javascript" src="dtree.js"></script>
 <script type="text/javascript">
 <!--
     $(function(){
            d = new dTree('d');
           //d.config.inOrder = true;
           d.add(0,-1,"家");
          d.add(1,0,"<input type='checkbox' name='where' value='2' id='t1' pId='t0'>爸爸");
          d.add(2,0,"<input type='checkbox' name='where' value='2' id='t2' pId='t0'>妈妈");
         d.add(3,2,"<input type='checkbox' name='where' value='2' id='t3' pId='t2'>姐姐");
        //d.add(4,3,"胖胖");
         d.add(5,1,"<input type='checkbox' name='where' value='2' id='t5' pId='t1'>小冬");
         d.add(6,2,"<input type='checkbox' name='where' value='2' id='t6' pId='t2'>小宝");
        d.add(7,0,"<input type='checkbox' name='where' value='2' id='t7' pId='t0'>其他");
        d.add(8,2,"<input type='checkbox' name='where' value='2' id='t8' pId='t2'>女婿");
        d.add(9,7,"<input type='checkbox' name='where' value='2' id='t9' pId='t7'>其他2");
        d.add(10,5,"<input type='checkbox' name='where' value='2' id='t10' pId='t5'>小小冬");
        d.add(11,10,"<input type='checkbox' name='where' value='2' id='t11' pId='t10'>小小小冬");
         window.d=d;
        $("#tree").html(d.toString());

        $("input[type='checkbox']").click(function(){
                    var pId=this.id;
                   var checked=this.checked;
                  findChild(pId);
                  function findChild(pId){
                        var children=$("input[pId='"+pId+"']").attr("checked",checked);
                        if(children.length>0){
                               children.each(function(){
                                   findChild(this.id);
                       });
                 }
         }
      });
  });
 //-->
 </script>
 </head>

 <body>
  <div id="tree"></div>
 </body>
</html>

附dtree.js的下载地址：http://www.destroydrop.com/javascripts/tree/dtree.zip

xiaobaoxiaodun

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
带checkbox的dtree

dtree是一个被广泛使用的js树形控件，不过原生的dtree没有提供带checkbox的处理，在有些应用中，是需要的，对此，我给了两种解决方案，方案1：在设计数据库时，添加一个列，标示该行数据的性质，如100，代表根数据，100001就表示根数据下的一个子数据，而100001001则表示根数据的一个孙子数据，相信大家应该能明白这种数据库设计技巧。好，当数据库中有了这列标示数据关系的列时，在构
复制链接

扫一扫