我用到的版本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"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",
autoParam:["id"],
dataFilter: filter
},
callback: {
beforeClick: beforeClick,
}
};
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
function beforeClick(treeId, treeNode) {
if (!treeNode.isParent) {
alert("请选择父节点,此节点是根节点...");
return false;
} else {
return true;
}
}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
后台部分,也包含了1的后台,先看核心代码,这个用的struts,哪个框架都差不多。
String flag = request.getParameter("flag");
if(flag.equals("init")){//直接加载ztree
List<Inner> list = getTrees();//得到所有节点
try {
convertListToJson(list);
} catch (Exception e) {
e.printStackTrace();
}
}else if(flag.equals("ajax")){//延迟加载ztree
String id = request.getParameter("id");
if(id==null){//第一次进入初始化父节点
List<Inner> list = new ArrayList<OmRequestImpl.Inner>();
Inner in1=getById(1);
Inner in5=getById(5);
list.add(in1);
list.add(in5);//测试用的,得到初始化0级父节点,应该从数据库中获取。
try {
convertListToJson(list);
} catch (Exception e) {
e.printStackTrace();
}
}else{//根据父节点id加载对应的子节点
List<Inner> list = getChilds(Integer.valueOf(id));//通过父id取得子节点集合,测试就自己写个方法,应该从数据库中获取。
try {
convertListToJson(list);
} catch (Exception e) {
e.printStackTrace();
}
}
}
这里涉及了一些方法,我为了测试方便自己写了个测试bean,正式的直接从数据库中获取。下面是bean及一些小方法。
public class Inner{
private Integer id;
private Integer pId; //指向父节点id
private String name; //显示的内容
private String isParent;//是否是父节点
public Inner(){
this.isParent="false";
}
public String getIsParent() {
return isParent;
}
public void setIsParent(String isParent) {
this.isParent = isParent;
}
public Integer getpId() {
return pId;
}
public void setpId(Integer pId) {
this.pId = pId;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
// -- 将运行结果用json字符返回客户端
public void convertListToJson(List<"Cache-Control", "no-cache");
response.setContentType("text/html; charset=UTF-8");
PrintWriter writer;
writer = response.getWriter();
writer.write(json.toString());
writer.close();
}
这些方法可忽略,测试用的,可通过数据库获取
public List<Inner> getTrees(){
Inner in=new Inner();
in.setId(1);
in.setpId(0);
in.setIsParent("true");
in.setName("父节点1");
Inner in1=new Inner();
in1.setId(2);
in1.setpId(1);
in1.setName("子节点11");
in1.setIsParent("true");
Inner in2=new Inner();
in2.setId(3);
in2.setpId(1);
in2.setName("子节点12");
Inner in3=new Inner();
in3.setId(4);
in3.setpId(2);
in3.setName("子节点111");
Inner in4=new Inner();
in4.setId(5);
in4.setpId(0);
in4.setIsParent("true");
in4.setName("父节点2");
Inner in5=new Inner();
in5.setId(6);
in5.setpId(5);
in5.setName("子节点21");
List<Inner> list=new ArrayList<Inner>();
list.add(in);
list.add(in1);
list.add(in2);
list.add(in3);
list.add(in4);
list.add(in5);
return list;
}
public Inner getById(Integer id){
List<Inner> list = getTrees();
for (Inner inner : list) {
if(id==inner.getId()){
Inner in=inner;
return in;
}
}
return null;
}
public List<Inner> getChilds(Integer id){
List<Inner> list = getTrees();
List<Inner> result =new ArrayList<OmRequestImpl.Inner>();
for (Inner inner : list) {
if(id.intValue()==inner.getpId().intValue()){
result.add(inner);
}
}
return result;
}
更多关于ztree控件的内容,请参考专题《jQuery插件ztree使用汇总》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]