主页 > 知识库 > ajax请求后台得到json数据后动态生成树形下拉框的方法

ajax请求后台得到json数据后动态生成树形下拉框的方法

热门标签:团购网站 Mysql连接数设置 银行业务 电子围栏 科大讯飞语音识别系统 Linux服务器 服务器配置 阿里云

如下所示:

select id="cc" class="easyui-combotree" style="width:580px;" name="rempId" data-options="required:true">/select>

script>

$(function(){
$.ajax({
url:"departmentAction_getAllDep.action",
type:"post",
success:function(result){
//console.log(result);
$("#cc").combotree('loadData',b1(result));
}
});
$("#cc").combotree({
animate:true,
//选择树节点触发事件 
 onSelect : function(node) { 
 n = node;
  //返回树对象 
  var tree = $(this).tree; 
  //选中的节点是否为叶子节点,如果不是叶子节点,清除选中 
  var isLeaf = tree('isLeaf', node.target); 
  if (!isLeaf) { 
   //清除选中 
   $("#cc").combotree('clear'); 
  } 
 } 
});
});

var tree = {
id:'', 
 text:'', 
 state:'', 
 checked:'', 
 iconCls:'',
 attributes:'', 
 children:''
}

function b1(result){
var t = [];
$.each(result,function(index,dept){
t[index] = b2(dept);
});
return t;
}

function b2(dept){
  var tree = new Object();
tree.id = dept.depId; 
 tree.text = dept.depName; 
 tree.state = 'closed'; 
 tree.checked = 'false';
 if(dept.employees.length != 0){
 tree.children = b3(dept.employees);
 }else{
 tree.children = [];
 }
 return tree;
}

function b3(employees){ 
 var easyTree = []; 
 $.each(employees,function(index,item){ 
 easyTree[index] = b4(item); 
 }); 
 return easyTree; 
} 
 
function b4(item){
var tree = new Object();
tree.id = item.empId;
tree.text = item.empName;
if(item.empSex == "男"){
tree.iconCls = 'icon-nan';
}else{
tree.iconCls = 'icon-female';
}
return tree;
} 

/script>

department表中的dept_id作为employee表中有的外键,生成的Department.java类中有Setemployee>对象。从后台查询部门表,得到ListDepartment>集合,通过struts2配置:

action name="departmentAction_*" class="com.chinasoft.action.DepartmentAction" method="{1}">
result name="getAllDep" type="json">
param name="root">list/param>
/result>
/action>

转成json格式后,传到jsp页面,在前台页面中处理json数据,动态生成下拉树。

以上这篇ajax请求后台得到json数据后动态生成树形下拉框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • Ajax引擎 ajax请求步骤详细代码
  • vue项目使用axios发送请求让ajax请求头部携带cookie的方法
  • 为jquery的ajax请求添加超时timeout时间的操作方法
  • 通过Ajax请求动态填充页面数据的实例
  • 通过jquery的ajax请求本地的json文件方法
  • jQuery中ajax请求后台返回json数据并渲染HTML的方法
  • ajax请求后台接口数据与返回值处理js的实例讲解
  • jquery 通过ajax请求获取后台数据显示在表格上的方法
  • Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
  • 关于Ajax异步请求后台数据进行动态分页功能
  • 爬取今日头条Ajax请求

标签:大理 衡水 枣庄 广元 江苏 衢州 蚌埠 萍乡

巨人网络通讯声明:本文标题《ajax请求后台得到json数据后动态生成树形下拉框的方法》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266