easyui combobox复选框多选完整功能实现

前言：前端项目用的easyui，要实现下拉框多选，带有复选框全选全不选功能，可奈何easyui combobox原来就没有复选框Σ( ° △ °|||)︴，百度一堆文章实现的也都缺胳膊少腿的，用到的方法如getEl(target, value)，在我这项目里也不能用，然后就有了这篇文章，是通用实现，而且功能实现的相对完整。

---

先放效果图：

当选中全选的时候勾选所有选项，取消选中全选的时候则取消勾选所有选项，而且实现了选项1到选项6只要有一个是非选中状态，那全选就不会是选中状态。

下面是具体实现代码：

页面代码

下面实现复选框功能的js代码

/**
 * 带有复选框的easyui下拉框工具方法
 * @param _id input标签的id
 * @param optionsJson json字符串，定义选项的内容，
 * 例子：
 * [
 * {id: '对应于option标签的value', text: '页面显示文本'}
 * ]
 * @param hight 下拉框高度
 */
function combobox_checkbox(_id, optionsJson, hight) {
    $('#'+_id).combobox({
        data: optionsJson,
        valueField: 'id',
        textField: 'text',
        panelHeight: hight,
        multiple: true,
        editable: false,
        formatter: function (row) { // formatter方法就是实现了在每个下拉选项前面增加checkbox框的方法
            var opts = $(this).combobox('options');
            return '' + row[opts.textField]
        },
        onLoadSuccess: function () { // 下拉框数据加载成功调用
            // 正常情况下是默认选中“所有”，但我想实现点击所有全选功能，这这样会冲突，暂时默认都不选
            $("#"+_id).combobox('clear'); //清空

            // var opts = $(this).combobox('options');
            // var values = $('#'+_id).combobox('getValues');
            // $.map(opts.data, function (opt) {
            //     if (opt.id === '') { // 将"所有"的复选框勾选
            //         $('#'+opt.domId + ' input[type="checkbox"]').prop("checked", true);
            //     }
            // });
        },
        onSelect: function (row) { // 选中一个选项时调用
            var opts = $(this).combobox('options');
            //当点击所有时，则勾中所有的选项
            if (row.text === "全选") {
                var data = $("#"+_id).combobox('getData');
                for (var i = 0; i < data.length; i++) {
                    $('#'+data[i].domId + ' input[type="checkbox"]').prop("checked", true);
                }
                var list = [];
                $.map(opts.data, function (opt) {
                    list.push(opt.id);
                });
                $("#"+_id).combobox('setValues', list); // combobox全选
            } else {
                //设置选中选项所对应的复选框为选中状态
                $('#'+row.domId + ' input[type="checkbox"]').prop("checked", true);
            }
        },
        onUnselect: function (row) { // 取消选中一个选项时调用
            var opts = $(this).combobox('options');
            // 当取消全选勾中时，则取消所有的勾选
            if (row.text === "全选") {
                var a = $("#"+_id).combobox('getData');
                for (var i = 0; i < a.length; i++) {
                    $('#'+a[i].domId + ' input[type="checkbox"]').prop("checked", false);
                }
                $("#"+_id).combobox('clear');//清空选中项
            } else {
                // 下面是实现全选状态下取消任何一项，则取消勾选所有

                //设置选中选项所对应的复选框为非选中状态
                $('#'+row.domId + ' input[type="checkbox"]').prop("checked", false);
                var selectedList = $("#"+_id).combobox('getValues');
                // 如果“所有”是选中状态,则将其取消选中
                if (selectedList[0] === "") {
                    // 将“所有”选项移出数组，并且将该项的复选框设为非选中
                    selectedList.splice(0, 1);
                    $('#'+opts.data[0].domId + ' input[type="checkbox"]').prop("checked", false);
                }
                $("#"+_id).combobox('clear');//清空
                $("#"+_id).combobox('setValues', selectedList); // 重新复制选中项

            }

        }
    });
}

调用上面的工具方法即可，调用代码如下

var tttData = [
    {id: '', text: '全选'},
    {id: '1', text: '选项1'},
    {id: '2', text: '选项2'},
    {id: '3', text: '选项3'},
    {id: '4', text: '选项4'},
    {id: '5', text: '选项5'},
    {id: '6', text: '选项6'},
];
combobox_checkbox('ttt', tttData, 'auto');

上面是所有的实现，有不足的还请指出。

---

为方便大家测试，下面给出完整的html代码，可以直接拷贝保存成html文件在浏览器运行，我没找到jquery和easyui的可用cdn，要手动jquery和easyui的核心包放在同级目录下。

    
    
    




    复选框演示：
    获取选中的值