应用场景:做权限管理,报表功能下面有周报表,月报表,季报表,年报表,勾选报表功能自动勾选其下的四个功能,勾选报表功能下的任一个功能以上,自动勾选报表功能,然后把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>
其中还zNodes可能需要自己拼接,这里不做赘述,可以参考另一篇datagrid动态生成列:http://mp.blog.csdn.net/postedit/79095910,里面拼接columns的方法;show()函数得到id、name,然后根据自己需要的值,进行ajax请求,实现权限修改