欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery zTree异步加载简单实例分享

程序员文章站 2022-07-03 11:14:35
jquery ztree异步加载简单实例分享。ztree是一个使用jquery实现的jsp页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式。 当前版本ztree 3....

jquery ztree异步加载简单实例分享。ztree是一个使用jquery实现的jsp页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式。
当前版本ztree 3.5.01
simple.html

. 代码如下:


<!doctype html>
<html>
<head>
<title>simple.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/ztreestyle.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script>
<!-- <script type="text/javascript" src="js/standard.js"></script> -->
<script type="text/javascript" src="js/1.js"></script>
</head>
<body>
<p class="ztreedemobackground left"><ul id="treedemo" class="ztree"></ul></p>
</body>
</html>


js

. 代码如下:


var setting = {
data: {
simpledata: {
enable: true
// idkey:"id",
// pidkey:"pid",
}
}
,async: {
enable: true,
url:"/java_solr/servlet/ztreeserlvet",
autoparam:["id", "name"],
otherparam:{"otherparam":"ztreeasynctest"},
// datatype: "text",//默认text
// type:"get",//默认post
datafilter: filter //异步返回后经过filter
}
,callback:{
// beforeasync: ztreebeforeasync, // 异步加载事件之前得到相应信息
asyncsuccess: ztreeonasyncsuccess,//异步加载成功的fun
asyncerror: ztreeonasyncerror, //加载错误的fun
beforeclick:beforeclick //捕获单击节点之前的事件回调函数
}
};
//treeid是treedemo
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('','');
}
return childnodes;
}
function beforeclick(treeid,treenode){
if(!treenode.isparent){
alert("请选择父节点");
return false;
}else{
return true;
}
}
function ztreeonasyncerror(event, treeid, treenode){
alert("异步加载失败!");
}
function ztreeonasyncsuccess(event, treeid, treenode, msg){

}
/***********************当你点击父节点是,会异步访问servlet,把id传过去*****************************/
var znodes=[];
/* var znodes =[
{ id:1, pid:0, name:"parentnode 1", open:true},
{ id:11, pid:1, name:"parentnode 11"},
{ id:111, pid:11, name:"leafnode 111"},
{ id:112, pid:11, name:"leafnode 112"},
{ id:113, pid:11, name:"leafnode 113"},
{ id:114, pid:11, name:"leafnode 114"},
{ id:12, pid:1, name:"parentnode 12"},
{ id:121, pid:12, name:"leafnode 121"},
{ id:122, pid:12, name:"leafnode 122"},
{ id:123, pid:12, name:"leafnode 123"},
{ id:13, pid:1, name:"parentnode 13", isparent:true},
{ id:2, pid:0, name:"parentnode 2", isparent:true}
]; */
$(document).ready(function(){
$.fn.ztree.init($("#treedemo"), setting, znodes);
});


得到ztree对象 :var ztree = $.fn.ztree.getztreeobj("treedemo"),
ztreeservlet

. 代码如下:


package org.hzy.servlets;
import java.io.ioexception;
import java.io.printwriter;
import java.util.arraylist;
import java.util.list;
import javax.servlet.servletexception;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import org.hzy.bean.ztreebean;
import com.alibaba.fastjson.json;
public class ztreeserlvet extends httpservlet {
public void destroy() {
super.destroy();
}
public void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
system.out.println(request.getparameter("id") + " " + request.getparameter("name") + " " + request.getparameter("otherparam"));
response.setcharacterencoding("utf-8");
printwriter out = response.getwriter();
ztreebean zb = new ztreebean(0, -1, "zb", true);
ztreebean zb1 = new ztreebean(1, 0, "zb1", true);
ztreebean zb2 = new ztreebean(2, 1, "zb2", false);
ztreebean zb3 = new ztreebean(2, 0, "zbss", true);
list<ztreebean> list = new arraylist<ztreebean>();
list.add(zb);
list.add(zb1);
list.add(zb2);
list.add(zb3);
string str = json.tojsonstring(list);
out.print(str);
}
public void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {
doget(request, response);
}
public void init() throws servletexception {
}
}