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 ...
随机推荐
- LinkedList 的get方法分析---java
Java LinkedList.get() 获取元素 Get(int)方法的实现在remove(int)中已经涉及过了.首先判断位置信息是否合法(大于等于0,小于当前LinkedList实例的Si ...
- 标准编译安装(configure make)
./configure --prefix=安装目录 这里注意,安装目录可以自己选择地方,但是自己选择地方的话就要把编译出的bin.include.lib三个文件夹分别加入XXX XXX XXX三个 ...
- blogCMS中出现的错误整理
1.在写日期归档的时候,出现如下错误: not enough values to unpack (expected 2, got 1) 出现这个错误是因为:字符串需要能够split成2份才能赋值给2个 ...
- Xamrin开发安卓笔记(三)
http://www.cnblogs.com/minCS/p/4118170.html Xamrin开发安卓笔记(三) 安装片 Xamrin开发安卓笔记(一) Xamrin开发安卓笔记(二) 这次 ...
- JS 原生JS 判断滚动条滑动到底部
window.addEventListener("scroll", function(event) { var scrollTop = document.documentEleme ...
- ubuntu 16.04安装navicat for mysql
下载地址:官网https://www.navicat.com/download 1.下载 navicat120_mysql_en_x64.tar.gz 文件 2.下载后移到/opt/下 3.解压ta ...
- javascript 的dateObj.getTime() 在为C#的获取方式
public string GetTime(DateTime dt) { Int64 retval = 0; DateTime st = new DateTime(1970, 1, 1); TimeS ...
- java连接zookeeper服务器出现“KeeperErrorCode = ConnectionLoss for /test”
昨天调试java连接zookeeper服务器,zookeeper搭建过程在这里不做赘述,在创建连接后,然后操作节点一直报异常 错误信息如下: Exception in thread "mai ...
- 如何编写自己的虚拟DOM
要构建自己的虚拟DOM,需要知道两件事.你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂--但实际上,虚拟DOM的主要部分只需不到50行代码. 有 ...
- 深入理解JVM3
VM运行时数据区域 JVM执行Java程序的过程中,会使用到各种数据区域,这些区域有各自的用途.创建和销毁时间.根据<Java虚拟机规范(第二版)>的规定,JVM包括下列几个运行时数据区域 ...