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