带复选框且支持搜索功能的下拉列表7

最新推荐文章于 2021-10-28 16:58:31 发布

iteye_3851

最新推荐文章于 2021-10-28 16:58:31 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/iteye_3851/article/details/82009256

本文介绍了一个全选功能的具体实现方式，通过JavaScript代码展示了如何在列表中实现全选和取消全选的功能。该功能通过修改复选框的状态来更新显示值，并触发选择事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


// private
    onSelect : function(record, index)
    {
        /*
         * 增加一个全选功能，ckf36476
         */
        if (index == 0)
        {
            var r_qx = this.store.getAt(index);
            var newValue_qx = r_qx.data[this.displayField];
            var check_qx = document.getElementById("checkBox_" + newValue_qx);
            if (check_qx.className == "checked")
            {
                check_qx.className = "unchecked"
            }
            else
            {
                check_qx.className = "checked"
            }
            for (var i = 1; i < this.store.data.length; i++)
            {
                var r = this.store.getAt(i);
                var newValue = r.data[this.displayField];
                var check = document.getElementById("checkBox_" + newValue);
                if (check_qx.className == "checked")
                {
                    check.className = "checked"
                }
                else
                {
                    check.className = "unchecked"
                }
            }
            var value = "";
            var hiddenValue = "";
            for (var i = 0; i < this.store.data.length; i++)
            {
                var r = this.store.getAt(i);
                newValue = r.data[this.displayField];
                check = document.getElementById("checkBox_" + newValue);
                if (check.className == "checked")
                {
                    value += r.data[this.displayField] + this.displaySeparator;
                    hiddenValue += r.data[this.valueField] + this.valueSeparator;
                }
            }
            if (value.length > 1)
            {
                value = value.substring(0, value.length - this.displaySeparator.length);
            }
            if (hiddenValue.length > 1)
            {
                hiddenValue = hiddenValue.substring(0, value.length - this.valueSeparator.length);
            }
            this.setValue(value);
            this.hiddenField.value = hiddenValue;
            this.fireEvent('select', this, record, index);
            return;
        }
        //全选结束


        if (this.fireEvent('beforeselect', this, record, index) !== false)
        {
            var r = this.store.getAt(index);
            var newValue = r.data[this.displayField];
            var check = document.getElementById("checkBox_" + newValue);
            if (check.className == "checked")
            {
                check.className = "unchecked"
            }
            else
            {
                check.className = "checked"
            }
            var value = "";
            var hiddenValue = "";
            for (var i = 0; i < this.store.data.length; i++)
            {
                var r = this.store.getAt(i);
                newValue = r.data[this.displayField];
                check = document.getElementById("checkBox_" + newValue);
                if (check.className == "checked")
                {
                    value += r.data[this.displayField] + this.displaySeparator;
                    hiddenValue += r.data[this.valueField] + this.valueSeparator;
                }
            }
            if (value.length > 1)
            {
                value = value.substring(0, value.length - this.displaySeparator.length);
            }
            if (hiddenValue.length > 1)
            {
                hiddenValue = hiddenValue.substring(0, value.length - this.valueSeparator.length);
            }
            this.setValue(value);
            this.hiddenField.value = hiddenValue;
            this.fireEvent('select', this, record, index);
        }
    },