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);