Jquery combobox的使用总结----持续更新

最近一个项目要在下拉框中添加复选框，然后在这个过程中，发现越来越多的实现方法，在这里记录一下combobox。

文章最后我会贴一下代码。

先贴一个实例，直接运行就是Jquery的复选框就可以出现了，这是最基本的功能。

function initCombobox(id){var value = "";// 加载下拉框复选框$('#'+id).combobox({panelHeight:'100',// 设置为固定高度，combobox出现竖直滚动条，auto自适应multiple:true,// 设置多选// formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法formatter: function (row) {//格式化选项，加载复选框var opts = $(this).combobox('options');return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]},onLoadSuccess: function () {  // 下拉框数据加载成功调用var opts = $(this).combobox('options');var target = this;var values = $(target).combobox('getValues');// 获取选中的值的values$.map(values, function (value) {var el = opts.finder.getEl(target, value);el.find('input.combobox-checkbox')._propAttr('checked', true);})},onSelect: function (row) { // 选中一个选项时调用var opts = $(this).combobox('options');// 获取选中的值的values$("#"+id).val($(this).combobox('getValues'));// 设置选中值所对应的对应的复选框为选中状态var el = opts.finder.getEl(this, row[opts.valueField]);el.find('input.combobox-checkbox')._propAttr('checked', true);},onUnselect: function (row) {// 不选中一个选项时调用var opts = $(this).combobox('options');// 获取选中的值的values$("#"+id).val($(this).combobox('getValues'));var el = opts.finder.getEl(this, row[opts.valueField]);el.find('input.combobox-checkbox')._propAttr('checked', false);}});
}

1.我们上述实例，调用了formatter属性

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

在这里就要讲一下row这个参数，这个参数是formatter自带的，是代表了当前处理行的参数。

包括value，text，selected，disable。

value 就是传给后台的值，text就是显示在页面上的值，selected是代表选中，disable代表禁用。

取值和赋值的方式就是：

row.value
row.text
row.selected
row.disable

2.我们上述实例，调用了multiple属性

true: 下拉框可以选多个

3.调用了panelHeight属性：

auto: 高度自适应，比如你有100个，就会出现100个的高度

4.继续其他属性:

data:可以加载本地数据，即固定值。

filter：过滤器，可以过滤不显示的数据，一般后台就会处理这件事。q：用户输入的文本

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

属性大概常用就这些，说一下事件：

5.onBeforeLoad：在请求加载数据之前触发，返回 false 则取消加载动作

// 比如权限不符合，可以返回false，不再加载数据。也可以在请求后台前的赋值

$('#cc').combobox({onBeforeLoad: function(param){param.id = 2;param.language = 'js';}
});

6.onLoadSuccess：当远程数据加载成功时触发

// 这个在上述实例中使用了

7.onLoadError：当远程数据加载失败时触发

8.onSelect：当用户选择一个列表项时触发

9.onUnselect：当用户取消选择一个列表项时触发

这几个事件都很重要，可以参照实例

下面是方法：

10.getData:返回加载的数据.比如你已经选中两个了，调用方法返回的数据就是你现在选中的数据。注意是你选中了的！

11.loadData：加载数据，这个数据是你给的。

data可以是一行，也可以是多行。给个截图参照下：

$('#cc').combobox('loadData', data);

12.reload：远程获取数据

$('#cc').combobox('reload');  // 请求原来的Url
$('#cc').combobox('reload','get_data.php');

13.setValue / setValues：设置组合框的值

$('#cc').combobox('setValues', ['001','002']);
$('#cc').combobox('setValue', '001');

14.clear:清空

$('#'+id).combobox("clear");

15.select / unselect 设置选中/取消选中

$("#"+id).combobox('setValues', selecteditem);

最后贴一下我自己的代码，如有需要优化的可以评论或私聊我:

var idsCombo = ['ptlx'];$(function(){comboboxGo();
});function comboboxGo(){for(var ind in idsCombo){initCombobox(idsCombo[ind]);}
}function clearComboboxGo(){for(var ind in idsCombo){clearFirstOption(idsCombo[ind]);}
}function clearFirstOption(id){$('#'+id).combobox("clear");var valueJson = $('#'+id).combobox('getData');valueJson[0].selected=false;valueJson[0].disabled=true;for(var i in valueJson){valueJson[i].selected=false;}$('#'+id).combobox('loadData', valueJson);// 获取选中的值的values
}function initCombobox(id){// 加载下拉框复选框$('#'+id).combobox({panelHeight:'100',// 设置为固定高度，combobox出现竖直滚动条multiple:true,// formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法formatter: function (row) {var opts = $(this).combobox('options');if(row[opts.valueField]==''){//disabled style="display:none" selected valuereturn}return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]},onLoadSuccess: function () {  // 下拉框数据加载成功调用var opts = $(this).combobox('options');var target = this;var values = $(target).combobox('getValues');// 获取选中的值的values$.map(values, function (value) {var el = opts.finder.getEl(target, value);el.find('input.combobox-checkbox')._propAttr('checked', true);})},onSelect: function (row) { // 选中一个选项时调用var localdata = $('#'+id).combobox('getData');var opts = $(this).combobox('options');// 获取选中的值的values$("#"+id).val($(this).combobox('getValues'));for (var local in localdata){// 对当前的选项数据操作if(localdata[local].value==''){localdata[0].selected=false;localdata[0].disabled=true;continue;}if(localdata[local].value==row.value){localdata[local].selected=true;break;}}// 设置选中值所对应的复选框为选中状态var el = opts.finder.getEl(this, row[opts.valueField]);el.find('input.combobox-checkbox')._propAttr('checked', true);$('#'+id).combobox("clear");// 清空输入框$('#'+id).combobox('loadData', localdata);// 加载数据},onUnselect: function (row) {// row 就是哪一行的对象// 不选中一个选项时调用var opts = $(this).combobox('options');// 获取选中的值的values$("#"+id).val($(this).combobox('getValues'));var localdata = $('#'+id).combobox('getData');for (var local in localdata){ // 对当前的选项数据操作if(localdata[local].value==''){continue;}if(localdata[local].value==row.value){// 如果值相同，就置falselocaldata[local].selected=false;break;}}var el = opts.finder.getEl(this, row[opts.valueField]);el.find('input.combobox-checkbox')._propAttr('checked', false);}});
}

有想交流的朋友，可以和我私聊或者评论。

Jquery combobox的使用总结----持续更新相关推荐

Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
jQuery基础文档(持续更新)
文章目录 jQuery基础文档(持续更新) 1 jQuery入门仪式: jQuery基础文档(持续更新) 1 jQuery入门仪式: 还是先上一段代码吧,对照这看: <!DOCTYPE html ...
Java 最常见的 10000+ 面试题及答案整理：持续更新
Java面试题以及答案整理[最新版]Java高级面试题大全(2021版),发现网上很多Java面试题都没有答案,所以花了很长时间搜集,本套Java面试题大全,汇总了大量经典的Java程序员面试题以及答 ...
GitHub：GitHub简介、使用方法、经验总结(图文教程)之详细攻略(持续更新！)
GitHub:GitHub简介.使用方法.经验总结(图文教程)之详细攻略(持续更新!) 目录 GitHub简介 1.GitHub发展历程 2.GitHub特点 3.GitHub六大基本功能 4.Git ...
JavaScript 编码规范大全-Eslint（持续更新，欢迎关注点赞加评论）
JavaScript 编码规范大全(持续更新,欢迎关注点赞加评论) 文章目录 JavaScript 编码规范大全(持续更新,欢迎关注点赞加评论) 前言 0. 相关工具 1. 类型 2. 引用 3. 对 ...
若依开发文档手册[持续更新:拥抱初次使用若依的开发者]
这篇布局太乱看着太累了重新把为文档布局调整了一下之后的更新内容会在新地址发布: [https://blog.csdn.net/weixin_42059737/article/details/988 ...
Android面试总结（持续更新修改）
###Android面试总结(持续更新修改) 1.Android 的四大组件是哪些,它们的作用? ①Activity是Android程序与用户交互的窗口,是Android构造块中最基本的一种,它需要为 ...
前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码并基于前端进阶 ...
前端面试题精编2020（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）持续更新
文档描述本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue react node.js 全栈)前端资源以及后端视频资源和源码并基于前端进阶 ...

Jquery combobox的使用总结----持续更新

Jquery combobox的使用总结----持续更新相关推荐

最新文章

热门文章