easyUI框架下使用下拉框的級聯查詢
阿新 • • 發佈:2019-01-08
在使用easyui框架中,我們需要用到一個涉及很多表的的級聯查詢,傳統的做法是,先通過ajax拿到選中的id去資料庫查詢相應的list資料,然後再ajax的success方法中appendTo到下一個下拉框中,但這次我們使用easyUI,其實原理都是相同的,只是easyUI有它自己的格式和寫法,下面說下我的寫法
首先是我級聯查詢出來的效果圖
前臺的js程式碼,使用easyUI的格式,通過url在後臺查詢出相應的list資料,轉為json格式
$('#agent').combobox({ url:'login/agentList.action', editable:false, //不可編輯狀態 cache: false, // panelHeight: 'auto',//自動高度適合 valueField:'agentId', textField:'agentName', onHidePanel: function(){ var province = $('#agent').combobox('getValue'); if(province!=''){ $.ajax({ type: "POST", url: "login/areaList.action?id="+province, cache: false, dataType : "json", success: function(data){ $("#area").combobox("loadData",data); } }); } } });
在onHidePanel中,獲取所選中的代理商的id,通過url傳給後臺進行查詢,查詢結果就是data,後面接下面的js
以上兩段js就是通過easyUI進行兩張表的級聯查詢,以此類推,我自己是做的9張表的級聯,沒有問題$('#area').combobox({ url:'login/productList.action', editable:false, //不可編輯狀態 cache: false, // panelHeight: 'auto',//自動高度適合 valueField:'areaId', textField:'areaName', });