今天在做添加权限的功能时,发现如果将权限用树展示出来会得到很好的效果,如下:
其中勾线父级目录会让其子目录也跟着勾选,取消父级目录的勾选同样会让子目录取消勾选。
其中每一个节点的结构如下:
分析一下该节点,有一个class='inverted' ,还有一个value,这个value可以唯一标识当前节点,相当于数据库里面的主键,不会重复(该value是由后台分配而来,这里就不展示后台代码了)。其中有一个自定义的属性data-pid,该属性表明了它有一个父节点,其中父节点的value值为43,如此,通过value和data-pid就构成了一颗树。
具体代码如下:
<script> $(function () { var invertedList = $(".inverted");//获取到所有的节点 //当点击节点的时候 $(".inverted").click(function () { var curId = $(this).val(); //或取该节点的value值 //通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase //如果使用attr方法获取时,如果当前input中初始化未定义checked属性,则不管当前是否选中,$("#selectAll").attr("checked")都会 返回undefined; var IsChecked = $(this).prop("checked");//获取该节点是否选中,选中为true,否则为false if(IsChecked){ //如果选中 checkedSon(invertedList,curId);//选中该节点时,同时也要选中子节点 }else{ //取消选中 cancelChecked(invertedList,curId); } }); function checkedSon(invertedList,curId) { //遍历所有的节点 for(var i = 0;i < invertedList.length; i++){ var pid = $(invertedList[i]).attr("data-pid");//获取到节点的data-pid值 //如果节点value值和其他节点的data-pid值相等时,则说明该节点有子节点 if(pid == curId){ checkedSon( invertedList,$(invertedList[i]).val());//递归调用 $(invertedList[i]).prop("checked",true);//设置子节点的checked属性为true } } } function cancelChecked(invertedList,curId) { for(var i = 0;i < invertedList.length; i++){ var pid = $(invertedList[i]).attr("data-pid"); if(pid == curId){ cancelChecked( invertedList,$(invertedList[i]).val()) $(invertedList[i]).prop("checked",false); } } } }) </script>
注:上传代码之后发现无法运行,原因是在if判断时,我将注释写在了
if(){ //............将注释写在这儿会报错,具体为什么,不太清楚
}
已修改。