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 ...
随机推荐
- IO 流之字符流的缓冲区
缓冲区的出现提高了对数据的读写效率 对应类: BufferedWriter BufferedReader 缓冲区需要结合流才可以使用, 对流的功能进行了增强, 即对流的操作起到装饰作用 使用缓冲区实现 ...
- Collections工具类的使用
创建实体类 public class News implements Comparable { private int id; //新闻编号 private String title; //新闻标题 ...
- 单独使用celery
单独使用celery 参考 http://docs.celeryproject.org/en/latest/getting-started/index.html https://www.jianshu ...
- Python 实现获取【昨天】【今天】【明天】日期
昨天 from datetime import date, timedelta yesterday = (date.today() + timedelta(days=-1)).strftime(&qu ...
- 查找至少连续出现三次的所有数字/连续3天的日期【LeetCode】
编写一个SQL查询,查找至少连续出现三次的所有数字.+----+-----+ | Id | Num | +----+-----+ | 1 | 1 | | 2 | 1 | | 3 | 1 | | 4 | ...
- Android图片加载框架Picasso最全使用教程3
前面我们对Picasso的用法有了一定得了解,下面就分析一下一些特殊情况下,Picasso的用法. 调用.noFade() Picasso的默认图片加载方式有一个淡入的效果,如果调用了noFade() ...
- 从零到一创建ionic移动app:应用anjularjs编写ionic项目
推荐两篇文章,带你入门 ionic中文项目(作为了解ionic基础结构用):http://blog.csdn.net/i348018533/article/details/47258449/ ioni ...
- 一篇文章吃透iOS、JS的时间日期(Date, Calendar, Locale, TimeZone)
iOS 时间相关类 NSDate - 表示一个绝对的时间点. NSCalendar - 代表一个特定的日历,例如公历或者希伯来日历.它提供了一系列基于日期的计算,并且可以让你在"NSDate ...
- Unity 自定义编辑窗体之ScriptableWizard
当我们在编辑界面要批量设置游戏资源的时候,就需要从UnityEditor里面继承,实现自己的窗口类. 所幸UNITY提供了最简单的一个自定义窗体类,我们直接往上扔public类型的属性就好,提供了确认 ...
- js踩过的一些坑
参考我的博客:http://www.isedwardtang.com/2017/08/29/js-bug/