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>
. 代码如下:
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);
});
. 代码如下:
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 {
}
}
如对本文有疑问， 点击进行留言回复！！
JavaScript 好题汇总分享（持续更新，看到好题就写）
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
我要评论
网友评论