文章詳情頁(yè)
ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹(shù)形下拉框的方法
瀏覽:750日期: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, //選擇樹(shù)節(jié)點(diǎn)觸發(fā)事件 onSelect : function(node) { n = node; //返回樹(shù)對(duì)象 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類(lèi)中有Set<employee>對(duì)象。從后臺(tái)查詢(xún)部門(mén)表,得到List<Department>集合,通過(guò)struts2配置:
<action name="departmentAction_*" method="{1}"> <result name="getAllDep" type="json"> <param name="root">list</param> </result> </action>
轉(zhuǎn)成json格式后,傳到j(luò)sp頁(yè)面,在前臺(tái)頁(yè)面中處理json數(shù)據(jù),動(dòng)態(tài)生成下拉樹(shù)。
以上這篇ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹(shù)形下拉框的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持。
標(biāo)簽:
Ajax
上一條:通過(guò)Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例下一條:基于ajax后臺(tái)返回的數(shù)據(jù)為空前臺(tái)顯示出現(xiàn)undefined的解決方法
相關(guān)文章:
1. 使用AJAX(包含正則表達(dá)式)驗(yàn)證用戶(hù)登錄的步驟2. 使用FormData進(jìn)行Ajax請(qǐng)求上傳文件的實(shí)例代碼3. AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺(tái)】4. 詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方法5. layui Ajax請(qǐng)求給下拉框賦值的實(shí)例6. laravel ajax curd 搜索登錄判斷功能的實(shí)現(xiàn)7. 解決AJAX返回狀態(tài)200沒(méi)有調(diào)用success的問(wèn)題8. layui的checbox在Ajax局部刷新下的設(shè)置方法9. 告別AJAX實(shí)現(xiàn)無(wú)刷新提交表單10. Ajax實(shí)現(xiàn)表格中信息不刷新頁(yè)面進(jìn)行更新數(shù)據(jù)
排行榜
