Skip to content

Commit

Permalink
内部优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@lanrenbulan
lanrenbulan committed Feb 28, 2024
1 parent a322447 commit dc9efcf
Showing 1 changed file with 67 additions and 56 deletions.
123 changes: 67 additions & 56 deletions select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,49 +10,56 @@ layui.define(['jquery', 'dropdown'],function(exports){
var select = {
// 默认配置
config: {
// 值分隔符
valueSeparator: ',',
keywordPlaceholder: '请输入关键词',
// 搜索时，没有匹配结果时显示的文字
unfilteredText: '没有匹配的选项',
customName: {
id: 'id',
title: 'title',
selected: 'selected',
},
options: [],
// 搜索时，如果不能匹配时，是否允许新增
allowCreate: true,
// 是否折叠已选择的选项
collapseSelected: false,
}
};

var thisSelect = function(){
var that = this
,config = that.config;
var that = this;

return {
config: config
,reload: function(config){
config: that.config,

// 重载
reload: function(config){
that.reload.call(that, config);
},

// 获取值或设置值
val: function(value) {
if (!value) {
return that.context.selectedIds.join(config.valueSeparator);
if (value === undefined) {
return that.context.selectedIds.join(that.config.valueSeparator);
}

that.clear.call(that);
that.clear();

var ids = $.isArray(value) ? value : value.split(config.valueSeparator);
var ids = $.isArray(value) ? value : value.split(that.config.valueSeparator);

for (var i = 0; i < ids.length; i++) {
var option = that.getOptionById(ids[i]);
if (!option) {
continue;
}

that.select(option)
that.select(option);
}
},

// 清空
clear: function() {
that.clear.call(that);
}
Expand Down Expand Up @@ -96,52 +103,50 @@ layui.define(['jquery', 'dropdown'],function(exports){

Class.prototype.render = function() {
var that = this;
var config = that.config;

// 根据`config.customName`标准化
config.options = config.options.map(function(option) {
// 初始化选项
var initOptions = that.config.options.map(function(option) {
return {
id: option[that.config.customName.id],
title: option[that.config.customName.title],
selected: option[that.config.customName.selected],
};
});

// 上下文
this.context = {
// 搜索关键词
keyword: '',
// 满足搜索关键词的选项
filteredOptions: null,
// 已选择的ID
selectedIds: that.config.options.filter(function(option) {
return option.selected;
}).map(function(option) {
return option.id
}),
options: JSON.parse(JSON.stringify(config.options)),
// dropdown滚动条的位置
dropdownMenuScrollTop: 0,
};
// 已选择的ID
var selectedIds = initOptions.filter(function(option) {
return option.selected;
}).map(function(option) {
return option.id
});

// 赋值
config.elem.val(this.context.selectedIds.join(config.valueSeparator));

// 因为样式层级问题，这里click相当于
config.elem.parent().on('click', '.multiple-select-selection', function() {
that.config.elem.click();
});
// 赋值
that.config.elem.val(selectedIds.join(that.config.valueSeparator));

// 移除选项
config.elem.parent().on('click', '.multiple-select-selection-item-remove', function(e) {
that.config.elem.parent().on('click', '.multiple-select-selection-item-remove', function(e) {
e.stopPropagation();

var id = $(this).parent().data('id'),
option = that.getOptionById(id);
var id = $(this).parent().data('id');
var option = that.getOptionById(id);

that.remove(option);
});

// 上下文
that.context = {
// 搜索关键词
keyword: '',
// 满足搜索关键词的选项，null表示没有搜索
filteredOptions: null,
// 已选择的ID
selectedIds: selectedIds,
options: initOptions,
// dropdown滚动条的位置
dropdownMenuScrollTop: 0,
};

that.renderDropdown();
that.renderSelection();
};
Expand All @@ -158,14 +163,24 @@ layui.define(['jquery', 'dropdown'],function(exports){
this.reloadDropdownData(this.buildRenderOptions());
};


// 选择选项
Class.prototype.select = function(option) {
this.context.selectedIds.push(option.id);
Class.prototype.select = function(options) {
options = layui.isArray(options) ? options : [options];

var length = options.length;

for (var i = 0; i < length; i++) {
var id = options[i].id;
if (this.context.selectedIds.indexOf(id) !== -1) {
continue;
}

this.context.selectedIds.push(id);
}

this.reloadDropdownData(this.buildRenderOptions());
};


// 重置搜索
Class.prototype.resetSearch = function() {
this.context.filteredOptions = null;
Expand Down Expand Up @@ -229,19 +244,17 @@ layui.define(['jquery', 'dropdown'],function(exports){
});
};


Class.prototype.buildDropdownContent = function(options) {
return [
`<div class="multiple-select-search"><input class="layui-input" placeholder="${this.config.keywordPlaceholder}"/></div>`,
'<ul class="layui-menu layui-dropdown-menu" style="max-height: 300px;overflow-y: auto;">',
options.length > 0 ? options.map(function(option) {
return `<li data-value="${option.id}" class="multiple-select-option ${option.selected ? 'multiple-select-option-selected' : ''}">${option.title}</li>`;
}).join('') : `<div style="padding: 5px;font-size:12px;">${this.config.unfilteredText}</div>`,
'</ul>',
].join('');
`<div class="multiple-select-search"><input class="layui-input" placeholder="${this.config.keywordPlaceholder}"/></div>`,
'<ul class="layui-menu layui-dropdown-menu" style="max-height: 300px;overflow-y: auto;">',
options.length > 0 ? options.map(function(option) {
return `<li data-value="${option.id}" class="multiple-select-option ${option.selected ? 'multiple-select-option-selected' : ''}">${option.title}</li>`;
}).join('') : `<div style="padding: 5px;font-size:12px;">${this.config.unfilteredText}</div>`,
'</ul>',
].join('');
};


Class.prototype.reloadDropdownData = function(options) {
if (options && options.length === this.getAllOptions().length) {
this.resetSearch();
Expand All @@ -264,18 +277,17 @@ layui.define(['jquery', 'dropdown'],function(exports){
return this.panel.find('div.multiple-select-search > input');
};


Class.prototype.renderDropdown = function() {
var that = this;

that.dropdown = dropdown.render({
elem: that.config.elem,
elem: that.config.elem.parent(),
style: 'width:' + that.config.elem.outerWidth() + 'px',
content: that.buildDropdownContent(that.getAllOptions()),
ready: function(panel, elem) {
that.panel = panel;

elem.parent().addClass('multiple-select-panel-opended')
elem.addClass('multiple-select-panel-opended')

// 保持滚动条位置
if (that.context.dropdownMenuScrollTop > 0) {
Expand Down Expand Up @@ -331,7 +343,7 @@ layui.define(['jquery', 'dropdown'],function(exports){
that.context.filteredOptions = null;
that.reloadDropdownData();

elem.parent().removeClass('multiple-select-panel-opended')
elem.removeClass('multiple-select-panel-opended')
}
}, 100);
},
Expand Down Expand Up @@ -378,7 +390,6 @@ layui.define(['jquery', 'dropdown'],function(exports){
})[0];
};


// 渲染选择
Class.prototype.renderSelection = function() {
var that = this,
Expand Down Expand Up @@ -435,5 +446,5 @@ layui.define(['jquery', 'dropdown'],function(exports){
return thisSelect.call(inst);
};

exports('select', select);
exports(MOD_NAME, select);
});

0 comments on commit dc9efcf

Please sign in to comment.