• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    ajax请求后台得到json数据后动态生成树形下拉框的方法

    如下所示:

    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后台返回的数据为空前台显示出现undefined的解决方法
    下一篇:通过Ajax方式绑定select选项数据的实例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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