ztree学习之异步加载节点(一)

ztreedemo.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">  

    <title>My JSP ‘ztreedemo.jsp‘ starting page</title>  

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="<%=basePath%>/ztree/css/demo.css" type="text/css">
    <link rel="stylesheet" href="<%=basePath%>/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="<%=basePath%>/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="<%=basePath%>/js/test/ztreedemo.js"></script>
  </head>  

  <body>
    <ul id="treeDemo" class="ztree"></ul>
  </body>
</html>  

ztreedemo.js:

$(document).ready(function(){
    initMyZtree();
});  

var zNodes="";
var setting = {
    view: {
        selectedMulti: false,
        fontCss: setFontCss
    },
    async: {
        enable: true,
        url:"getZtreeData",
        autoParam:["id"]
    },
    callback: {
        beforeClick: beforeClickZtree
    }
};  

function initMyZtree(){
    $.ajax({
        type: "POST",
        dataType: "json",
        url: ‘getZtreeData‘,
        success: function(data) {
            zNodes=data;
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        }
    });    

}  

//单击事件
function beforeClickZtree(treeId, treeNode){
    alert(treeNode.id+","+treeNode.name);
}  

//设置字体
function setFontCss(treeId, treeNode) {
    if(treeNode.level==0){
        return {‘font-weight‘:‘bold‘,‘color‘:‘red‘};
    }else if(treeNode.level==1){
        return {‘font-weight‘:‘bold‘,‘color‘:‘green‘};
    }else if(treeNode.level==2){
        return {‘font-weight‘:‘bold‘,‘color‘:‘blue‘};
    }else{
        return {};
    }
};  

CZTestAction.java:

package com.cz.action;  

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;  

import javax.servlet.http.HttpServletResponse;  

import net.sf.json.JSONArray;  

import org.apache.struts2.ServletActionContext;  

import com.cz.model.TreeNode;
import com.cz.util.SqlHelper;
import com.opensymphony.xwork2.ActionSupport;  

public class CZTestAction extends ActionSupport{
    private String id;  

    public String getId() {
        return id;
    }  

    public void setId(String id) {
        this.id = id;
    }  

    /**
     * @author chenzheng
     * @since 2013-8-21
     * @Description: ztree测试
     * @throws
     * @return
     * String
     */
    public String getZtreeData(){
        System.out.println("*********"+id+"**********");
        if("null".equals(id)||"".equals(id)||id==null){
            id="0";
        }
        String sql="select t.jgid,t.jgmc,t.fjgid,t.jgbm,(select count(*) from sys_dept sd where sd.fjgid=t.jgid) as ispar from SYS_DEPT t where t.fjgid="+id;
        ResultSet rs=SqlHelper.executeQuery(sql, null);
        JSONArray jarray=new JSONArray();
        List<TreeNode> list=new ArrayList<TreeNode>();
        try {
            while(rs.next()){
                TreeNode tnode=new TreeNode();
                tnode.setId(rs.getString(1));
                tnode.setName(rs.getString(2));
                tnode.setpId(rs.getString(3));
                //判断当前节点是否还有子节点
                if(Integer.parseInt(rs.getString(5))>0){
                    tnode.setIsParent(true);
                    tnode.setHasChild(true);
                }else{
                    tnode.setIsParent(false);
                    tnode.setHasChild(false);
                }
                list.add(tnode);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        jarray.addAll(list);
        System.out.println(jarray.toString());
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("utf-8");
        PrintWriter pw = null;
        try {
            pw = response.getWriter();
            pw.write(jarray.toString());
        } catch (IOException e) {
            e.printStackTrace();
        }
        pw.flush();
        pw.close();
        return null;
    }
}  

TreeNode.java:

package com.cz.model;  

public class TreeNode {  

    private String id;
    private String pId;
    private String name;
    private Boolean isParent;
    private Boolean hasChild;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getpId() {
        return pId;
    }
    public void setpId(String pId) {
        this.pId = pId;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Boolean getIsParent() {
        return isParent;
    }
    public void setIsParent(Boolean isParent) {
        this.isParent = isParent;
    }
    public Boolean getHasChild() {
        return hasChild;
    }
    public void setHasChild(Boolean hasChild) {
        this.hasChild = hasChild;
    }
}  

效果图:

本文转自:http://xiaoxiaomuyu.iteye.com/blog/1929490

时间: 2024-10-14 17:00:02

ztree学习之异步加载节点(一)的相关文章

ztree v3.x 异步加载的简单用法

ztree官网:http://www.ztree.me/v3/main.php#_zTreeInfo 页面: <span style="font-size:14px;"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Str

ZTree异步加载树结构

var setting = { async:{ autoParam:["parentId"], enable:true, type:"post", url:getUrl, dataFilter:filter, }, check : { chkStyle: "radio", enable: false, chkboxType : { "Y" : "s", "N" : "ps&qu

学习andriod开发之 异步加载图片--- 使用系统进度条

大家好 我是akira 学习图片异步加载的例子 说道这里有人可能要问了 什么是异步 为什么要用异步 why? 说白了很简单 省时间 省资源 我举个例子你就懂了 比如你在下东西 至于下什么 那些邪恶的骚年们又要YY了 不去管他们.比如你在下东西 这个时候 另外一个人也在下同一个东西 那么那个人怎么办 他就等你下完 等到天荒地老?ありえないこと impossible 他肯定也要下 那么问题就来了 他如何下?这个时候就要用到异步 说道这里 有人可能问什么叫同步 什么叫异步 我在这里在给大家举一个简单的

Ztree异步加载自动展开节点

在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况下展开,在异步加载之前,当前节点是没有子节点的,所以无法打开.异步加载自动展开解决方法如下: 1.设置ztree的加载完成的回调函数: setting = {      ......                  callback: {        ......        onAsyncS

JQuery ztree 异步加载实践

本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说这篇博客还算规整! 准备工作 1 JQuery ZTree,下载地址 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象,下载地址 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-

Jquery树控件ZTree异步加载

转载请注明出处:jiq?钦's technical Blog 异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 这里面主要设计ztree的setting变量的async属性设置: var setting = { async: { enable: true, url:"InitServiceIpsData.action", autoParam:["id", "name"], dataFilter:

zTree异步加载自动展开

最近在处理一个树形菜单,要做到异步加载.自动展开.可怎么搞都不行,要点击一下才能展开所有. 使用的zTree版本是v3.5.18.其实还是蛮简单的.话不多说,代码如下: /**  * 初始化菜单  */ var initTree = function(treeId) {     var settings = {             treeId: treeId,             async: {                 enable: true,               

关于ztree异步加载的问题(二)

本来以为这个异步加载会很难控制,因为考虑到ztree节点图标的控制,结果并不是那么困难,ztree自己控制图标,你只要在json中设置isParent:true,它自己会识别父节点并控制图标,以下是核心代码: <!--前台js代码以及html--> //参数设置 var setting={ async: { enable: true, url:"${pageContext.request.contextPath}/page/department_ascyDepartment.do&q

ztree插件动态加载节点

1.ztree官网首页下载所需zip,下载方式为 GitHub 方式下载 HTTPS : https://gitee.com/zTree/zTree_v3.git SSH : [email protected]:zTree/zTree_v3.git 2.在jsp页面中引入 js.css文件 <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">