z***@163.com
z***@163.com
  • 发布:2017-08-08 17:02
  • 更新:2017-12-13 15:33
  • 阅读:1995

picker 数据过滤

分类:MUI

我想在中间加入一个搜索框,在数据多的情况进行数据过滤,这个应该怎么实现?新手求教

2017-08-08 17:02 1 条评论 负责人:无 分享
已邀请:
Binary

Binary

之前那个有问题,重新修改了

/**  
 * 弹出选择列表插件  
 * 此组件依赖 listpcker ,请在页面中先引入 mui.picker.css + mui.picker.js  
 * varstion 1.0.1  
 * by Houfeng  
 * Houfeng@DCloud.io  
 */  
  
(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;" 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 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);  
		},  
		// Add By HaoYanbing 20171213 过滤数据  
		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);
  • kkcode

    这个在iphone真机上有问题,input的获取焦点失败或无法输入和软键盘遮盖poppicker控件。楼主遇到问题吗


    2018-11-30 17:33

Binary

Binary

替换mui.poppicker.js即可

/**  
 * 弹出选择列表插件  
 * 此组件依赖 listpcker ,请在页面中先引入 mui.picker.css + mui.picker.js  
 * varstion 1.0.1  
 * by Houfeng  
 * Houfeng@DCloud.io  
 */  
  
(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;" 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 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);  
		},  
		// Add By HaoYanbing 20171213 过滤数据  
		filterData: function(searchText){  
			var self = this;  
			var newData = JSON.parse(JSON.stringify(self.data));  
			var layer = self.options.layer;  
			  
			// 根据layer获取最底级数据 调用deleteItem()  
			var k = 1;  
			function getBottomChildren(data){  
				if(k++ < layer){  
					data.forEach(function(item){  
						if(item.children != undefined && item.children.length > 0){  
							getBottomChildren(item.children);  
						}  
					})  
				}else{  
					deleteItem(data);  
				}  
			}  
			getBottomChildren(newData);  
			  
			// 删除不匹配的数据  
			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);  
				    }  
				}  
			}  
			  
			// 删除子数据为空的父数据  
			var j = 1;  
			function deleteNullChildren(data){  
				for (var i = data.length - 1; i >= 0; i--) {  
				    if(data[i].children == undefined || data[i].children.length == 0){  
				        data.splice(i, 1);  
				    }else{  
				    	if(++j < layer){  
				    		deleteNullChildren(data[i].children);  
				    	}  
				    }  
				}	  
			}  
			deleteNullChildren(newData);  
			// 重新设置data  
			self.pickers[0].setItems(newData);  
		}  
	});  
  
})(mui, document);
  • 高先生163

    大神,请问一下,这个怎么应用呢?我是新手,不太会呀,HTML页面中引入上面的js后,下来怎么用呀?求大神详细指点


    2019-12-10 16:13

该问题目前已经被锁定, 无法添加新回复