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();
}
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
- zTree插件,父子级不关联情况下,实现右击全选父级及子级菜单
- zTree:实现单选/取消父子关联等
- zTree:实现单选/取消父子关联等
- bootstrap-treeview 实现全选父节点下所有子节点及反选
- 关联菜单.四级
- 实现在父页面不刷新情况下显示子页面传递的信息
- zTree:实现checkbox、全选、取消全选功能
- ztree树菜单控制展开到任意几级节点的实现方法
- ITOO右击菜单实现
- 右击菜单简单实现
- Ztree实现树形菜单
- zTree树插件--树形菜单
- DataRelation 实现父子表 父子级 Repeater的嵌套使用
- Javascript实现自动无限级关联下拉菜单
- jquery checkbox 全选 反选 子级全选默认选中父级
- ATL 工程下添加右击菜单
- ztree异步加载实现全选功能
- jquery实现复选框打勾全选,其中一个子复选框不勾中,则不全选。所有子复选框全勾中则又全选。
- HTML基础
- 如何查看小米手机的IP地址和MAC地址
- 浏览器URL编码
- ubuntu本地软件源制作
- maven项目svn的导入导出
- zTree插件,父子级不关联情况下,实现右击全选父级及子级菜单
- iFunk新动向,从科技到生活
- 阿里云centos环境之被dos,syn攻击策略和排查方法,持续更新<九>
- 支持向量机原理(二) 线性支持向量机的软间隔最大化模型
- Java实现MultivariateGaussian
- 12.11 CODING COFFEE菜单页面
- 三种编程命名规范
- 产品经理不再纸上谈兵——解析产品的评论排序规则
- D3D11 骨骼动画(基于MD5格式)