前段时间用了js的插件dtree,确实是比较好上手,但是遗憾的是没有多选框,网上也看到了关于多选框的扩展,但要么没有办法动态的删除和扩展节点,要么节点上下级的级联有问题,或者只支持两级菜单级联……本文主要是基于dtree的基本功能,实现了以下功能:
1、增加了多选框。
2、增加了多选框的级联操作,当点击当前多选框时,其下级(无限级)所有多选框状态与当前点击的多选框保持一致;如果选中当前多选框,其所有上级多选框均被选中;取消当前多选框的选中状态,如果其同级所有菜单都未选中则取消其上级菜单的选中状态,并一直级联到顶层菜单。
3、支持返回所有选中菜单的功能。
修改方法(也可以修改dtree.js文件,但是由于我本地牵扯到后台加载二级管理员已有菜单在前台默认选中,并支持动态增删功能,所以没有写在dtree.js里面):
1、dtree加载部分:
<script type="text/javascript"> var d = new dTree('d'); d.add(0,-1,'<input type="checkbox" name="dTreeChBox" style="display:none;" value="-1" id="0"/>'+'功能列表'); $.ajax({ url:"user_loadMenu.do", type:"post", cache:false, async:false, dataType:"json", error:function(xhr,status,err){ alert("系统错误,稍后重试!!"); }, success:function(data){ for(var i = 0; i < data.length; i++){ d.add(data[i].nodeId,data[i].pNodeId,'<input type="checkbox" onclick="clickCheckBox(this,true)" name="dTreeChBox" style="VERTICAL-ALIGN:middle;WIDTH:18px;HEIGHT:18px;" value="'+data[i].pNodeId+'" id="'+data[i].nodeId+'"/>'+data[i].nodeName,data[i].linkUrl,data[i].title,data[i].target); } } }); document.write(d); d.openAll(); </script>
2、多选框事件部分:
function clickCheckBox(obj,flag){ //flag用于保持所有其子节点与当前节点状态相同(由于牵扯到递归,所以用flag只对点击时的当前节点有效) if(flag){ subSameWithParent(obj); } var flag = false; //alert($("[name=dTreeChBox]:checked").length); //选中所有其父节点 var id = $(obj).attr("id"); var pId= $(obj).val(); if($(obj).attr("checked")){//当前节点选中,如果其父节点没有选中,则选中父节点 if(!$("#"+pId).attr("checked") && pId != 0){ $("#"+pId).attr("checked",true); clickCheckBox($("#"+pId)[0],flag); } }else{//取消当前节点选中状态,如果所有同级节点都未选中,更改父节点为未选中状态 if($("[name=dTreeChBox][value="+pId+"]:checked").length == 0){ if($("#"+pId).attr("checked") && pId != 0){ $("#"+pId).attr("checked",false); clickCheckBox($("#"+pId)[0],flag); } } } }
//点击当前节点,所有其下级(无限级)菜单状态与其保持一致的代码 function subSameWithParent(ob){ var id = $(ob).attr("id"); $("[name=dTreeChBox][value="+id+"]").attr("checked",$(ob).attr("checked")); if($("[name=dTreeChBox][value="+id+"]").length != 0){ for(var i = 0; i < $("[name=dTreeChBox][value="+id+"]").length ; i++){ var subObj = $("[name=dTreeChBox][value="+id+"]")[i]; subSameWithParent(subObj); } } }
3、获取选中菜单节点ID的代码:
var str = ""; for(var i = 0; i < $("[name=dTreeChBox]:checked").length; i++){ str += $("[name=dTreeChBox]:checked").eq(i).attr("id")+","; } str = str.substring(0,str.length-1);
返回的str为ID的以逗号分隔的字符串,可以通过ajax或是将其赋值给dom元素在通过form表单提交,由后台做统一处理。
相关推荐
stree增强了dtree,通过操作dom,支持点击父节点去数据库查询并生成子节点
js dtree无限级扩展的树形菜单,核心 基于dree菜单插件,自带有api说明,整体菜单风格经典,带有 -号风格的经典树形菜单控件,十分漂亮的家长,通用性强,文件完整,具体效果请参见测试截图。
Dtree目录树的总结.doc 菜单的参数说明.txt 扩展.doc dtree例子
Phoca VirtueMart 类别 dTree 模块是 Joomla! CMS 扩展。 在模块位置显示 VirtueMart 类别树的模块。
Dtree-一种简单的纯...安装下载代码,然后运行: python setup.py buildsudo python setup.py install您还可以通过以下方式使用pip从PyPI安装: sudo pip install dtree或通过以下方式从早期版本升级: sudo pip ins
使用皮质内微电极对神经数据进行细胞外记录已显示出对医学和康复神经科学应用(如脑机接口)的希望。 这种方法的主要并发症是:1)巨大的带宽和功率要求,因为系统需要扩展到下一代神经技术所需的成百上千个通道; 2...
基于Layui的后台管理系统模板,扩展Layui原生UI样式,整合第三方开源组件,提供便捷快速的开发方式,延续LayuiAdmin 的设计风格,持续完善的样式与组件的维护,基于异步Ajax的菜单构建,相对完善的多标签页,单标签...
2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户...
2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户...
解决了树的深度可扩展,度不受限制,保证高运算效率等问题。并深入解析了结点编号的获取方法,子结点与父结点的关联技术等关键技术。算法适用于层次结构关系的信息组织和检索,其有效性已在相关应用系统开发中得到...