mui picker 非级联选择器

MUI 提供的 picker(选择器),默认支持了单个、多个。但对于多个,只能是 "级联"。
项目中有需求,类似年龄段的选择:18-30,不是级联,所以就看了下源码改造了下:

找到 mui.poppicker.js,init() 函数最后,添加一个新选项:noLink,代表 '是否非联动'(大概:82行)

			// 1.是否非联动
			self.noLink = self.options.noLink || 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) {
					// 2.如果非联动,停止
					if(self.noLink) return false;
					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;
			data = data || [];
			// 3.非联动,改变填充数据规则
			if(self.noLink){
				for(var i = 0, length = self.pickers.length; i < length; i++){
					self.pickers[i].setItems(data[i]);
				}
			}else{
				self.pickers[0].setItems(data);
			}
		},

修改共 3 处,上面都有标注。

使用:
	1.非级联数据格式(有几个滑动列表,就传递一个包含几个列表的数组,数组中的每个列表,也是一个由对象组成的数组):
		var noLinkData = [[
			{value: 11, text: 11}, {value: 12, text: 12}, ...
		],[
			{value: 11, text: 11}, {value: 12, text: 12}, ...
		]];

	2.实例化时,传递 noLink 为 true
		var picker = new $.PopPicker({
			layer: 2,
			noLink: true,
		});
		picker.setData(noLinkData);

缺点:
	改动了 MUI 的源码,如果要更新源码,得实时记得重新添加这个改动!!!


猜你喜欢

转载自blog.csdn.net/beyond__devil/article/details/83541838