1. 程式人生 > >ajax請求後臺得到json資料後動態生成樹形下拉框

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類中有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資料,動態生成下拉樹。

相關推薦

ajax請求後臺得到json資料動態生成樹形

<select id="cc" class="easyui-combotree" style="width:580px;" name="rempId"  data-options="required:true"></select> <scri

Jquery如何將Ajax後臺獲取的資料自動填充到省級選單

Ajax:Asynchronous JavaScript and XML(非同步的 JavaScript 和 XML),指前後端在不重新整理頁面的情況下交換資料,更新資料。html程式碼:       

jquery 根據後臺傳過來的值動態設置、單選選中

url selected ros info fun cte blog font function jquery 根據後臺傳過來的值動態設置下拉框、單選框選中 1 $(function(){ 2 var sex=$("#sex").val(); 3

java動態生成的Excel匯入模板

 在實際開發中,由於業務需要,常常需要進行Excel匯入匯出操作。以前做一些簡單的匯入時,先準備一個模板,再進行匯入,單有十幾、 二十幾個匯入模板時,往往要做十幾、二十幾個模板。而且,當在模板中需要有下拉框,而且下拉資料要實時查詢時,這樣的方法就不太好了; 現在,做成了動態生成匯入

jquery用ajax方式從後臺獲取json資料如何將內容填充到列表

從後臺獲取json資料,將內容填充到下拉列表,程式碼非常簡單,具體過程請看下面程式碼。 需求:url:連結     par:ID       sel:下拉列表選擇器 function BuildSelectBox(url, par, sel) { $(sel).emp

後臺傳輸json資料+前臺使用ajax請求並處理json資料

後臺使用response傳輸json資料(把從資料庫的list資料,改變為json資料傳輸到前臺。沒有使用@ResponseBody,其實這個也可以) @RequestMapping("/index") public void index(HttpSe

ajax請求後臺返回json的兩種處理方法

1.使用SpringMvc的@ResponseBody註解(直接將資料寫入到流中),這種方法需要在springmvc-config.xml檔案中進行編碼配置,具體如下 後臺程式碼: springmvc-config.xml配置檔案,需要新增jackson相關jar包: 2.直

前臺JS獲取後臺Json資料動態建立table並填充資料

原文:http://wkf41068.iteye.com/blog/1188302 mark一下,這個月要用的東西。主要是資料格式要好好看一下,之前發資料的時候就出現過資料型別不匹配導致post失敗 <!-- 測試點選“檢視流程記錄 ”時激發的JS -->

在使用ajax後臺傳送json資料,存在格式不正確的問題

在一次servlet伺服器的專案中,想在前臺使用json向後臺傳送請求,其中data的格式如下: var requestData = { "services": [{ "lightbulb" : [{"alpha":0}], "operat

ajax載入資料,bootstrap-select無反應

js程式碼: <script type="text/javascript" src="${ctx }/js/jquery.js"></script> <link href="${ctx }/css/bootstrap.min.css" rel

layui動態設置數據,根據臺數據設置選中

默認 前臺 並不是 cte == 找到 ble this style 追加下拉框數據: 設置默認選中: 正常的判斷這種情況是不行的,因為追加出的數據,在前臺顯示的並不是同一個下拉框,原來的下拉框被隱藏了 因此需要:根據原來的位置,尋找下一個節點,尋找子節點的方式找到相應的前

使用ajax動態載入select

本例子只是模擬一個動態獲取select值的過程,資料從xml獲取,當然你也可以從servlet、struts的action獲取,不多說看程式碼 1、student.xml <?xml version="1.0" encoding="UTF-8"?> <stu

MUI 二次上載入資料,再進行失效

在進行上拉過程中,當ajax返回後,我們會呼叫endPullupToRefresh()的方法,結束“正在載入......”的過程,當返回結果有資料,則傳false,提示"上拉顯示更多"的提示,當返回結果為空,沒有資料時,傳入true來結束,不再顯示“上拉顯示更多”的提示,而是

Java將後臺陣列資料繫結到select

         -------------第一種------------- 介面程式碼 <select name='dId' id="dId" >     <c:for

IE8無法顯示動態獲取的的值!

1)由於IE8無法用 myOption.text="平臺管理員";得到值,只能用myOption.innerText才能得到,在網上找了很多辦法,試過都不行,最後用了最笨的辦法,直接判斷瀏覽器! //開啟新增角色的對話窗 function toCreateRole() {

bootstrap動態呼叫select

html程式碼: <label for="classify" class="col-sm-2 control-label">填報部門:</label>

動態初始化以及修改操作時的賦值

寫在前面的話: 本部落格只是為了記錄我在工作中遇到的一些bug,以便日後重蹈覆轍,目前我還是一名在校大四學生,在公司實習不足半年,可能記錄的問題會非常簡單和出現一些錯誤,希望各位瀏覽的大

jquery實現動態載入select

如題,直接上程式碼,實戰學習。 <head><title>jquery實現動態載入select下拉選項</title> <script type="text/javascript"> function init(){ m

初學ajax,實現使用者名稱重複提示、二級/三級聯動

初學ajax,實現非同步操作!                 以下為三級聯動下拉框部分程式碼 jsp頁面部分程式碼 <table> <tr> <th>下拉框:</th> &l

關於AJAX請求後臺資料,接收後臺返回的JSON資料,以及前臺遍歷json資料和append追加元素。

在這兩天的學習以及練習過程中,需要涉及到微信小程式的一些東西。在小程式中,是不能直接跳轉後臺邏輯來獲取資料,而是通過使用AJAX傳值和AJAX請求,來向後臺邏輯傳遞資訊。 1,比如說註冊,填寫資訊之後,通過AJAX傳遞給後臺,後臺處理返回是否註冊成功的JSON資料,前臺再加以分析是否註冊成功,