自己写的双列表选择器插件(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:'待选一'}]
})