`

Ajax获取数据动态树形节点实现

    博客分类:
  • AJAX
阅读更多

  下面是实现:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script src="../js/jquery-latest.js"></script>
  <script src="../js/select.js"></script>
  <link rel="StyleSheet" href="/sch/js/dtree.css" type="text/css" />
<script type="text/javascript" src="/sch/js/dtree.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
//获取顶级部门

d = new dTree('d');
d.add(0,-1,'系统');
$.ajaxSetup({cache:false});
   $.getJSON("/sch/GetJsonServlet?Method=getTopOrgJson",function call(data){
    var org=data.orgList;
    alert(org.length);
     
        for(var i=0;i<org.length;i++){
         //id, pid, name, url, title, target, icon, iconOpen, open
         d.add(org[i].ID,0,org[i].description,"javascript:addNextOrg('"+org[i].ID+"');",'测试节点');


         }
        $("#showDtree").html(d.toString());
     });

});
//获取下级部门
function addNextOrg(ID){
 alert("hello");
  $.getJSON("/sch/GetJsonServlet?Method=getNextOrgJson&ID="+ID,function call(data){
    var org=data.orgList;  
    if(org.length!=0){
        for(var i=0;i<org.length;i++){
         d.add(org[i].ID,ID,org[i].description,"javascript:addNextOrg('"+org[i].ID+"');",'测试节点');
                                     }
          
        $("#showDtree").html(d.toString());
    }
     });
}
function showformDiv(id){
 $('.formDiv').hide();
 $(id).show();
 
}
function buildOrg(){
 var str=$("#buildOrg").serialize();
 
alert(str);
   $.getJSON("/simple/DynajetServlet?Method=buildOrg&"+str,function call(data){ 
    var result=data.result;   
  //  alert("hello");
         $("#result").text(result);

     });
 
}

 

 

 

function orgChange(){
 $.ajaxSetup({cache:false});
 var orgId=$("#orgList").val();
 alert(orgId);
   $.getJSON("/simple/SalesServlet?Method=getRoleJson&orgId="+orgId,function call(data){ 
    var continents =data.roleList;   
        for(var i=0;i<continents.length;i++){
        $("#roleList").append('<option value='+continents[i].roleId+'>'+continents[i].description+'</option>');
        }
     });
}

</script>
<body>
<div id="showDtree">

</div>

</body>
</html>

分享到:
评论
3 楼 香烟与酒 2010-04-20  
您好,把这个js   <script src="../js/jquery-latest.js"></script> 发给我下,谢谢! sunflower527wfy@126.com
2 楼 jasstion 2010-04-20  
第二个不需要
1 楼 香烟与酒 2010-04-19  
您好,这两个js一定需要?
   <script src="../js/jquery-latest.js"></script>
  <script src="../js/select.js"></script>

相关推荐

    AJAX动态树形目录

    在本项目中,"AJAX动态树形目录"利用AJAX与XML数据格式,实现了网页上动态显示和交互的树状目录结构。树形目录通常用于文件系统、网站导航或者组织层次结构信息,它通过节点的展开和折叠,使得用户可以方便地浏览和...

    AjaxTree源码,AJAX动态获取节点的子节点

    AjaxTree是一款基于AJAX技术实现的树形视图控件,其核心特性在于能够动态地通过服务器请求获取节点的子节点数据,从而避免一次性加载大量数据导致页面性能下降的问题。这一设计模式在网页应用中非常常见,尤其是在...

    Ajax+jsp+oracle实现动态树形菜单

    3. **前端展示**:JavaScript使用Ajax的响应数据构建树形菜单的DOM结构,可以使用jQuery或原生JavaScript库,如D3.js,实现动态渲染。 4. **交互逻辑**:添加事件监听器处理用户点击树节点的行为,触发新的Ajax请求...

    Ajax技术实现动态获取数据的树状菜单

    在本示例中,"Ajax技术实现动态获取数据的树状菜单"是一个具体的实践应用,主要目标是创建一个动态加载数据的树状菜单,用户可以在不刷新页面的情况下查看和操作数据。 首先,我们来了解树状菜单的基本概念。树状...

    Ajax+jsp+MySQL实现动态树形菜单

    在动态树形菜单中,Ajax负责异步加载子节点,当用户展开一个父节点时,它会发送请求到服务器,获取该父节点下的子节点信息,然后在客户端动态插入到树形结构中,这样既提高了用户体验,又减轻了服务器压力。...

    ajax获取嵌套JSON,树形控件显示

    这个“ajax获取嵌套JSON,树形控件显示”的示例主要涉及如何通过Ajax获取嵌套的JSON数据,并将其适配到ZTree的格式,以便在页面上以树形结构展示。 首先,我们需要理解JSON(JavaScript Object Notation)是一种轻...

    layui-tree实现Ajax异步请求后动态添加节点的方法

    在本示例中,我们需要实现一个功能:当用户在树形菜单中选择某一节点时,通过 AJAX 异步请求向后台添加新的子节点,并在前端动态显示出来。 首先,我们看到 HTML 结构中有一个 `#demo` ID 的 `ul` 元素,它是 layui...

    js+asp实现树形结构,选取文本框可以获取树形节点的值

    总结,"js+asp实现树形结构,选取文本框可以获取树形节点的值"是一项综合了前端交互设计、后端数据处理和浏览器兼容性优化的任务。理解并掌握这些技术将有助于开发出更高效、用户体验更好的Web应用。

    树形菜单Ajax实现

    总结起来,"树形菜单Ajax实现"涉及了前端UI设计、JavaScript编程、Ajax通信以及服务器端数据处理等多个方面。这种技术能够提供更加高效、流畅的交互体验,广泛应用于现代Web应用程序中。通过学习和掌握这些知识点,...

    JavaScript+Ajax实现树形目录

    1. **初始化**:创建HTML结构,根据后台返回的数据动态生成树形节点。 2. **事件监听**:为每个节点添加点击事件监听器,当用户点击节点时触发相应的行为。 3. **状态管理**:管理节点的展开和收缩状态,通过改变CSS...

    AJAX动态树形结构

    本文聚焦于**基于AJAX的动态树形结构的设计与实现**,探讨如何利用AJAX技术解决传统树形结构中存在的问题,如无法实时更新节点信息、缺乏灵活性等。 #### 二、基础知识概述 1. **AJAX(Asynchronous JavaScript and...

    ajax 方式实现的动态树形结构,从库中取数据

    在本案例中,我们将讨论如何使用Ajax技术来实现一个动态树形结构,它可以从数据库中实时获取数据。 Ajax(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下,通过后台与服务器进行异步数据交换并...

    树形结构的多种实现,其中有Ajax异步实现

    在实际应用中,Ajax异步实现的树形菜单能够实现动态加载和交互,减轻页面负担,提高用户体验。通常,我们需要结合后端接口设计,使Ajax请求能返回正确的树形数据结构,例如JSON格式,包含父节点ID、子节点列表等信息...

    基于ajax的动态树实现

    本项目"基于Ajax的动态树实现"是利用Struts框架和Ajax技术来创建一个交互式的、能实时更新的树形视图。下面将详细介绍这个项目中的关键技术点和实现流程。 首先,Struts是一个Java MVC(Model-View-Controller)...

    ajax树形菜单 动态显示

    在这个“ajax树形菜单 动态显示”的项目中,我们关注的是如何利用Ajax技术来实现一个交互式的、只在需要时加载内容的树形菜单。 树形菜单是一种常见的用户界面元素,它通过层级结构来展示信息,常用于网站导航、...

    ajax动态树形列表

    总的来说,"Ajax动态树形列表"是前端开发中一种高效、交互性强的数据展示手段,它结合了Ajax的异步特性与树形结构的层次展示,为用户提供了便捷的操作体验。在实际项目中,开发者需要熟练掌握相关技术和工具,以实现...

    ajax树形结构

    在这个场景中,当用户在树形结构中展开或折叠一个节点时,AJAX请求会被触发,向服务器发送请求,获取对应节点的子节点数据。服务器(通过Servlet)处理请求后,将数据返回,JavaScript再利用这些数据动态地在页面上...

    Ajax构造树形结构

    在本文中,我们将深入探讨如何使用Ajax构建一个树形结构,这是一个常见的前端数据展示方式,尤其适用于层级关系的数据,如组织结构、目录树等。 首先,树形结构是一种数据表示形式,它通过节点之间的层次关系来组织...

Global site tag (gtag.js) - Google Analytics