配置
<link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/ztree/jquery.ztree.all-3.5.js"></script>
关于手册:
主要在配置中,也就是set中设置要触发的事件及相关配置,在
callback在声明事件,这些事件的参数已经固定,只需自己实现相应的功能就好。
简单的树:
效果:
代码:
<script type="text/javascript">
var zNodes =[ //根据单表的域名关系 open:true 展开 isParent:true作为父节点
{id:0,addrname:'中国',pid:-1,open:true},
{id:1,addrname:'陕西省',pid:0},
{id:2,addrname:'甘肃省',pid:0},
{id:3,addrname:'西安市',pid:1},
{id:4,addrname:'兰州市',pid:2,isParent:true},
{id:5,addrname:'高新区',pid:3},
{id:6,addrname:'雁塔区',pid:3}
];
var setting = {
data: {
simpleData: { //更改zNodes关键字三个主要的依次为:idKey, name,pIdKey
enable: true,
idKey:"id",
pIdKey:"pid"
},
key:{
name:"addrname"
}
}
}
$(document).ready(function(){
$.fn.zTree.init($("#areaTree"), setting, zNodes); //设置初始化
});
</script>
<ul id="areaTree" class="ztree"></ul> 必须放在ul标签中
服务器端获取数据并加载
通过request域获取数据
前提是有一个按钮之类发生事件访问到servlet中,在返回到jsp页面展现tree
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script src="js/ztree/jquery.ztree.all-3.5.js"></script>
<div>
<ul id="areaTree" class="ztree"></ul> //tree必须放在ul中
</div>
<script type="text/javascript">
var setting = {
check:{
enable: true,
chkStyle: "checkbox"
},
data: {
simpleData: {
enable: true,
idKey:"id", //
idKey、pIdKey、 name 必须设置为模型中的字段pIdKey:"pid"
},
key:{
name:"rname"
}
}
}
var zNodes =${requestScope.addrList} //从
requestScop中获取数据,在servlet中将数据放在request域中zNodes.unshift( {id:0,addrname:'中国',pid:-1,open:true}); //为tree添加一个根节点
unshift()表示添加数组在数组的第一个位置$(document).ready(function(){
$.fn.zTree.init($("#areaTree"), setting, zNodes); //tree的初始化
});
</script>
servlet代码:
public void addrssList(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
List addrList = this.addrDao.selectAddressList(); //从数据库中查到信息
String addrJsonStr = JsonUtil.transToJsonStr(addrList); //将数据转化成json格式的字符串
System.out.println("addrJsonStr=="+addrJsonStr);
req.setAttribute("addrList",addrJsonStr); //将字符串放入
Requestreq.getRequestDispatcher("manage/address/addrList.jsp").forward(req, resp); //跳转到jsp页面
}
通过异步的方式一次加载
1、创建子节点的模型类
public class region {
private int id; //子节点
private String rname; //子节点名称
private int pid; //父节点
private boolean isparent; //是否为父节点
private boolean isopen; //默认是否展开
//无参狗造
//成员变量的set方法和get方法
}
2、在servlet中获取到数据库的数据写入流中。
在servlet进行数据操作,查到所有节点数据
protected void getList(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
RegionDao rd = new RegionDaoimpl();
List<region> relist =rd.getallRegion(); //获取到所有节点的信息
String jsonStr = JsonUtil.transToJsonStr(relist); //装换成json格式并写入流中
jsonStr为json格式的字符串JsonUtil.outJsonStrAndColse(resp, jsonStr);
}
3、jsp页面获取到节点数据并初始化tree
var setting = {
data: {
simpleData: {
enable: true, //使用简单数据模式
idKey: "id", //id pid 以及key中的name表示节点名称的要与模型中定义的相符合
pIdKey: "pid",
rootPId: 0,
},
key: {
name: "rname"
}
},
async: { //加载
enable: true, //开启异步加载
url:"ZtreeServlet.do" //服务器路径
},
callback : {
onAsyncSuccess : onAsyncSuccess, //异步访问成功后获取到数据执行该方法
}
}
var zTree;
function onAsyncSuccess (event, treeId, treeNode, msg){
zTree = $.fn.zTree.getZTreeObj(treeId); //获取节点数据
var nodes = zTree.getNodes();
}
$(document).ready(function(){
$.fn.zTree.init($("#areaTree"), setting, zTree); //初始化tree ,areaTree为放置该tree的容器id
});
容器:
<ul id="areaTree" class="ztree"></ul> //tree必须放在ul中
通过异步的方式批量加载
原理:每个节点都有 id name pid
每个节点的pid都是搞节点的父节点的id
这样点击节点,获取节点的id,再将这个id的值作为pid的条件查询,如果有数据,证明是父节点,如果没有数据返回,证明是子节点
根据是不是父节点来给isParent设置true还是false
数据库表
1、创建子节点的模型类
package com.cpf.pojo;
public class region {
private int id;
private String rname;
private int pid;
private String isParent; //是否为父节点
private boolean isopen; //是否展开
private int subCount; //该节点拥有子节点的数量
public region() {
super();
}
public region(int id, String rname, int pid) {
super();
this.id = id;
this.rname = rname;
this.pid = pid;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getRname() {
return rname;
}
public void setRname(String rname) {
this.rname = rname;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getIsParent() {
return isParent;
}
public void setIsParent(String isParent) {
this.isParent = isParent;
}
public int getSubCount() {
return subCount;
}
public void setSubCount(int subCount) {
this.subCount = subCount; //获取到该节点拥有的子节点的数量,如果为0 ,则为叶子节点
if(this.subCount == 0){
this.setIsParent("false");
}else{
this.setIsParent("true");
}
}
}
2、在servlet中获取到数据库的数据写入流中。
在servlet进行数据操作,查到所有节点数据
protected void getList2(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
int id = RequestUtil.getIntParam(req, "id", 0); //页面获取传给后台的父节点id
RegionDao rd = new RegionDaoimpl();
List<region> relist =rd.getRegion(id); //获取到所有节点的信息
String jsonStr = JsonUtil.transToJsonStr(relist); //装换成json格式并写入流中
JsonUtil.outJsonStrAndColse(resp, jsonStr);
}
dao层调用代码:(这里用到了dbutils的封装,)
sql查询涉及到相关子查询
查出id的所有信息的及这个id的子节点(也就是所有pid为跟这个id的相等的节点信息)
public List<region> getRegion(int id) {
String sql2 = "SELECT addr1.*,(SELECT COUNT(*) FROM region AS addr2 WHERE addr2.pid = addr1.id) AS subCount FROM region AS addr1 WHERE pid =?";
List<region> relist=selectListObj(sql2, region.class, id);
return relist;
}
@Override
public <T> List<T> selectListObj(String sql, Class clazz, Object... params) {
Connection conn = null;
List<T> listObj = null;
try {
conn = JdbcUtilFactory.getInstance().getJdbcUtil().getcConnection();
QueryRunner qrun = new QueryRunner();
listObj=qrun.query(conn, sql,new BeanListHandler<T>(clazz) , params);
} catch (SQLException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
return listObj ;
}
3、jsp页面获取到节点数据并初始化tree
<script type="text/javascript">
var setting = {
async: { //异步提交(点击自动提交)
enable: true, 提交路径
url:getUrlx, //
autoParam: ["id"] // 自动参数,点击时会自动ajax的方式向后台提价该对象的id,
},
check:{
enable: true,
chkStyle: "checkbox"
},
data: {
simpleData: {
enable: true,
idKey:"id",
pIdKey:"pid"
},
key:{
name:"rname"
}
},
callback: {
onClick: onClickOper
}
}
function onClickOper(event,treeId,treeNode){
alert(treeNode.id); //点击对象的id
;
}
function getUrlx(){
return "ZtreeServlet.do?code=async";
}
var zNodes =[ {id:0,rname:'中国',pid:-1,isParent:true}] //默认添加父节点
$(document).ready(function(){
$.fn.zTree.init($("#areaTree"), setting, zNodes);
});
</script>
容器:
-
<ul id="areaTree" class="ztree"></ul> //tree必须放在ul中
其他的基础功能介绍
代码:
<script type="text/javascript">
var setting = {
data: {
simpleData: { //简单数据的设置
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId: 0,
},
key: {
name: "rname"
}
},
async: { //异步加载的设置
enable: true,
url:"ZtreeServlet.do"
},
check: { //选中的设置
autoCheckTrigger: true,
chkboxType: { "Y": "p", "N": "s" },
enable: true,
chkStyle: "checkbox", //也可以设置radio(单选)
},
edit: { //编辑的设置
enable: true,
drag: {
autoExpandTrigger: true
},
enable: true
},
callback : { //各种事件的发生
onAsyncSuccess : onAsyncSuccess, //后台获取数据成功时发生
onCheck: zTreeOnCheck , // 选中时触发
onClick: zTreeOnClick, //点击时触发
beforeRename: zTreeBeforeRename, //更新前触发
onRename: zTreeOnRename, //更新时触发
onRemove: zTreeOnRemove //删除时触发
}
};
//以下是各种方法的实现
- //参数
//
event js event对象- //treeId 对应tree的容器的id
//treeNode 该节点的全部信息
- //msg 获取到该tree的全部节点信息(数组形式的字符串)
var zTree;
function onAsyncSuccess (event, treeId, treeNode, msg){
zTree = $.fn.zTree.getZTreeObj(treeId); //获取节点数据
var nodes = zTree.getNodes();
}
function zTreeOnCheck(event, treeId, treeNode) {
alert(treeNode.id + ", " + treeNode.rname + "," + treeNode.checked);
};
function zTreeOnClick(event, treeId, treeNode) {
alert(treeNode.id + ", " + treeNode.rname+ ", " + treeNode.pid);
};
//newName 更改的新名字
//isCancel isCancel = true 表示取消编辑操作(按下 ESC 或 使用 cancelEditName 方法) // isCancel = false 表示确认修改操作
- function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
return newName.length > 3;
}
function zTreeOnRename(event, treeId, treeNode, isCancel) {
alert("zTreeOnRename="+treeNode.id + ", " + treeNode.rname+", " + treeNode.pid);
}
function zTreeOnRemove(event, treeId, treeNode) {
alert(treeNode.id + ", " + treeNode.rname);
}
$(document).ready(function(){
$.fn.zTree.init($("#areaTree"), setting, zTree);
});
</script>
<ul id="areaTree" class="ztree"></ul>