EasyUI 學習使用筆記

現在項目中用到EasyUI作爲前臺基礎框架，邊學習邊記錄。

combox

<input id="cc" name="dept" value="aa">
 
$('#cc').combobox({    
    url:'combobox_data.json',    
    valueField:'id',    
    textField:'text'   
});  

groupFormatter屬性：function(group)  返回格式化後的分組標題文本，以顯示分組項（該屬性自1.3.4版開始可用）

代碼示例：

$('#cc').combobox({
	groupFormatter: function(group){
		return '<span style="color:red">' + group + '</span>';
	}
});

效果圖下圖1.1所示

圖1.1

mode 屬性：定義了當文本改變時如何讀取列表數據。設置爲'remote'時，下拉列表框將會從服務器加載數據。當設置爲“remote”模式時，用戶輸入將被髮送到名爲'q'的HTTP請求參數到服務器檢索新數據。

filter屬性：function參數 定義當'mode'設置爲'local'時如何過濾本地數據，函數有2個參數：q：用戶輸入的文本。row：列表行數據。返回true的時候允許行顯示。

代碼示例：

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

formatter屬性：function參數 定義如何渲染行。該函數接受1個參數：row。

代碼示例：

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

loadData方法：data參數，讀取本地列表數據。如果需要動態改變combobox的data可以使用loaddata方法。

代碼示例：

var arrayObj = [ {
			'id' : '1',
			'text' : 'data1'
		}, {
			'id' : '2',
			'text' : 'data2'
		}, {
			'id' : '3',
			'text' : 'data3'
		} ];

		arrayObj.push({
			'id' : '4',
			'text' : 'data4'
		})
		
		//$('#cc2').combobox('setValues', arrayObj);
		//var opts = $('#cc2').combobox('options');
		//opts.data = arrayObj;

		$('#cc2').combobox('loadData', arrayObj);