easyui combobox下拉框實現多選框以及全選、全不選的實現
實現效果如下圖：
當勾選全選的時候，可以選中下列所有的選項，當取消勾選時可取消所有勾選。
廢話不多說 貼程式碼吧：
前端程式碼:
//這裡的id是上面的combobox的id,因為我要在點選一個按鈕的之後再動態的加載出來，所以我把它單獨的抽取出來了。如果需要一開始就載入資料載入方式為：
$(function(){
initCombobox(id);//id為你上面的控制元件id，例如我的控制元件id為fhry,那麼我這裡呼叫就是initCombobox(fhry);這個方法可以放在任何一個function中呼叫。
)
function initCombobox(id){
var value="";
$('#'+id).combobox({
url: '${base}/ht/getComboboxData.action?dictionaryCode='+code',//你要載入資料的後臺連結
method:'post',
panelHeight:200,
valueField:'text',
textField:'text',
multiple:true,
queryParams : {
xlname:$('#xltree').tree('getSelected').text,
whqd:selectgd
}//引數，可根據自己的需要來修改或者不要
formatter:function(row){
var opts=$(this).combobox('options');
return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
},
onLoadSuccess:function(){
var opts = $(this).combobox('options');
var target = this;
var values = $(target).combobox('getValues');//獲取選中的值的values
$.map(values, function (value) {
var el = opts.finder.getEl(target, value);
el.find('input.combobox-checkbox')._propAttr('checked', true);
})
},
onSelect: function (row) { //選中一個選項時呼叫
var opts = $(this).combobox('options');
//獲取選中的值的values
var name=$("#"+id).val($(this).combobox('getValues'));
//當點選全選時，則勾中所有的選項
if(name="全選"){
var a= $("#"+id).combobox('getData');
for(var i=0;i<a.length;i++){
var el = opts.finder.getEl(this, a[i].text);
el.find('input.combobox-checkbox')._propAttr('checked', true);
}
}
//設定選中值所對應的複選框為選中狀態
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', true);
},
onUnselect: function (row) {//不選中一個選項時呼叫
var opts = $(this).combobox('options');
//獲取選中的值的values
$("#"+id).val($(this).combobox('getValues'));
//當取消全選勾中時，則取消所有的勾選
if($(this).combobox('getValues')=="全選"){
var a= $("#"+id).combobox('getData');
for(var i=0;i<a.length;i++){
var el = opts.finder.getEl(this, a[i].text);
el.find('input.combobox-checkbox')._propAttr('checked', false);
}
}
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', false);
}
});
}
我們在選中和取消選中的時候都通過：$(this).combobox('getValues')獲取一下combobox的值，然後再將獲取的值賦值給$("#"+id).val($(this).combobox('getValues'))
後臺獲取下拉框資料的url: '${base}/ht/getComboboxData.action?dictionaryCode='+code, 程式碼實現如下：
Controller層：
@RequestMapping(value = "/getComboboxData")
@ResponseBody
public String getComboboxData(HttpServletRequest request,String dictionaryCode) {
String data ;
JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
try{
List<Map> resultList = tPersonService.getComboboxData(dictionaryCode);
if(!resultList.isEmpty()){
for(Map<String,Object> lb : resultList){
json.put("CODE", lb.get("CODE"));
json.put("NAME", lb.get("NAME"));
array.add(json);
}
}
data = array.toString();
} catch (Exception e) {
data = "{}" ;
}
return data;
}
Service 層：
public List<Map> getComboboxData(String dictionaryCode) {
String sql = "select * from cendic.d_dictionary_item t where t.d_code= ? order by t.code" ;
Query query = commonDao.createSQLQuery(sql, null, null,new Object[]{dictionaryCode});
List<Map> list = query.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();
return list;
}
getComboboxData方法主要是為了從資料庫獲取下拉框的要載入的資料
其實我要獲取這個下拉框選中的多個值，主要是為了實現我的查詢功能，因為這些選中的值將 作為我在人員資訊表中查詢人員資訊的查詢條件，這就涉及到我們需要將下拉框獲取的值傳遞到後臺，然後拆分出每個值，然後寫入資料庫查詢語句，進行查詢
1、將值傳遞到後臺很簡單，我在這裡不在多做說明，因為我們前臺已經通過 $("#xsry").val()獲取到了選中的值的，比如獲取的值為：“1，2，3”
2、可是前臺傳遞過來的值，我們在後臺是不能直接用的，因為它是有一個字串，
後臺如何將獲取的值進行拆分，寫成資料庫可以識別的查詢語句，程式碼如下：
String xsry = param.get("xsry").toString(); //獲取前臺傳過來的值"1,2,3"
if(StringUtils.isNotBlank(xsry)){
String[] array = xsry.split(",") ; //拆分字串，分隔符為','
String temp = "";
for (int i = 0; i < array.length; i++) //這個FOR迴圈就是加單引號
{
array[i] = "'" + array[i] + "'";
}
temp = StringUtils.join(array, ","); //temp變為 '1','2','3'
//sql :變成了A.XSRY in ('1','2','3')
sql += " AND A.XSRY in ( " + temp + " ) " ;
}