easyUI實作下拉框二級關聯的詳細步驟

級聯下拉框在添加操作中的運用

思路：先動态擷取分公司清單，存入下拉框；根據分公司下拉框的值動态擷取車隊清單。

其中，分公司或車隊清單的資料格式如下：

//分公司清單資料格式
[{
   "id":"4567894165181",
   "branchName":"分公司一"
},
 {
   "id":"1985623315145",
   "branchName":"分公司二"
 },
 {
   "id":"2012456783926",
   "branchName":"分公司三"
 }]
//車隊清單資料格式
[{
   "id":"0715145217781",
   "motorcadeName":"一車隊"
},
 {
   "id":"2020070715145",
   "motorcadeName":"二車隊"
 },
 {
   "id":"2020077953926",
   "motorcadeName":"三車隊"
 }]
           

JS頁面中的實作代碼如下：

//級聯下拉框
	$('#lineBranchName').combobox({ 
        url:'geBranchList', //HTTP請求資源，得到分公司清單，資料格式為JSON格式
        editable:false, //設定下拉框為不可編輯狀态
        cache: false,
        panelHeight: '150',//自适應高度
        valueField:'id',  //指派給下拉框的Value 
        textField:'branchName',	//指派給下拉框的Text
        onLoadSuccess:function(){
        	$('#lineBranchName').combobox("setText","-請選擇-");	//設定Text的預設值
        },
        onHidePanel: function(){
	      $("#lineMotorcade").combobox("setValue",'');	//清空車隊下拉框的資料
	      var id = $('#lineBranchName').combobox('getValue');	//擷取目前分公司下拉框的value
	      $.ajax({
	    	  url: 'geMotorcadeList?branchId='+id,	//擷取該分公司的車隊
	    	  cache: false,
	    	  success: function(data){
	    		  $("#lineMotorcade").combobox("loadData",data);//裝載傳回的JSON資料
	    		  $("#lineMotorcade").combobox("setValue",data[0].id);//預設選中第一條資料
	          }
	      }); 	
        }
	 });
	 $('#lineMotorcade').combobox({ 
	     editable:false, //不可編輯狀态
	     cache: false,
	     panelHeight: '150',//自适應高度
	     valueField:'id',  //指派給下拉框的Value 
	     textField:'motorcadeName' //指派給下拉框的Text
	 });
           

級聯下拉框在編輯操作中的運用

思路：①初始化資料

​ 先擷取分公司清單，周遊傳回的JSON對象，比對與需要編輯的對象的屬性一緻的資料，選中；

​ 根據比對到的分公司ID擷取車隊清單，周遊，比對，選中。

​ ②級聯操作（與添加操作一緻）

​ 修改時，根據分公司ID擷取車隊清單，裝載進車隊下拉框。

JS頁面中的實作代碼如下：

//級聯下拉框
	$('#lineBranchName').combobox({ 
        url:'geBranchList', 
        editable:false, 
        cache: false,
        panelHeight: '150',
        valueField:'id',   
        textField:'branchName',
        onLoadSuccess:function(data){
            //周遊JSON對象
        	for(var i=0;i<data.length;i++){
                //bn為編輯對象的屬性，擷取方式在此不做叙述
        		if(data[i].branchName==bn){
        			$('#lineBranchName').combobox("setValue",data[i].id);//比對成功後選中
        			//擷取對應的車隊清單
                    $.ajax({
        		    	  url: 'geMotorcadeList?branchId='+data[i].id,
        		    	  cache: false,
        		    	  success: function(data){
        		    		  $("#lineMotorcade").combobox("loadData",data);
        		    		  //周遊JSON對象，進行比對
                              for(var j=0;j<data.length;j++){
        		    			  if(data[j].motorcadeName==mn){
        		    				  $("#lineMotorcade").combobox("setValue",data[j].id);
        		    			  }
        		    		  }
        		          }
        		    }); 
        		}
        	}
        },
        //此步驟與添加操作的相同
        onHidePanel: function(){
	      $("#lineMotorcade").combobox("setValue",'');//清空車隊下拉框資料
	      var id = $('#lineBranchName').combobox('getValue');	
	      $.ajax({
	    	  url: 'geMotorcadeList?branchId='+id,
	    	  cache: false,
	    	  success: function(data){
	    		  $("#lineMotorcade").combobox("loadData",data);
	    		  $("#lineMotorcade").combobox("setValue",data[0].id);
	          }
	      }); 	
        }
	 });
	 $('#lineMotorcade').combobox({ 
	     editable:false, //不可編輯狀态
	     cache: false,
	     panelHeight: '150',//自動高度适合
	     valueField:'id',   
	     textField:'motorcadeName'
	 });
           

效果圖

添加操作：

編輯操作：