mui-picker 增加过滤

Posted 2021-02-03 kelly07

/**
* 弹出选择列表插件
* 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
* varstion 1.0.1
* by Houfeng
* [email protected]
*/

(function($, document) {

//创建 DOM
$.dom = function(str) {
if (typeof(str) !== ‘string‘) {
if ((str instanceof Array) || (str[0] && str.length)) {
return [].slice.call(str);
} else {
return [str];
}
}
if (!$.__create_dom_div__) {
$.__create_dom_div__ = document.createElement(‘div‘);
}
$.__create_dom_div__.innerhtml = str;
return [].slice.call($.__create_dom_div__.childNodes);
};

var panelBuffer = ‘<div class="mui-poppicker"><div class="mui-poppicker-header" style="text-align:center"><button class="mui-btn mui-poppicker-btn-cancel">取消</button><button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button><div class="mui-poppicker-clear"></div></div><div class="mui-poppicker-body"></div></div>‘;
var panelBuffer2 = ‘<div class="mui-poppicker"><div class="mui-poppicker-header" style="text-align:center"><button class="mui-btn mui-poppicker-btn-cancel">取消</button><input style="height:30px;width:60%;color:black;margin:3px;font-size:12px;" type="text" class="mui-poppicker-input" placeholder="请输入查询内容"></input><button class="mui-btn mui-btn-blue mui-poppicker-btn-ok">确定</button><div class="mui-poppicker-clear"></div></div><div class="mui-poppicker-body"></div></div>‘;

var pickerBuffer = ‘<div class="mui-picker"><div class="mui-picker-inner"><div class="mui-pciker-rule mui-pciker-rule-ft"></div><ul class="mui-pciker-list"></ul><div class="mui-pciker-rule mui-pciker-rule-bg"></div></div></div>‘;

//定义弹出选择器类
var PopPicker = $.PopPicker = $.Class.extend({
//构造函数
init: function(options) {
var self = this;
self.options = options || {};
self.options.buttons = self.options.buttons || [‘取消‘, ‘确定‘];
self.panel = $.dom(panelBuffer2)[0];
document.body.appendChild(self.panel);
self.ok = self.panel.querySelector(‘.mui-poppicker-btn-ok‘);
self.cancel = self.panel.querySelector(‘.mui-poppicker-btn-cancel‘);
self.body = self.panel.querySelector(‘.mui-poppicker-body‘);
self.mask = $.createMask();
self.cancel.innerText = self.options.buttons[0];
self.ok.innerText = self.options.buttons[1];

// 添加搜索功能
self.searchInput = self.panel.querySelector(‘.mui-poppicker-input‘);
self.searchInput.addEventListener(‘tap‘, function(event) {
self.searchInput.focus();
}, false);
self.searchInput.addEventListener(‘input‘, function(event) {
var searchText = self.searchInput.value;
self.filterData(searchText);
}, false);

self.cancel.addEventListener(‘tap‘, function(event) {
self.hide();
}, false);
self.ok.addEventListener(‘tap‘, function(event) {
if (self.callback) {
var rs = self.callback(self.getSelectedItems());
if (rs !== false) {
self.hide();
}
}
}, false);
self.mask[0].addEventListener(‘tap‘, function() {
self.hide();
}, false);
self._createPicker();
//防止滚动穿透
self.panel.addEventListener($.EVENT_START, function(event) {
event.preventDefault();
}, false);
self.panel.addEventListener($.EVENT_MOVE, function(event) {
event.preventDefault();
}, false);
},
_createPicker: function() {
var self = this;
var layer = self.options.layer || 1;
var width = (100 / layer) + ‘%‘;
self.pickers = [];
for (var i = 1; i <= layer; i++) {
var pickerElement = $.dom(pickerBuffer)[0];
pickerElement.style.width = width;
self.body.appendChild(pickerElement);
var picker = $(pickerElement).picker();
self.pickers.push(picker);
pickerElement.addEventListener(‘change‘, function(event) {
var nextPickerElement = this.nextSibling;
if (nextPickerElement && nextPickerElement.picker) {
var eventData = event.detail || {};
var preItem = eventData.item || {};
nextPickerElement.picker.setItems(preItem.children);
}
}, false);
}
},
//填充数据
setData: function(data) {
var self = this;
self.data = data || [];
self.pickers[0].setItems(self.data);
},
//获取选中的项（数组）
getSelectedItems: function() {
var self = this;
var items = [];
for (var i in self.pickers) {
var picker = self.pickers[i];
items.push(picker.getSelectedItem() || {});
}
return items;
},
//显示
show: function(callback) {
var self = this;
self.callback = callback;
self.mask.show();
document.body.classList.add($.className(‘poppicker-active-for-page‘));
self.panel.classList.add($.className(‘active‘));
//处理物理返回键
self.__back = $.back;
$.back = function() {
self.hide();
};
},
//隐藏
hide: function() {
var self = this;
if (self.disposed) return;
self.panel.classList.remove($.className(‘active‘));
self.mask.close();
document.body.classList.remove($.className(‘poppicker-active-for-page‘));
//处理物理返回键
$.back=self.__back;
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.panel.parentNode.removeChild(self.panel);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
},
// 过滤数据
filterData: function(searchText){
var self = this;
var newData = JSON.parse(JSON.stringify(self.data));
var layer = self.options.layer || 1;

// 根据layer获取最底级数据 调用deleteItem()
function getBottomChildren(data, k){
if(k < layer){
data.forEach(function(item){
if(item.children != undefined && item.children.length > 0){
getBottomChildren(item.children, (k + 1));
}
})
}else{
deleteItem(data);
}
}
getBottomChildren(newData, 1);

// 删除不匹配的数据
function deleteItem(data){
for (var i = data.length - 1; i >= 0; i--) {
var text = data[i].text || data[i];
if(text.indexOf(searchText) < 0) {
data.splice(i, 1);
}
}
}

// 删除子数据为空的父数据
function deleteNullChildren(data, j){
if(j < layer){
for (var i = data.length - 1; i >= 0; i--) {
if(data[i].children == undefined || data[i].children.length == 0){
data.splice(i, 1);
}else{
deleteNullChildren(data[i].children, (j + 1));
}
}
}
}
for(var n = 0; n < layer; n++){
deleteNullChildren(newData, 1);
}

// 重新设置data
self.pickers[0].setItems(newData);
}
});

})(mui, document);