ajax请求后台得到json数据后动态生成树形下拉框的方法（ajax获取json数据返回给表格）硬核推荐

文章摘要

本文介绍了通过 AJAX 和 jQuery 实现的一个数据可视化功能，主要用于展示层级数据结构。文章主要围绕 `comb-tree` 对象的实现展开，该对象用于将数据转换为树状结构并展示。代码中定义了 `tree` 对象，包含 `id`、`text`、`state` 等属性，用于表示树节点的信息。此外，`b1`、`b2`、`b3` 和 `b4` 函数分别负责数据加载、树节点创建、子节点处理以及员工信息展示。文章核心内容在于数据的动态加载、结构化展示以及用户交互操作，如选中节点的触发事件处理。

$(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 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>