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基础之练习题(一)
1.执行 Python 脚本的两种方式 python test.py chmod +x test.py && ./test.py 2.简述位.字节的关系 二进制位(bit)是计算机存储 ...
- PHP引用符&的用法详细解析
本文转自:http://blog.csdn.net/vip_linux/article/details/10206091PHP中引用符&的用法.关于php的引用(就是在变量或者函数.对象等前面 ...
- beego——参数配置
beego目前支持INI.XML.JSON.YAML格式的配置文件解析,但是默认采用了INI格式解析,用户可以通过简单的配置就可以获得很大的灵活性. 一.默认配置解析 beego 默认会解析当前应用下 ...
- go——结构
Go语言中数组可以存储同一类型的数据,但在结构体中我们可以为不同项定义不同的数据类型.结构体是由一系列具有相同类型或不同类型的数据构成的数据集合. 结构体定义需要使用type和struct语句.str ...
- 什么是 jQuery 和jQuery的基本选择器,层级选择器,基本筛选器
jQuery是什么? [1] jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2] jQuery是继prototype ...
- java栈的实现
可以采用数组与链表两种方法来实现栈. 1.用数组实现栈 import java.util.Arrays; public class MyStack<E>{ private Object[] ...
- 通过自动回复机器人学Mybatis:OGNL+log4j.properties
imooc视频学习笔记 ----> URL:http://www.imooc.com/learn/154 OGNL规则: 从哪里取?(作用域.取值范围,例如封装入一个对象,该对象就是取值范围) ...
- 【Head First Servlets and JSP】笔记
1.谈到服务器的时候,可能是指物理主机(硬件),也可能是指Web服务应用(软件). 2.谈到客户的时候,通常指人类用户,或者是浏览器应用,或者两者都包括,浏览器应用做些什么?发送请求.解释HTML和呈 ...
- Saltstack sls文件:批量安装服务
一.使用saltstack 批量安装nginx 1.创建salt目录 mkdir /srv/{salt,pillar} 2.再/srv/salt/下创建sls文件 vim nginx_install. ...
- 20145217《网络对抗》web基础
20145217<网络对抗>web基础 一.问题 1.什么是表单? 表单:可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁. 表单包括两个部分:一部分是HTML源代码用于描 ...