文章詳情頁
ajax請求后臺得到j(luò)son數(shù)據(jù)后動態(tài)生成樹形下拉框的方法
瀏覽:861日期:2022-06-11 14:22:05
如下所示:
<select id="cc" 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,
//選擇樹節(jié)點(diǎn)觸發(fā)事件
onSelect : function(node) {
n = node;
//返回樹對象
var tree = $(this).tree;
//選中的節(jié)點(diǎn)是否為葉子節(jié)點(diǎn),如果不是葉子節(jié)點(diǎn),清除選中
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_*" method="{1}">
<result name="getAllDep" type="json">
<param name="root">list</param>
</result>
</action>
轉(zhuǎn)成json格式后,傳到j(luò)sp頁面,在前臺頁面中處理json數(shù)據(jù),動態(tài)生成下拉樹。
以上這篇ajax請求后臺得到j(luò)son數(shù)據(jù)后動態(tài)生成樹形下拉框的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持。
標(biāo)簽:
Ajax
上一條:通過Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例下一條:基于ajax后臺返回的數(shù)據(jù)為空前臺顯示出現(xiàn)undefined的解決方法
相關(guān)文章:
1. 前端實(shí)現(xiàn)滑動按鈕AJAX與后端交互的示例代碼2. Ajax驗(yàn)證用戶名是否存在的實(shí)例代碼3. Ajax4JSF 子項(xiàng)目 G4jsf 發(fā)布4. Ajax原理與應(yīng)用案例快速入門教程5. 基于ajax后臺返回的數(shù)據(jù)為空前臺顯示出現(xiàn)undefined的解決方法6. Ajax實(shí)現(xiàn)上傳圖像功能的示例詳解7. 使用AJAX實(shí)現(xiàn)UTF8編碼表單提交到GBK編碼腳本無亂碼的解決方法8. Ajax獲取php返回json數(shù)據(jù)動態(tài)生成select下拉框的實(shí)例9. ajax實(shí)現(xiàn)頁面的局部加載10. 使用FormData進(jìn)行Ajax請求上傳文件的實(shí)例代碼
排行榜

網(wǎng)公網(wǎng)安備