Jquery combobox的使用總結----持續更新

最近一個項目要在下拉框中添加複選框，然後在這個過程中，發現越來越多的實現方法，在這裏記錄一下combobox。

文章最後我會貼一下代碼。

 

先貼一個實例，直接運行就是Jquery的複選框就可以出現了，這是最基本的功能。

function initCombobox(id){
	var value = "";
	// 加載下拉框複選框
	$('#'+id).combobox({
		panelHeight:'100',// 設置爲固定高度，combobox出現豎直滾動條，auto自適應
		multiple:true,// 設置多選
		// formatter方法就是實現了在每個下拉選項前面增加checkbox框的方法
		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
			$("#"+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);
		}
	});
}

1.我們上述實例，調用了formatter屬性

$('#cc').combobox({
    formatter: function(row){
        var opts = $(this).combobox('options');
        return row[opts.textField];
    }
});

在這裏就要講一下row這個參數，這個參數是formatter自帶的，是代表了當前處理行的參數。

包括value，text，selected，disable。

value 就是傳給後臺的值，text就是顯示在頁面上的值，selected是代表選中，disable代表禁用。

取值和賦值的方式就是：

row.value
row.text
row.selected
row.disable

2.我們上述實例，調用了multiple屬性

true: 下拉框可以選多個

3.調用了panelHeight屬性：

auto: 高度自適應，比如你有100個，就會出現100個的高度

4.繼續其他屬性:

data:可以加載本地數據，即固定值。

filter：過濾器，可以過濾不顯示的數據，一般後臺就會處理這件事。q：用戶輸入的文本

$('#cc').combobox({
    filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});

屬性大概常用就這些，說一下事件：

5.onBeforeLoad：在請求加載數據之前觸發，返回 false 則取消加載動作

// 比如權限不符合，可以返回false，不再加載數據。也可以在請求 後臺前的賦值

$('#cc').combobox({
    onBeforeLoad: function(param){
        param.id = 2;
        param.language = 'js';
    }
});

6.onLoadSuccess：當遠程數據加載成功時觸發

// 這個在上述實例中使用了

7.onLoadError：當遠程數據加載失敗時觸發

8.onSelect：當用戶選擇一個列表項時觸發

9.onUnselect：當用戶取消選擇一個列表項時觸發

這幾個事件都很重要，可以參照實例

下面是方法：

10.getData:返回加載的數據.比如你已經選中兩個了，調用方法返回的數據就是你現在選中的數據。注意是你選中了的！

11.loadData：加載數據，這個數據是你給的。

data可以是一行，也可以是多行。給個截圖參照下：

$('#cc').combobox('loadData', data);

12.reload：遠程獲取數據

$('#cc').combobox('reload');  // 請求原來的Url
$('#cc').combobox('reload','get_data.php');

13.setValue / setValues：設置組合框的值

$('#cc').combobox('setValues', ['001','002']);
$('#cc').combobox('setValue', '001');

14.clear:清空

$('#'+id).combobox("clear");

15.select / unselect 設置選中/取消選中

$("#"+id).combobox('setValues', selecteditem);

最後貼一下我自己的代碼，如有需要優化的可以評論或私聊我:

var idsCombo = ['ptlx'];

$(function(){
	comboboxGo();
});

function comboboxGo(){
	for(var ind in idsCombo){
		initCombobox(idsCombo[ind]);
	}
}

function clearComboboxGo(){
	for(var ind in idsCombo){
		clearFirstOption(idsCombo[ind]);
	}
}

function clearFirstOption(id){
	$('#'+id).combobox("clear");
	var valueJson = $('#'+id).combobox('getData');
	valueJson[0].selected=false;
	valueJson[0].disabled=true;
	for(var i in valueJson){
		valueJson[i].selected=false;
	}
	$('#'+id).combobox('loadData', valueJson);// 獲取選中的值的values
}

function initCombobox(id){
	// 加載下拉框複選框
	$('#'+id).combobox({
		panelHeight:'100',// 設置爲固定高度，combobox出現豎直滾動條
		multiple:true,
		// formatter方法就是實現了在每個下拉選項前面增加checkbox框的方法
		formatter: function (row) {
			var opts = $(this).combobox('options');
			if(row[opts.valueField]==''){//disabled style="display:none" selected value
				return
			}
			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 localdata = $('#'+id).combobox('getData');
			var opts = $(this).combobox('options');
			// 獲取選中的值的values
			$("#"+id).val($(this).combobox('getValues'));
			for (var local in localdata){// 對當前的選項數據操作
				if(localdata[local].value==''){
					localdata[0].selected=false;
					localdata[0].disabled=true;
					continue;
				}
				if(localdata[local].value==row.value){
					localdata[local].selected=true;
					break;
				}
			}
			// 設置選中值所對應的複選框爲選中狀態
			var el = opts.finder.getEl(this, row[opts.valueField]);
			el.find('input.combobox-checkbox')._propAttr('checked', true);
			$('#'+id).combobox("clear");// 清空輸入框
			$('#'+id).combobox('loadData', localdata);// 加載數據
		},
		onUnselect: function (row) {// row 就是哪一行的對象
			// 不選中一個選項時調用
			var opts = $(this).combobox('options');
			// 獲取選中的值的values
			$("#"+id).val($(this).combobox('getValues'));
			var localdata = $('#'+id).combobox('getData');
			for (var local in localdata){ // 對當前的選項數據操作
				if(localdata[local].value==''){
					continue;
				}
				if(localdata[local].value==row.value){// 如果值相同，就置false
					localdata[local].selected=false;
					break;
				}
			}
			var el = opts.finder.getEl(this, row[opts.valueField]);
			el.find('input.combobox-checkbox')._propAttr('checked', false);
		}
	});
}

有想交流的朋友，可以和我私聊或者評論。