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);
    })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM