jQuery ztree实现动态树形多选菜单

2020-05-29 07:06:46易采站长站整理

我用到的版本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


<script type="text/javascript">
var setting = {
view: {
selectedMulti: false
},
check: {
enable: true,
chkboxType :{ "Y" : "", "N" : "s" } //Y:勾选(参数:p:影响父节点),N:不勾(参数s:影响子节点)[p 和 s 为参数,参数都不写""为全不影响] },
async: {
enable: true,
url:"${contextPath}/om/quoteOmRequest.do?flag=ajax",
autoParam:["id"],
dataFilter: filter