jQuery EasyUI，ComboBox(下拉列表框)组件，可以远程加载数据的下拉列表组件
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 ComboBox(下拉列表框)组件的使用方法，这个组件依赖于 Combo(自定义下拉框)组件。
一．加载方式
class 加载方式
<select id="box" class="easyui-combobox" name="box" style="200px;"> <option value="aaaa">aaaa</option> <option value="bbbb">bbbb</option> <option value="cccc">cccc</option> <option value="dddd">dddd</option> <option value="eeee">eeee</option> </select>
JS 加载方式
<input id="box" name="user">
js代码
combobox()将一个input元素执行，(下拉列表框)组件
$(function () { $('#box').combobox({ valueField: 'id', textField: 'user', url: 'content.json', }); });
二．属性列表
远程content.json
[ { "user" : "蜡笔小新", "email" : "xiaoxin@163.com", "date" : "2014-10-1", "id":"1", "xb":"男" }, { "user" : "樱桃小丸子", "email" : "xiaowanzi@163.com", "date" : "2014-10-2", "id":"2", "xb":"女" }, { "user" : "黑崎一护", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"3", "xb":"男" }, { "user" : "黑崎2护", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"4", "xb":"女" }, { "user" : "黑崎3护", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"5", "xb":"男" }, { "user" : "黑崎4护", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"6", "xb":"女" }, { "user" : "黑崎5护", "email" : "yihu@163.com", "date" : "2014-10-3", "id":"7" ,"xb":"男" } ]
valueField string 基础数据值名称绑定到该下拉列表框。默认为 value。设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 }); });
textField string 基础数据字段名称绑定到该下拉列表框。默认值 text。设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 }); });
groupField string 指定分组的字段名称。默认值 null。通过数据库一个字段来分组如通过性别字段分组
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 groupField:'xb' //通过数据库一个字段来分组如通过性别字段分组 }); });
groupFormatter function(group)返回格式化后的分组标题文本，以显示分组项
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 groupField:'xb', //通过数据库一个字段来分组如通过性别字段分组 groupFormatter:function (group) { //返回格式化后的分组标题文本，以显示分组项 return '('+group+')'; } }); });
mode string定义了当文本改变时如何读取列表数据。设置为'remote'时，下拉列表框将会从服务器加载数据。当设置为“remote”模式时，用户输入将被发送到名为'q'的 HTTP 请求参数到服务器检索新数据。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 groupField:'xb', //通过数据库一个字段来分组如通过性别字段分组 groupFormatter:function (group) { //返回格式化后的分组标题文本，以显示分组项 return '('+group+')'; }, mode:'remote' //向服务器传递输入值来索引 }); });
url string 通过 URL 加载远程列表数据。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 }); });
method string HTTP 方法检索数据(POST / GET)。设置远程提交方式
data array 数据列表加载。本地化获取数据
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 // url: 'content.json', //URL 加载远程列表数据 groupField:'xb', //通过数据库一个字段来分组如通过性别字段分组 groupFormatter:function (group) { //返回格式化后的分组标题文本，以显示分组项 return '('+group+')'; }, mode: 'remote', //向服务器传递输入值来索引 data: [ { "user": "蜡笔小新", "email": "xiaoxin@163.com", "date": "2014-10-1", "id": "1", "xb": "男" }, { "user": "樱桃小丸子", "email": "xiaowanzi@163.com", "date": "2014-10-2", "id": "2", "xb": "女" } ] }); });
filter function定义当'mode'设置为'local'时如何过滤本地数据，函数有 2 个参数：q：用户输入的文本。row：列表行数据。返回 true 的时候允许行显示。过滤查找，mode不设置的情况下使用
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 groupField: 'xb', //通过数据库一个字段来分组如通过性别字段分组 groupFormatter: function (group) { //返回格式化后的分组标题文本，以显示分组项 return '(' + group + ')'; }, filter: function (q, row) { var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) >= 0; }, }); });
formatter function 定义如何渲染行。该函数接受 1 个参数：row。格式化下拉选项
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 groupField: 'xb', //通过数据库一个字段来分组如通过性别字段分组 groupFormatter: function (group) { //返回格式化后的分组标题文本，以显示分组项 return '(' + group + ')'; }, formatter: function (row) { //格式化下拉选项 var opts = $(this).combobox('options'); return '[' + row[opts.textField] + ']'; } }); });
loader function(param,success,error)定义了如何从远程服务器加载数据。返回false 可以忽略该动作。该函数具备如下参数：param：传递到远程服务器的参数对象。success(data)：在检索数据成功的时候调用该回调函数。error()：在检索数据失败的时候调用该回调函数。
loadFilter function(data) 返回过滤后的数据并显示。
三．事件列表
onBeforeLoad param在请求加载数据之前触发，返回 false 取消该加载动作。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 // groupField: 'xb', //通过数据库一个字段来分组如通过性别字段分组 onBeforeLoad:function () { //在请求加载数据之前触发，返回 false 取消该加载动作。 alert('在请求加载数据之前触发'); } }); });
onLoadSuccess none 在加载远程数据成功的时候触发。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 // groupField: 'xb', //通过数据库一个字段来分组如通过性别字段分组 onLoadSuccess:function () { //在加载远程数据成功的时候触发 alert('在加载远程数据成功的时候触发'); } }); });
onLoadError none 在加载远程数据失败的时候触发。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content2.json', //URL 加载远程列表数据 // groupField: 'xb', //通过数据库一个字段来分组如通过性别字段分组 onLoadError:function () { //在加载远程数据失败的时候触发 alert('在加载远程数据失败的时候触发'); } }); });
onSelect record 在用户选择列表项的时候触发。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 // groupField: 'xb', //通过数据库一个字段来分组如通过性别字段分组 onSelect:function () { //在用户选择列表项的时候触发 alert('在用户选择列表项的时候触发'); } }); });
onUnselect record 在用户取消选择列表项的时候触发。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 // groupField: 'xb', //通过数据库一个字段来分组如通过性别字段分组 onUnselect:function () { //在用户取消选择列表项的时候触发 alert('在用户取消选择列表项的时候触发'); } }); $('#ann').click(abc); //点击按钮后 function abc() { $('#box').combobox('unselect', 1); //取消选择列表 } });
三．方法列表
options none 返回属性对象。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 }); var shux = $('#box').combobox('options'); //返回属性对象 $.each(shux, function (attr, value) { //遍历 JavaScript 原生态的对象数组 alert(attr + ':' + value); }); });
getData none 返回加载数据。
loadData data 读取本地列表数据。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 // url: 'content.json', //URL 加载远程列表数据 }); $('#box').combobox('loadData',[{ //读取本地列表数据。 "user" : "蜡笔小新", "email" : "xiaoxin@163.com", "date" : "2014-10-1", "id":"1", "xb":"男" }]); });
reload url 请求远程列表数据。通过'url'参数重写原始URL 值。
setValues values 设置下拉列表框值数组。设置下拉列表框values值，数组方式也就是设置多个值
setValue value 设置下拉列表框的值。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 }); $('#box').combobox('setValue','555'); //设置下拉列表框的值 });
clear none 清除下拉列表框的值。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 }); $('#box').combobox('clear'); //清除下拉列表框的值 });
select value 选择指定项。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 }); $('#box').combobox('select',2); //选择指定项 });
unselect value 取消选择指定项。
$(function () { $('#box').combobox({ valueField: 'id', //设置下拉框的value值，如果是远程数据设置数据库指定的字段为value值 textField: 'user', //设置下拉框的text值，如果是远程数据设置数据库指定的字段为text值 url: 'content.json', //URL 加载远程列表数据 // groupField: 'xb', //通过数据库一个字段来分组如通过性别字段分组 onUnselect:function () { //在用户取消选择列表项的时候触发 alert('在用户取消选择列表项的时候触发'); } }); $('#ann').click(abc); //点击按钮后 function abc() { $('#box').combobox('unselect', 1); //取消选择列表 } });