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

时间: 2020-08-27来源：ITEYE

前景提要

相关推荐: jquery+json+struts2+mybatis实现的多级关联下拉效果一个关于DWR的例子 jquery.autocomplete插件完美应用利用Ajax实现动态加载树 Ajax获取数据动态树形节点实现利用Ajax实现树的动态加载利用jQuery的ajax得到的数据动态创建树，然后点击数节点，把对应的节点的节点信息赋值给某一个div，是上一篇的升级版 Echarts通过Ajax实现动态数据加载
推荐群组: EXT
更多相关推荐
JavaScript 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>

科技资讯:

科技学院:

科技百科:

科技书籍:

网站大全:

软件大全:

更多数据

热门排行

咨询电话(周一至周五9：00-18：00)