$widget 两栏多项选择框 会触发默认提交事件的优化

于 2019-03-25 08:41:08 发布
阅读量161 收藏
点赞数
分类专栏： js常用方法的封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15548121/article/details/88785562
版权

******其中 按钮不要直接使用button标签 ,会触发默认提交事件,原数组只初始化一次,第二次加载的时候允许改变原数组,去form提交已改变的数据*******

/*多选控件 js begin*/
/**
* Created by ZhangML on 2019/3/5.
*/
(function($) {
    /**
     * 它带有两个参数：一个是要创建的插件名称，一个是包含支持插件的函数的对象文字。
     */
    $.widget("jd.multiSelect", {
        /**
         * 默认参数 componentId : 控件渲染的id, items : 所有选项,
         * 格式[{"id":"0","name":"xx","selected":false},...] excludes : 排除数组.
         * 格式['id0','id1','id2',...] selecteds : 已选中数组. 格式
         * ['id0','id1','id2',...] style : 0:表示下拉框, 1:表示文本框 showType : 显示文本方式,
         * 0:表示显示id,1:表示显示文本 maxShowCount : 选中的文本框中最大显示个数, 0:表示全部 当style为0时有效
         * maxShowFormat : 超过最大显示个数的显示格式 itemCountFormat : 显示全部项目数显示格式
         * filterCountFormat :显示符合查询条件项目数显示格式 selectedCountFormat : 已选项目数显示格式
         * title : 窗口标题 inputName : null, 隐藏输入框name completed : null, 事件名称
         * deleted : null, 删除事件名称 filtered : null 筛选事件名称
         */
        options : {
            componentId : 'K' + parseInt(Math.random() * 100000000, 10),
            items : [],
            excludes : [],
            selecteds : [],
            style : 0,
            showType : 1,
            maxShowCount : 0,
            maxShowFormat : "已选择{0}项,共{1}项",
            itemCountFormat : "共:{0}项",
            filterCountFormat : "符合条件:{0}项",
            selectedCountFormat : "已选:{0}项",
            title : '',// 窗口标题
            inputName : null,
            completed : null,
            deleted : null,
            filtered : null
        },
        _tempItems : [],
        _tempMap : null,
        _init : function() {
            // 创建控件,控件生命周期内会运行多次
            this._initComponent();
            this._initItems();
            this._initTempItems();
            this._show();
            this._showText();
        },
        _create : function() {
            // 初始化,控件生命周期内只运行一次
            var self = this;
            $(self.element).append('<div id="' + this.options.componentId + '" class="jd_multiselect_box"/>');
        },
        _initComponent : function() {
            var self = this;
            var component = $('#' + this.options.componentId);
            var cmpHtml = "";
            if (this.options.style == 0) {
                cmpHtml += '<input class="result_input" type="text"/>';
            } else {
                cmpHtml += '<div class="result_box"></div>';
            }
            cmpHtml += '<input type="button" class="btn_add" value="+"/>';
            cmpHtml += '<div class="pop_box displayNone">' + '<div class="pop_bg"></div>' + '<div class="show_box">' + '<div class="show_topbar">' + self.options.title
            + '<a class="btn_close"></a></div>'
            + '<div class="filter_box"><input class="filter_input" type="text"/><input type="button" class="btn_submit" value="确定"></input></div>'
            + '<div class="btn_tools"><a class="btn_selected_all"><b class="icon_select_all"></b>全选</a><span class="item_count count_text"></span></div>'
            + '<div class="btn_tools"><a class="btn_unselected_all"><b class="icon_unselect_all"></b>全不选</a><span class="selected_count count_text"></span></div>'
            + '<div class="box_items">' + '<ul class="filter_list"></ul><ul class="selected_list"></ul>' + '</div></div></div>';
            component.html(cmpHtml);
            this._bindBtnAdd();
            this._bindSelectAll();
            this._bindUnselectAll();
            this._bindSubmit();
            this._bindClose();
            this._bindFilterInput();
        },
        selected : function() {
            var selectedAry = [];
            var allItems = this._tempItems;
            if (allItems != undefined && allItems != null) {
                for (var i = 0; i < allItems.length; i++) {
                    var item = allItems[i];
                    if (item.selected) {
                        selectedAry.push(item);
                    }
                }
            }
            return selectedAry;
        },
        removeSelected : function(id) {
            var item = this._tempMap.get(id);
            if (item != undefined && item != null) {
                item.selected = false;
                this.options.items = this._tempItems;
                this._trigger('deleted', null, item);
            }
        },
        items : function() {
            return this.options.items;
        },
        _initItems : function() {
            // 初始化临时选项数组
            var items = this.options.items;
            var excludes = this.options.excludes;

            /* 删除排除掉的元素 begin */
            var tempMap = new Map(); // id为key, item为value
            var exMap = new Map(); // id为key, id为value
            for (var i = 0; i < excludes.length; i++) {
                exMap.set(excludes[i], excludes[i]);
            }
            if (items != undefined && items != null) {
                // 遍历全部项目,添加Option 如果项目已选中,则隐藏
                for (var i = items.length - 1; i >= 0; i--) {
                    var exItem = exMap.get(items[i].id);
                    if (exItem != undefined && exItem != null) {
                        items.splice(i, 1);
                        continue;
                    }
                    tempMap.set(items[i].id, items[i]);
                }
            }
            /* 删除排除掉的元素 end */
            var selecteds = this.options.selecteds;
            if (selecteds != undefined && selecteds != null) {
                $.each(selecteds, function(index, id) { // 遍历二维数组
                    var idItem = tempMap.get(id);
                    if (idItem != undefined && idItem != null) {
                        idItem.selected = true;
                    }
                });
            }
        },
        _initTempItems : function(isFirst) {
            // 初始化临时选项数组
            this._tempItems = [];
            var items = this.options.items;
            this._tempMap = new Map(); // id为key, item为value

            if (items != undefined && items != null) {
                // 遍历全部项目,添加Option 如果项目已选中,则隐藏
                for (var i = 0; i < items.length; i++) {
                    var item = {};
                    item["id"] = items[i].id;
                    item["name"] = items[i].name;
                    item["selected"] = items[i].selected;
                    item["index"] = i; // 选项加上序号
                    this._tempItems.push(item);
                    this._tempMap.set(item.id, item);
                }
            }
            this._showItems();
        },
        _showItems : function() {
            // 渲染列表页面
            var leftHtml = "";
            var rightHtml = "";
            if (this._tempItems != undefined && this._tempItems != null) {
                // 遍历全部项目,添加Option
                $.each(this._tempItems, function(index, item) { // 遍历二维数组
                    leftHtml += "<li class='" + "item_" + index + "' itemId='" + item.id + "' itemIndex='" + index + "' itemName='" + item.name + "'>" + item.name
                    + "<b class='icon_select_list'></b></li>";
                    rightHtml += "<li class='" + " selected_" + index + "' itemId='" + item.id + "' itemIndex='" + index + "' itemName='" + item.name + "'>" + item.name
                    + "<b class='icon_unselect_list'></b></li>";
                });
            }
            $('#' + this.options.componentId + ' .filter_list').html(leftHtml);
            $('#' + this.options.componentId + ' .selected_list').html(rightHtml);
            this._bindItemClick();
            this._bindSelectedClick();
        },
        _refresh : function(isFilter) {
            var scount = 0;
            var ncount = 0;
            var self = this;
            if (this._tempItems != undefined && this._tempItems != null) {
                // 遍历全部项目,添加Option 如果项目已选中,则隐藏
                $.each(this._tempItems, function(index, item) { // 遍历二维数组
                    // 显示或隐藏
                    if (item.hidden || item.selected) {
                        $('#' + self.options.componentId + ' .filter_list .item_' + index).addClass("displayNone");
                    } else {
                        ncount++;
                        $('#' + self.options.componentId + ' .filter_list .item_' + index).removeClass("displayNone");
                    }
                    if (item.selected) {
                        scount++;
                        $('#' + self.options.componentId + ' .selected_list .selected_' + index).removeClass("displayNone");
                    } else {
                        $('#' + self.options.componentId + ' .selected_list .selected_' + index).addClass("displayNone");
                    }
                });
            }
            var selectedCountText = this.options.selectedCountFormat.replace('{0}', scount);
            var itemCountText = this.options.itemCountFormat.replace('{0}', ncount);
            if (isFilter) {
                itemCountText = this.options.filterCountFormat.replace('{0}', ncount);
            }
            $('#' + this.options.componentId + ' .item_count').html(itemCountText);
            $('#' + this.options.componentId + ' .selected_count').html(selectedCountText);
        },
        _show : function() {
            $('#' + this.options.componentId + ' .filter_input').val(""); // 过滤条件清空
            // 显示内容
            this._initTempItems();
            this._refresh();
        },
        _filter : function(text) {
            // 根据项目显示相应内容
            // 项目添加过滤属性 hidden: true 表示因过滤不显示
            if (this._tempItems != undefined && this._tempItems != null) {
                // 遍历全部项目,添加Option 如果项目已选中,则隐藏
                $.each(this._tempItems, function(index, item) { // 遍历二维数组
                    if (item.name.indexOf(text) >= 0) {
                        item["hidden"] = false;
                    } else {
                        item["hidden"] = true;
                    }
                });
                text != "" ? this._refresh(true) : this._refresh(false);
                this._trigger('filtered', null, text);
            }
        },
        _bindFilterInput : function() {
            // 输入事件
            var self = this;
            $('#' + this.options.componentId + ' .filter_input').on('input', function() {
                self._filter($(this).val());
            });
        },
        _bindItemClick : function() {
            // 选中点击事件
            var self = this;
            $('#' + this.options.componentId + ' .filter_list li').on('click', function() {
                var index = $(this).attr("itemIndex");
                var item = self._tempItems[index];
                item["selected"] = true;
                self._refresh();
            });
        },
        _bindSelectedClick : function() {
            // 取消点击事件
            var self = this;
            $('#' + this.options.componentId + ' .selected_list li').on('click', function() {
                var index = $(this).attr("itemIndex");
                var item = self._tempItems[index];
                item["selected"] = false;
                self._refresh();
            });
        },
        _selectAll : function() {
            $.each(this._tempItems, function(index, item) { // 遍历二维数组
                if (item.hidden != true) {
                    item.selected = true;
                }
            });
            this._refresh();
        },
        _unselectAll : function() {
            $.each(this._tempItems, function(index, item) { // 遍历二维数组
                if (item.selected == true) {
                    item.selected = false;
                }
            });
            this._refresh();
        },
        _bindSelectAll : function() {
            // 全选点击事件
            var self = this;
            $('#' + this.options.componentId + ' .btn_selected_all').on('click', function() {
                self._selectAll();
            });
        },
        _bindBtnAdd : function() {
            // 添加点击事件
            var self = this;
            $('#' + this.options.componentId + ' .btn_add').on('click', function() {
                $('#' + self.options.componentId + ' .pop_box').removeClass('displayNone');
            });
        },
        _bindUnselectAll : function() {
            // 全不选点击事件
            var self = this;
            $('#' + this.options.componentId + ' .btn_unselected_all').on('click', function() {
                self._unselectAll();
            });
        },
        _bindSubmit : function() {
            // 确定点击事件
            var self = this;
            $('#' + this.options.componentId + ' .btn_submit').on('click', function() {
                $('#' + self.options.componentId + ' .pop_box').addClass('displayNone');
                self.options.items = self._tempItems;
                self._trigger('completed', null, self.selected());
            });
        },
        _bindClose : function() {
            // 取消点击事件
            var self = this;
            $('#' + this.options.componentId + ' .btn_close').on('click', function() {
                self._show();
                $('#' + self.options.componentId + ' .pop_box').addClass('displayNone');
            });
        },
        _setOptions : function(options) {
            var key;
            for (key in options) {
                this._setOption(key, options[key]);
            }
            return this;
        },
        _setOption : function(key, value) {
            // 设置参数
            if (key === "items") {
                this.options[key] = value;
                return;
            }
            // In jQuery UI 1.9及以后用法
            this._super(key, value);
            // In jQuery UI 1.8及以前用法
            // $.Widget.prototype._setOption.apply(this, arguments);
        },
        _showText : function() {
            var selectedItems = this.selected();
            if (this.options.style == 0) {
                var val = "";
                if (this.options.maxShowCount != 0 && selectedItems.length > this.options.maxShowCount) {
                    var totalCount = this._tempItems.length;
                    val = this.options.maxShowFormat.replace('{0}', selectedItems.length.toString()).replace('{1}', totalCount.toString());
                } else {
                    for (var i = 0; i < selectedItems.length; i++) {
                        var text = selectedItems[i].name;
                        if (this.options.showType == 0) {
                            text = selectedItems[i].id;
                        }
                        if (i == 0) {
                            val = text;
                        } else {
                            val += "," + text;
                        }
                    }
                }
                $('#' + this.options.componentId + ' .result_input').val(val);
            } else {
                var valHtml = "";
                for (var i = 0; i < selectedItems.length; i++) {
                    var text = selectedItems[i].name;
                    if (this.options.showType == 0) {
                        text = selectedItems[i].id;
                    }
                    valHtml += '<div class="item_card" itemId="' + selectedItems[i].id + '">' + text + '<b class="btn_small_del" title="点击删除"></b>';
                    if (this.options.inputName != undefined && this.options.inputName != null) {
                        valHtml += '<input type="hidden" name="' + this.options.inputName + '" value="' + selectedItems[i].id + '"/>';
                    }
                    valHtml += '</div>';
                }
                $('#' + this.options.componentId + ' .result_box').html(valHtml);
                this._bindBtnDelete();
            }
        },
        _bindBtnDelete : function() {
            var self = this;
            $('#' + this.options.componentId + ' .btn_small_del').on('click', function() {
                var itemId = $(this).parent('.item_card').attr("itemId");
                self.removeSelected(itemId);
            });
        },
        _trigger : function(type, event, data) {
            if (type == 'completed') {
                this._showText();
            } else if (type == 'deleted') {
                this._show();
                this._showText();
            }
            var callback = this.options[type];
            if (callback != undefined && callback != null) {
                callback(event, data);
            }
        },
        destroy : function() {
            // 释放控件
            $(this.element).html("");
            // In jQuery UI 1.8及以前用法
            $.Widget.prototype.destroy.call(this);
            // In jQuery UI 1.9及以后
        }
    });
})(jQuery);
/* 多选控件 js end */

Melody–Zhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值