论坛首页 → Web前端技术论坛 →

jQuery 动态加载树

浏览 7781 次
锁定老帖子 主题：jQuery 动态加载树
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • kaobian
  • 等级: 一星会员
  • 性别:
  • 文章: 24
  • 积分: 120
  • 来自: 哈尔滨
   发表时间：2011-05-19  

本案例中用到了jquery的 tree插件，在本文的附件中可以下载

 

jsp代码：

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
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>jQuery Tree </title>
    <link rel="stylesheet" href="css/tree/jquery.treeview.css" />
    <link rel="stylesheet" href="css/tree/red-treeview.css" />
    <link rel="stylesheet" href="css/tree/screen.css" />
   

   
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/tree/jquery.cookie.js"></script>
    <script type="text/javascript" src="js/tree/jquery.treeview.js"></script>
    <script type="text/javascript" src="js/tree/jquery.treeview.async.js"></script>
   
    <script type="text/javascript">
 
    function initTrees() {
        $("#mixed").treeview({
            url: "Tree",
            ajax: {
                data: {
                    "additional": function() {
                        return "yeah: " + new Date;
                    }
                },
                type: "post"
            }
        });
    }
    $(document).ready(function(){
        initTrees();
       
        $("#refresh").click(function() {
            $("#mixed").empty();
            initTrees();
        });
    });
   
    </script>

  </head>
 
  <body>
    <ul id="mixed">
       
    </ul>
   
    <button id="refresh">Refresh both Trees</button>
   
  </body>
</html>
=-=====================

java代码：本人用的是 servlet

 

 

package com;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Tree extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/plain");
        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        String  re = "[{'text':'root','expanded':false,'children':[{'text':'1.1 jQuery core'},{'text':'1.2 my jQuery Tree'}]}" +
                ",{'text':'2 hhh'},{'text':'3 xxx'}]";
        out.flush();
        System.out.println(re);
        out.write(re);
        out.close();
    }

}

 
返回顶楼
         
  • yuechen323
  • 等级: 初级会员
  • 性别:
  • 文章: 29
  • 积分: 50
  • 来自: 北京
   发表时间：2011-09-06  
lz你工程里面的jquery.treeview.async.js文件是自己改动过的吗？怎么和官方下载的不一样
这段
$.ajax($.extend(true, {
url: settings.url,
dataType: "json",
data: {
root: root
},
success: function(response) {
child.empty();
$.each(response, createNode, [child]);
        $(container).treeview({add: child});
    }
}, settings.ajax));
返回顶楼
          回帖地址
0 请登录后投票
  • kaobian
  • 等级: 一星会员
  • 性别:
  • 文章: 24
  • 积分: 120
  • 来自: 哈尔滨
   发表时间：2011-09-06  
yuechen323 写道
lz你工程里面的jquery.treeview.async.js文件是自己改动过的吗？怎么和官方下载的不一样
这段
$.ajax($.extend(true, {
url: settings.url,
dataType: "json",
data: {
root: root
},
success: function(response) {
child.empty();
$.each(response, createNode, [child]);
        $(container).treeview({add: child});
    }
}, settings.ajax));


我当时只是从网上下载的 jquery.tree 这个插件，并没有自己去 改动里面的东西，呵呵，就没关注。我当时项目需要用这个写一个树，我就随便找了一下，看到了这个插件，随便下来了一个，就用了
返回顶楼
          回帖地址
0 请登录后投票
  • yuechen323
  • 等级: 初级会员
  • 性别:
  • 文章: 29
  • 积分: 50
  • 来自: 北京
   发表时间：2011-09-07  
我再问下lz，你这个不是动态的 ，动态的咋弄啊，有完整的例子嘛
返回顶楼
          回帖地址
0 请登录后投票
  • kaobian
  • 等级: 一星会员
  • 性别:
  • 文章: 24
  • 积分: 120
  • 来自: 哈尔滨
   发表时间：2011-09-13  
yuechen323 写道
我再问下lz，你这个不是动态的 ，动态的咋弄啊，有完整的例子嘛


朋友 你查看我新写的 jquery 树的例子吧，我这次没有用 这个例子中的插件，那个插件是不是修改过 我并不了解
地址：
http://kaobian.iteye.com/admin/blogs/1170599
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics