1. 程式人生 > >easyui複選框combobox

easyui複選框combobox

//引數:id  控制元件id   posturl 路徑
function initCombobox(id,code){
	var value = "";
	//載入下拉框複選框
	$('#'+id).combobox({
		url:  posturl ,//後臺獲取下拉框資料的url
		method:'post',
		panelHeight:200,//設定為固定高度,combobox出現豎直滾動條
		valueField:'CODE',
		textField:'NAME',
		multiple:true,
		formatter: function (row) { //formatter方法就是實現了在每個下拉選項前面增加checkbox框的方法
		var opts = $(this).combobox('options');
			return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
		},
		/**
		prompt : "輸入首關鍵字自動檢索",
		filter: function(q, row){
			var opts = $(this).combobox("options");
			return row[opts.textField].indexOf(q) == 0;
		}
		*/
		onLoadSuccess: function () {  
		/**
		//載入完成後,設定選中第一項
	    var data = $("#enterprise_type").combobox("getData");
	     $("#enterprise_type").combobox("select",data[0].value);
		*/
			//下拉框資料載入成功呼叫
			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); 
			})
		},
		// oncahnge控制全選之後不可再選中其他值
		onChange:function(valueArray){
			var opts = $(this).combobox('options');
	   		if(valueArray ==null){
	   			return;
	  		}
	    	var values = valueArray.join(",");
	    	if(values.indexOf('000000')!=-1){
		    	console.log("=======選中全國了");
		   	 	$("#"+id).combobox('setValues',['000000']);
		       	var el = opts.finder.getEl(this, '000000');
		   		el.find('input.combobox-checkbox')._propAttr('checked', true);
		        return;
	    	}else{
		        //獲取選中的值的values
		        $("#"+id).val($(this).combobox('getValues'));
		        var el = opts.finder.getEl(this, $(this).combobox('getValues'));
		        el.find('input.combobox-checkbox')._propAttr('checked', true);
	    	}
	},
	onSelect: function (row) { //選中一個選項時呼叫
		var opts = $(this).combobox('options');
		//獲取選中的值的values
		$("#"+id).val($(this).combobox('getValues'));
		//設定選中值所對應的複選框為選中狀態
		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'));
		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'))