第二百二十三节,jQuery EasyUI,ComboBox(下拉列表框)组件
jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件
学习要点:
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解 EasyUI 中 ComboBox(下拉列表框)组件的使用方法,这个组件依赖于 Combo(自定义下拉框)组件。
一.加载方式
class 加载方式
<select id="box" class="easyui-combobox" name="box" style="width: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); //取消选择列表
} });
第二百二十三节,jQuery EasyUI,ComboBox(下拉列表框)组件的更多相关文章
- 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- 第三百二十三节,web爬虫,scrapy模块以及相关依赖模块安装
第三百二十三节,web爬虫,scrapy模块以及相关依赖模块安装 当前环境python3.5 ,windows10系统 Linux系统安装 在线安装,会自动安装scrapy模块以及相关依赖模块 pip ...
- 第二百二十六节,jQuery EasyUI,Tree(树)组件
jQuery EasyUI,Tree(树)组件 本节课重点了解 EasyUI 中 Tree(树)组件的使用方法,这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件. 一.加 ...
- 第二百二十九节,jQuery EasyUI,后台管理界面---后台登录
jQuery EasyUI,后台管理界面---后台登录 登录原理图 一,login.php,登录界面 <!DOCTYPE html> <html> <head> & ...
- 第二百二十八节,jQuery EasyUI,TreeGrid(树形表格)组件
jQuery EasyUI,TreeGrid(树形表格)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 TreeGrid(树形表格)组件的使 ...
- 第二百二十五节,jQuery EasyUI,PropertyGird(属性表格)组件
jQuery EasyUI,PropertyGird(属性表格)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 PropertyGird(属性表格)组件的 ...
- 第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件
jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的 ...
- 第二百二十节,jQuery EasyUI,Slider(滑动条)组件
jQuery EasyUI,Slider(滑动条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法,这个 ...
- 第二百零八节,jQuery EasyUI,SplitButton(分割按钮菜单)组件
jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用 ...
随机推荐
- Android打印机--小票打印格式及模板设置
小票打印就是向打印设备发送控制打印格式的指令集,而这些打印格式须要去查询相应打印机的API文档,这里我把经常使用的api给封装了一下 文字对齐方式 打印字体大小 字体是否加粗 打印二维码 打印条形码 ...
- redis学习笔记——初始化
初始化服务器状态结构 redis中一个最重要的数据结构是redis_server,会创建一个这个结构的全局变量server,初始化服务器的第一步就是创建一个struct redisServer类型的实 ...
- rails引入bootstrap
1.在Gemfile中增加 gem 'bootstrap-sass', '~> 3.2.0.2'2.bundle install3.把assets/stylesheets/application ...
- Codeforces Beta Round #17 C. Balance (字符串计数 dp)
C. Balance time limit per test 3 seconds memory limit per test 128 megabytes input standard input ou ...
- 从服务端架构设计角度,深入理解大型APP架构升级
随着智能设备普及和移动互联网发展,移动端应用逐渐成为用户新入口,重要性越来越突出.但企业一般是先有PC端应用,再推APP,APP 1.0版的功能大多从现有PC应用平移过来,没有针对移动自身特点考虑AP ...
- [读后感]Java 控制台执行 Jar 传參的编码问题
下面这版面,太让我纠结了.谁能帮调整一下,... _________________ java -jar test.jar "一二一" 这样传进去的 "一二一" ...
- 使用 dbdeploy.net 管理数据库变更
使用 dbdeploy.net 管理数据库变更 没有包含数据库的持续集成都是假的.这可不是我说的.一直以来都没能找到一个理想的数据库变更管理工具.直到转了 java 再回来,才发现 dbdeploy ...
- java数据库编程:JDBC操作及数据库
掌握JDBC操作步骤, 掌握数据库驱动程序配置 可以使用JDBC进行数据库连接. JDBC本身是一个标准,因此操作步骤是固定的,以后只需要修改很少代码就可以达到不同数据库间连接转换功能. 操作步骤: ...
- java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter /struts2.1.3以前版本和之后版本区别/新版Eclipse找不到Java EE Module Dependencies选项
严重: Exception starting filter struts2java.lang.ClassNotFoundException: org.apache.struts2.dispatcher ...
- Cocos2d-X中的ZORDER和Tag
ZORDER:是描写叙述渲染顺序的值,每一个CCNode都有ZORDER,默认是0 ZORDER越大,越后面绘制 假设ZORDER同样.那么看arrival顺序.先增加的节点先绘制 ZORDER仅仅在 ...