jQuery ztree实现动态树形多选菜单实现动态树形多选菜单
我用到的版本ztree core v3.5.24，需要引入的js，css，jquery.js，jquery.ztree.core.js，jquery.ztree.excheck.js（多选框可
选），zTreeStyle.css。
需要注意的指向父节点的pId，我开始写的是pid一开始没注意，默认的是pId，当然可以pIdKey指定自定义的（未测）。还有
如果图片没显示肯定是没引入img图片，记得写好路径。
1、先介绍初始化加载、先介绍初始化加载ztree
jsp
<div >
<ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">
</ul>
</div>
js
<script type="text/javascript">
$(function(){
$.ajax({
url: '${contextPath}/om/quoteOmRequest.do?flag=init',
data: {
name : '1' //随便写的，传入后台的值
},
type:'post',
traditional: true,
success: function(data){
var dataObj = eval(data);
var zTreeObj;
var setting = {
data: {
simpleData: {
enable:true,
/* idKey: "id",
pIdKey: "pId" */
}
},
check: {
enable: true,
chkboxType :{ "Y" : "", "N" : "s" } //Y:勾选（参数：p:影响父节点），N：不勾（参数s：影响子节点）[p 和 s 为参数，参数都不写""为全不影响] },
callback: {
onCheck:
function() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var checkCount = zTree.getCheckedNodes(true);
var classpurview = "";
for(var i=0;i<checkCount.length;i++) {
classpurview += checkCount[i].id+"," //存入数据的id，比如这种形式"1,2,5," 后台截取下
}
/* alert(classpurview); */
} ,
},
view: {
showLine: true,
showIcon: true,
dblClickExpand: true
},
};
var zNodes = dataObj;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
},
error : function() {
alert("异常！");
}
});
});
</script>
后台部分可以参考2延迟加载
2、延迟加载、延迟加载ztree
jsp一样的，js有所有区别，这个参考了官方api
资源评论
