• 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);
        })
  • 相关阅读:
    CMDB资产管理系统开发【day25】:需求分析
    python常用运维脚本实例
    我的Pycharm,我做主
    为什么你总是“半途而废”- 李笑来
    函数和常用模块【day06】:模块特殊变量(十四)
    使用Python的turtle(海龟)模块画图
    第一章:数据结构和算法
    网络编程基础【day10】:IO多路复用
    函数和常用模块【day04】:内置函数分类总结(十一)
    Python基础【day01】:PyChram使用技巧总结(六)
  • 原文地址:https://www.cnblogs.com/AnnieShen/p/6797456.html
Copyright © 2020-2023  润新知