jquery双列选择插件

最新推荐文章于 2025-01-09 10:34:12 发布

原创最新推荐文章于 2025-01-09 10:34:12 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

jquery插件专栏收录该内容

5 篇文章

订阅专栏

自己写的双列表选择器插件（ui设计功能需要双列表展示，后来展现方式变了，插件也没用。功能写的比较简单，做个参考）。

插件依赖jquery。

js：

(function ($, window, document, undefined) {
    //定义pickList的构造函数
    var PickList = function (ele, opt) {
        this.$element = ele,
            this.defaults = {
                data: [],
                selectData: []
            },
            this.options = $.extend({}, this.defaults, opt)
    }
    //定义pickList的方法
    PickList.prototype = {
        //绑定选项双击事件
        bindEvent: function () {
            var _this = this;
            this.$element.find(".picklist-left .pick-left-item").unbind('dblclick').dblclick(function () {
                _this.leftItemHandle($(this), { id: $(this).attr('dataid'), text: $(this).html() });
            })
            this.$element.find(".picklist-right .pick-right-item").unbind('dblclick').dblclick(function () {
                _this.rightItemHandle($(this), { id: $(this).attr('dataid'), text: $(this).html() });
            })
            return this;
        },
        //左边选项双击后回调
        leftItemHandle: function (el, item) {
            el.remove();
            if (this.$element.find(".pick-right-item[dataid='" + item.id + "']").length == 0) {
                this.$element.find('.picklist-right').prepend('<li class="pick-right-item" dataid="' + item.id + '">' + item.text + '</li>').css({ "display": "inherit" });
                this.bindEvent();
            }
        },
        //右边选项双击后回调
        rightItemHandle: function (el, item) {
            el.remove();
            if (this.$element.find(".pick-left-item[dataid='" + item.id + "']").length == 0) {
                this.$element.find('.picklist-left').prepend('<li class="pick-left-item" dataid="' + item.id + '">' + item.text + '</li>').css({ "display": "inherit" });
                this.bindEvent();
            }

        },
        //初始化方法，生成dom，绑定事件
        init: function () {
            var _this = this;
            //this.$element.wrap("<div class='pick-content'></div>")
            this.$element.addClass('pickList');
            var options = this.options;
            var pickLeftHtml = '<ul class="picklist-left">';
            if (this.options.data.length != 0) {
                $.each(this.options.data, function (index, item) {
                    if (_this.checkIsSelect(item.id)) {
                        pickLeftHtml += '<li class="pick-left-item" dataid="' + item.id + '">' + item.text + '</li>';
                    }

                });
            }
            pickLeftHtml += '</ul>';
            this.$element.append(pickLeftHtml);

            var pickRightHtml = '<ul class="picklist-right">';
            if (this.options.selectData.length != 0) {
                $.each(this.options.selectData, function (index, item) {
                    pickRightHtml += '<li class="pick-right-item" dataid="' + item.id + '">' + item.text + '</li>';
                });
            }
            pickRightHtml += '</ul>';
            this.$element.append(pickRightHtml);
            return this.bindEvent();
        },
        //检测左侧需要渲染的数据是否在右侧需要初始化显示。
        checkIsSelect: function (id) {
            $.each(this.options.selectData, function (index, item) {
                if (item.id == id) {
                    return true;
                }
            });
            return false;
        },
        //获取选中的数据，对外接口。
        getSelectValues: function () {
            var arr = [];
            this.$element.find('.pick-right-item').each(function (index, item) {
                var obj = { id: '', text: '' }
                obj.id = $(this).attr('dataid');
                obj.text = $(this).html();
                arr.push(obj);
            })
            return arr;
        }
    }
    //在插件中使用pickList对象
    $.fn.pickList = function (options) {
        //创建pickList的实体
        var pickList = new PickList(this, options);
        //调用其方法
        return pickList.init();
    }
})(jQuery, window, document);

css:

.pick-content{
    padding: 10px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    display: inline-block;
    height: 60px;
    overflow: hidden;
    position: relative;
}
.pickList{
    width: 210px;
    font-size: 12px;
    color: #666;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    display: inline-block;
    min-height: 60px;
    overflow: hidden;
    position: relative;
}
.picklist-left,.picklist-right{
    height: 100%;
    overflow-y: scroll;
    padding: 10px;
}
.picklist-left{
    left: 0;
    position: absolute;
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    border-right: 1px solid #f1f1f1;
    padding-right: 10px;
    overflow-y: scroll;
}
.picklist-right{
    right: 0;
    position: absolute;
    display: inline-block;
    width: 50%;
    box-sizing: border-box;
    border-right: 1px solid #f1f1f1;
    padding-right: 10px;
    overflow-y: scroll;
}
.pick-left-item:hover,.pick-right-item:hover{
    background: #f1f1f1;
}

使用：

$(select).pickList({

    data:[{id:1,text:'测试一'},

        {id:2,text:'测试二'},

        {id:3,text:'测试三'},

        {id:4,text:'测试四'}],

    selectData:[{id:11,text:'待选一'}]

})