您的位置：首页 > 其它

Ztree 异步加载的初步研究

2014-04-18 11:30 183 查看

初步研究了下 Ztree的异步加载。现在记录如下。代码中都有备注。

/前台展示部分开始/

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ page import="com.chat.zm.oa.database.*" %>

<%@ page import="java.sql.*" %>

<%

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 'index.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="css/zTreeStyle/zTreeStyle.css" type="text/css"></link> 



   <script type="text/javascript" src="js/jquery-1.4.4.min.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.js"></script>

  <script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>

<script>

  var setting = {

   view:{

       selectedMulti: false,

       fontCss: setFontCss

   },

   async: {

    enable: true,/*开始异步加载*/

    url:"./getidandname.jsp",/*进入的URL 如果是异步加载的模式系统在加载这个页面的时候就会去执行这个路径获取返回来的json数据并赋值给tree*/

    autoParam:["id","name"] /*设置自动提交的参数在url中可以通过 request.getParameter("id") 返货获取到属性的值*/

   },

   data: {

    simpleData: {

     enable: true

    }

   },

    callback: { //树的一些基础方法的绑定

        //beforeClick: beforeClickZtree ,

        beforeDblClick: zTreeBeforeDblClick,//双击执行的动作

        onAsyncSuccess: zTreeOnAsyncSuccess,//异步加载成功后的动作

        onAsyncError: zTreeOnAsyncError,//异步加载失败的动作

        beforeRename: zTreeBeforeRename//重命名后执行的动作

      },

      check:{

       enable:true,

       chkStyle:"radio",//树的前面显示单选框如果改为 chkStyle:"checkbox" 则会显示多选框

       radioType :"all" //all 标示整颗树为一组

      },

      edit:{

        enable: true,

        showRemoveBtn: false,// false：不显示删除按钮 true:显示删除按钮

        showRenameBtn: true,//false：不显示编辑按钮 true:显示编辑按钮



     drag: {

      isCopy: false, //不能复制

      isMove: true//可以拉动

     }



      }



  };

  var zNodes =[];





  //当数据属于异步加载的时候 zNodes 参数可以不写

  $(document).ready(function(){

   $.fn.zTree.init($("#treeDemo"), setting);

  });



  //单击事件

  function zTreeBeforeDblClick(treeId, treeNode){

     alert(treeNode.id+","+treeNode.name);

  }



  //重命名事件

  function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {

   //isCancel 判断是否是ESC 按钮取消的   True:按了Exc按钮 false：没有按Exc按钮

   if(!isCancel){

    alert(newName);

   }

   return newName.length > 5;

  }





  //设置树的层次颜色

  function setFontCss(treeId, treeNode){



    var color;

     switch (treeNode.level) {

      case 0:

      color = { color: "black"};

      break;

     case 1:

      color = { color: "blue" };

      break;

     case 2:

      color = { color: "green" };

      break;

    default:

      color = {};

     }

     return color;

  }



  //异步加载成功后执行的方法

  function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){



  }

  //异步加载失败后执行的方法

  function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown){

    alert("数据加载出错！请稍后再试");

  }

</script>

</head>

<body>

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

</body>

</html>
/*前台展示部分结束*/

/*后台数据处理开始*/

<%@ page language="java" contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<%@page import="java.sql.*"%>

<%@page import="java.text.*"%>

<%@page import="com.chat.zm.oa.database.*"%>

<%

   String id=request.getParameter("id");

   String name=request.getParameter("name");





   request.setCharacterEncoding("utf-8");

   response.setCharacterEncoding("utf-8");









   try{

    response.setContentType("text/html");



    StringBuffer bf=new StringBuffer();



    bf.append("[");



    if(id==null||"".equals(id)){

     id="0";

    }



    Connection db=DatabaseMethods.getConnection();

    PreparedStatement pdst=null;

    ResultSet rs=null;

    pdst=db.prepareStatement("select d1.id,d1.pid,d1.name,(select count(*) from dept d2 where d2.pid = d1.id) childsize from dept d1 where d1.pid=?");

    pdst.setInt(1,Integer.valueOf(id));

    rs=pdst.executeQuery();

    while(rs.next()){

      int _id=rs.getInt("id");

      String _name=rs.getString("name");

      int _pid=rs.getInt("pid");

      int count=rs.getInt("childsize");

      if(count>0){

       bf.append("{id:"+_id+",pId:"+_pid+",name:\""+_name+count+"\",isParent:true,chkDisabled:true},");

      }else{

       bf.append("{id:"+_id+",pId:"+_pid+",name:\""+_name+count+"\"},");

      }





    }

    bf.append("]");



    out.print(bf.toString());





   }catch(Exception e){

    System.out.println("出错了");

   }



%>

/*后台数据处理结束*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Ztree 异步加载 的初步研究

/*前台展示部分 开始*/

Ztree 异步加载的初步研究

/前台展示部分开始/