jQuery Ztree
来源:互联网 发布:觉得做程序员越来越烦 编辑:程序博客网 时间:2024/05/17 23:17
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>
- <div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul></div>
- </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"),
- 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 {
- }
- }
- jquery-ztree
- jQuery zTree
- jQuery Ztree
- jquery ztree
- jquery.ztree
- jquery ztree
- zTree--jQuery
- jquery Ztree
- jquery Ztree
- Jquery zTree 常见问题
- jquery zTree拖曳限制
- Jquery zTree实例
- jquery Ztree树形控件
- jQuery ztree 初始化失败
- jquery 树形控件 Ztree
- JQuery Ztree 级联问题
- zTree -- jQuery 树插件
- zTree -- jQuery 树插件
- ubuntu和windows双系统启动问题
- android开发中spinner控件的使用
- 连线:互联网将从空间模式转向时间模式
- linux 下oracle启动
- java获取文件夹和文件大小
- jQuery Ztree
- 军队大战僵尸v1.0.1商店破解补丁
- c#使用linq移除列表中的重复项
- Eclipse上GIT插件EGIT使用手册
- Android Tab简单学习
- UITextField限制字数的方法
- 【枚举】_Enum笔记
- Ubuntu 9.04安装Intel显卡驱动
- HDU 1301 Jungle Roads 最小生成树