jQuery ztree实现动态树形多选菜单
我用到的版本ztreecorev3.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> <ulid="treeDemo"class="ztree"style="margin-top:0;width:160px;"> </ul> </div>
js
<scripttype="text/javascript">
$(function(){
$.ajax({
url:'${contextPath}/om/quoteOmRequest.do?flag=init',
data:{
name:'1'//随便写的，传入后台的值
},
type:'post',
traditional:true,
success:function(data){
vardataObj=eval(data);
varzTreeObj;
varsetting={
data:{
simpleData:{
enable:true,
/*idKey:"id",
pIdKey:"pId"*/
}
},
check:{
enable:true,
chkboxType:{"Y":"","N":"s"}//Y:勾选（参数：p:影响父节点），N：不勾（参数s：影响子节点）[p和s为参数，参数都不写""为全不影响]
},
callback:{
onCheck:
function(){
varzTree=$.fn.zTree.getZTreeObj("treeDemo");
varcheckCount=zTree.getCheckedNodes(true);
varclasspurview="";
for(vari=0;i<checkCount.length;i++){
classpurview+=checkCount[i].id+","//存入数据的id，比如这种形式"1,2,5,"后台截取下
}
/*alert(classpurview);*/
},
},
view:{
showLine:true,
showIcon:true,
dblClickExpand:true
},
};
varzNodes=dataObj;
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
});
},
error:function(){
alert("异常！");
}
});
});
</script>
后台部分可以参考2延迟加载
2、延迟加载ztree
jsp一样的，js有所有区别，这个参考了官方api
<scripttype="text/javascript">
varsetting={
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
},
callback:{
beforeClick:beforeClick,
}
};
functionfilter(treeId,parentNode,childNodes){
if(!childNodes)returnnull;
for(vari=0,l=childNodes.length;i<l;i++){
childNodes[i].name=childNodes[i].name.replace(/\.n/g,'.');
}
returnchildNodes;
}
functionbeforeClick(treeId,treeNode){
if(!treeNode.isParent){
alert("请选择父节点，此节点是根节点...");
returnfalse;
}else{
returntrue;
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"),setting);
});
</script>
后台部分，也包含了1的后台，先看核心代码，这个用的struts，哪个框架都差不多。
Stringflag=request.getParameter("flag");
if(flag.equals("init")){//直接加载ztree
List<Inner>list=getTrees();//得到所有节点
try{
convertListToJson(list);
}catch(Exceptione){
e.printStackTrace();
}
}elseif(flag.equals("ajax")){//延迟加载ztree
Stringid=request.getParameter("id");
if(id==null){//第一次进入初始化父节点
List<Inner>list=newArrayList<OmRequestImpl.Inner>();
Innerin1=getById(1);
Innerin5=getById(5);
list.add(in1);
list.add(in5);//测试用的，得到初始化0级父节点，应该从数据库中获取。
try{
convertListToJson(list);
}catch(Exceptione){
e.printStackTrace();
}
}else{//根据父节点id加载对应的子节点
List<Inner>list=getChilds(Integer.valueOf(id));//通过父id取得子节点集合，测试就自己写个方法，应该从数据库中获取。
try{
convertListToJson(list);
}catch(Exceptione){
e.printStackTrace();
}
}
}
这里涉及了一些方法，我为了测试方便自己写了个测试bean，正式的直接从数据库中获取。下面是bean及一些小方法。
publicclassInner{
privateIntegerid;
privateIntegerpId;//指向父节点id
privateStringname;//显示的内容
privateStringisParent;//是否是父节点
publicInner(){
this.isParent="false";
}
publicStringgetIsParent(){
returnisParent;
}
publicvoidsetIsParent(StringisParent){
this.isParent=isParent;
}
publicIntegergetpId(){
returnpId;
}
publicvoidsetpId(IntegerpId){
this.pId=pId;
}
publicIntegergetId(){
returnid;
}
publicvoidsetId(Integerid){
this.id=id;
}
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
}
}
//--将运行结果用json字符返回客户端
publicvoidconvertListToJson(List<?>list)throwsException{
JSONArrayjson=JSONArray.fromObject(list);
response.setHeader("Cache-Control","no-cache");
response.setContentType("text/html;charset=UTF-8");
PrintWriterwriter;
writer=response.getWriter();
writer.write(json.toString());
writer.close();
}
这些方法可忽略，测试用的，可通过数据库获取
publicList<Inner>getTrees(){
Innerin=newInner();
in.setId(1);
in.setpId(0);
in.setIsParent("true");
in.setName("父节点1");
Innerin1=newInner();
in1.setId(2);
in1.setpId(1);
in1.setName("子节点11");
in1.setIsParent("true");
Innerin2=newInner();
in2.setId(3);
in2.setpId(1);
in2.setName("子节点12");
Innerin3=newInner();
in3.setId(4);
in3.setpId(2);
in3.setName("子节点111");
Innerin4=newInner();
in4.setId(5);
in4.setpId(0);
in4.setIsParent("true");
in4.setName("父节点2");
Innerin5=newInner();
in5.setId(6);
in5.setpId(5);
in5.setName("子节点21");
List<Inner>list=newArrayList<Inner>();
list.add(in);
list.add(in1);
list.add(in2);
list.add(in3);
list.add(in4);
list.add(in5);
returnlist;
}
publicInnergetById(Integerid){
List<Inner>list=getTrees();
for(Innerinner:list){
if(id==inner.getId()){
Innerin=inner;
returnin;
}
}
returnnull;
}
publicList<Inner>getChilds(Integerid){
List<Inner>list=getTrees();
List<Inner>result=newArrayList<OmRequestImpl.Inner>();
for(Innerinner:list){
if(id.intValue()==inner.getpId().intValue()){
result.add(inner);
}
}
returnresult;
}
更多关于ztree控件的内容，请参考专题《jQuery插件ztree使用汇总》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。