eam-offline-app/static-eam-app/js/mui.poppicker.js

/**
 * 弹出选择列表插件
 * 此组件依赖 listpcker ，请在页面中先引入 mui.picker.css + mui.picker.js
 * varstion 1.0.1
 * by Houfeng
 * Houfeng@DCloud.io
 * Update By HaoYanbing 20171213 添加数据过滤功能
 */

(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>\
			<input style="height:30px;width:60%;color:black;margin-bottom:0px;" 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(panelBuffer)[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];
			
			// Add By HaoYanbing 20171213 添加搜索功能
			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 = 0, len = self.pickers.length; i < len; i++) {
				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);
		},
		// Add By HaoYanbing 20171213 过滤数据
		filterData: function(searchText){
			var self = this;
			if(self.data == undefined){
				return;
			}
			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);