您的位置:首页 > Web前端 > JavaScript

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

2017-01-15 15:03 525 查看
<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类中有Set<employee>对象。从后台查询部门表,得到List<Department>集合,通过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数据,动态生成下拉树。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  easyui ajax json