zTree插件,父子级不关联情况下,实现右击全选父级及子级菜单

来源:互联网 发布:mac文件放在桌面 编辑:程序博客网 时间:2024/06/05 07:37
<script>
var setting = {
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {"Y":"","N":""},//父子不关联
chkDisabledInherit:false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: null
}
},
callback:{
                onCheck:onCheck,//单击事件
                onRightClick:onRightClick      //右击事件         
            }
};
var zNodes=${zNodes}
var zTree, rMenu;
$(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            rMenu = $("#rMenu");
        });
  
function onCheck(){
var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
            for(var i=0;i<nodes.length;i++)
            {
           v+=nodes[i].id + ",";  
            }            
             //v是取到的值,可以自己操作
}
  function onRightClick(event,treeId,treeNode){
 
  if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
zTree.cancelSelectedNode();
showRMenu("root", event.clientX, event.clientY);
} else if (treeNode && !treeNode.noR) {
 zTree.selectNode(treeNode);
showRMenu("node", event.clientX, event.clientY);
}
 
  }
  function showRMenu(type, x, y) {
 
$.CurrentDialog.find("#rMenu ul").show();
if (type=="root") {

$.CurrentDialog.find("#m_check").hide();
$.CurrentDialog.find("#m_unCheck").hide();
} else {
$.CurrentDialog.find("#m_check").show();
$.CurrentDialog.find("#m_unCheck").show();
}
rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible","position":"-ms-device-fixed"});


$("body").bind("mousedown", onBodyMouseDown);
}
  function hideRMenu() {
if (rMenu) rMenu.css({"visibility": "hidden"});
$("body").unbind("mousedown", onBodyMouseDown);
}
function onBodyMouseDown(event){
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
rMenu.css({"visibility" : "hidden"});
}
}
function checkTreeNode(checked) {
var nodes = zTree.getSelectedNodes();
if (nodes && nodes.length>0) {
zTree.checkNode(nodes[0], checked, true);
for (var i=0, l=nodes[0].children.length; i < l; i++) {
zTree.checkNode(nodes[0].children[i], checked, true);
}
var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
            for(var i=0;i<nodes.length;i++)
            {
            v+=nodes[i].id + ",";  
            }            
           //v是取到的值,可以自己操作
}
hideRMenu();
}


 

</script>

//css样式设置

<style type="text/css">
div#rMenu {position:absolute; visibility:hidden; top:0; border:1px #c3ced5 solid;background-color: #eaf1f6;text-align:left;padding: 2px;}
div#rMenu ul li{
margin: 1px 0;
padding: 0 5px;
cursor: pointer;
list-style: none outside none;
background-color: #eaf1f6;
}
</style>

//form表单

<form id="pagerForm" action="xxxxx" class="pageForm" data-toggle="validate" method="post" >

<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</form>

阅读全文
0 0
原创粉丝点击