combobox里面显示checkbox
看了http://www.cnblogs.com/yubinfeng/p/4463418.html这篇博客,我添加了部分代码,以便在最后获取combobox的value时可以拿到一个数组。
HTML代码:
<input id="com" class="easyui-combobox"/>
<input type="button" value="按钮" id="btn"/>
此处代码来自http://www.cnblogs.com/yubinfeng/p/4463418.html
$("#com").combobox({
valueField : 'id',
textField : 'name',
url:'combobox.json',
panelMaxHeight: 300,
multiple: true,
formatter: function(row){
var opts = $(this).combobox('options');
return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
},
onShowPanel: function () {
var opts = $(this).combobox('options');
var target = this;
var values = $(target).combobox('getValues');
$.map(values, function (value) {
var el = opts.finder.getEl(target, value);
el.find('input.combobox-checkbox')._propAttr('checked', true);
})
},
onLoadSuccess: function () {
var opts = $(this).combobox('options');
var target = this;
var values = $(target).combobox('getValues');
$.map(values, function (value) {
var el = opts.finder.getEl(target, value);
el.find('input.combobox-checkbox')._propAttr('checked', true);
})
},
onSelect: function (row) {
console.log(row);
var opts = $(this).combobox('options');
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', true);
},
onUnselect: function (row) {
console.log(row);
var opts = $(this).combobox('options');
var el = opts.finder.getEl(this, row[opts.valueField]);
el.find('input.combobox-checkbox')._propAttr('checked', false);
} })
点击按钮,获取combobox的value时发现只能获取到下拉列表中的第一项value
添加以下代码即可获取所有value的数组集合。
$("#btn").click(function(){
var opts = $("#com").combobox("panel").find(".combobox-item.combobox-item-selected");
var rows = $("#com").combobox("getData"),value = [];
$.each(opts,function(i,v){
value.push(rows[$(v).index()].id);
})
console.log(value);
})
combobox里面显示checkbox的更多相关文章
- WinForm控件TreeView 只部分节点显示 CheckBox
WinForm控件TreeView 只部分节点显示 CheckBox 用过asp.net的应该知道,要在treeview中实现上述功能可以使用ShowCheckBox 属性指定那些节点显示check ...
- TreeView 自定义显示checkbox
本项目需要对TreeView进行定制,要求比较简单,主要要求如下: Winform中TreeView控件默认只支持所有级别的CheckBox显示或者不显示,不能控制制定Level的树节点显示 效果如下 ...
- Android 长按Listview显示CheckBox,实现批量删除。
ListView实现的列表,如果是可编辑,可删除的,一般都要提供批量删除功能,否则的话,一项一项的删除体验很不好,也给用户带来了很大的麻烦. 实现效果图 具体实现代码 select.xml 主布局文件 ...
- extjs中combobox默认显示第一个值
在进入页面时往往用户希望页面能够显示默认的内容,但是页面中会存在一些选项通过用户选择之后才会加载相应的内容.在这篇文章里面介绍了如何去设置页面中默认的内容,如combobox默认显示第一个值. 页面: ...
- combobox无法显示选中的数据,都是undefined
$('#firstfactor').combobox({ url: '@Url.Action("GetMultiAirFactor_Day_New", ...
- C# TreeView 自定义显示checkbox
本项目需要对TreeView进行定制,要求比较简单,主要要求如下: Winform中TreeView控件默认只支持所有级别的CheckBox显示或者不显示,不能控制制定Level的树节点显示 效果如下 ...
- cxGrid增加一栏显示checkBox的设置方法
鉴于本人首次设定cxGrid的CheckBox的时候费了很大劲,发现很多人都会碰到这个问题,现在总结一下,以供各位互相学习借鉴. 步骤如下(不分先后): 1. cxGrid添加完自己所需的所有字段后, ...
- Ajaxtoolkit Combobox位置显示不对解决
当父级容器设置positon是absolute或relative,combobox显示的就会出现偏移,解决办法如下: 添加这个样式 .ajax__combobox_itemlist{ posit ...
- easyui combobox 中实现 checkbox
$('#cc').combobox({ url:'combobox_data1.json', method:'get', valueField:'id', textField:'text', pane ...
随机推荐
- python用whl文件安装包
直接用pip安装包的时候有时会因为许多奇怪的原因安装失败,这时就需要祭出大杀器——whl文件 python3 -m pip install whl文件路径名 whl库:https://www.lfd. ...
- 《深入理解Linux网络技术内幕》阅读笔记 --- 路由表
路由表基本概念 1.路由是由多个不同的数据结构的组合来描述的,每个数据结构代表路由信息的不同部分.例如,一个fib_node对应一个单独的子网,一个fib_alias对应一条路由.这样做的原因是只需通 ...
- python创建进程的两种方式
1.方式1 import time import multiprocessing def task(arg): time.sleep(2) print(arg) def run(): # 进程1 p1 ...
- java中集合的扩容
对于Java中的各种集合类,根据底层的具体实现,小结了一下大致有3种扩容的方式: 1.对于以散列表为底层数据结构实现的,(譬如hashset,hashmap,hashtable等),扩容方式为当链表数 ...
- Ubuntu Linux下通过代理(proxy)使用git上github.com
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/loveaborn/article/details/24575659 github.com.作为程序猿 ...
- Android图片加载框架Picasso最全使用教程4
通过前几篇的学习,我们已经对Picasso的加载图片的用法有了很深的了解,接下来我们开始分析Picasso为我们提供的其他高级功能及内存分析,Let’sGo ! Picasso进行图片的旋转(Rota ...
- image_Magic
http://www.charry.org/docs/linux/ImageMagick/ImageMagick.html mogrify -sample 25% *.jpg 批量处理图片 conv ...
- HDU - 6336 Problem E. Matrix from Arrays (规律+二维前缀和)
题意: for (int i = 0; ; ++i) { for (int j = 0; j <= i; ++j) { M[j][i - j] = A[cursor]; cursor = (cu ...
- 微信小程序获取验证码倒计时
getVerificationCode: function() { var that = this; var currentTime = that.data.currentTime; that.set ...
- Entity FrameWork 配置 之连接字符串隐藏或重用
C/S项目中使用EF,默认回生成app.config文件夹,软件打包安装成功之后就回生成一个对应exe.config.里面会包含配置的一些信息. 这里介绍给大家一种隐藏连接字符串的方式. 代码如下: ...