ztree，实现父子checkbox关联

最新推荐文章于 2022-09-09 13:37:07 发布

cacalili

最新推荐文章于 2022-09-09 13:37:07 发布

阅读量1.3k

点赞数

分类专栏： ztree 文章标签： ztree

本文链接：https://blog.csdn.net/cacalili/article/details/79097106

版权

ztree 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

应用场景：做权限管理，报表功能下面有周报表，月报表，季报表，年报表，勾选报表功能自动勾选其下的四个功能，勾选报表功能下的任一个功能以上，自动勾选报表功能，然后把id传到后台，进行你想做的操作

js及css如下（我用的是v3版）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>权限管理</title>
<link rel="stylesheet" href="${ctx}/style/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${ctx}/js/ztree/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${ctx}/js/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){

   var setting = {
              check: {
                   enable: true
               },
               data: {
                   simpleData: {
                       enable: true
                   }
               }
           };

      var zNodes =[
           { id:1, pId:0, name:"随意勾选 1", open:true},
           { id:11, pId:1, name:"随意勾选 1-1", open:true},
           { id:111, pId:11, name:"随意勾选 1-1-1"},
           { id:112, pId:11, name:"随意勾选 1-1-2"},
           { id:12, pId:1, name:"随意勾选 1-2", open:true},
           { id:121, pId:12, name:"随意勾选 1-2-1"},
           { id:122, pId:12, name:"随意勾选 1-2-2"},
           { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
           { id:21, pId:2, name:"随意勾选 2-1"},
           { id:22, pId:2, name:"随意勾选 2-2", open:true},
           { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
           { id:222, pId:22, name:"随意勾选 2-2-2"},
           { id:23, pId:2, name:"随意勾选 2-3"}
       ];

           $.fn.zTree.init($("#con"), setting, zNodes);
});

function show(){
   var treeObj=$.fn.zTree.getZTreeObj("con"),
        nodes=treeObj.getCheckedNodes(true),
        for(var i=0;i<nodes.length;i++){
       alert(nodes[i].name）;//得到name
        alert(nodes[i].id); //得到id
        }

}
</script>
</head>
<body>
<div >
<ul id="con" class="ztree"></ul>
</div>
<input type="button" value="修改" class="elite" οnclick="show();" >
</body>
</html>