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