mui picker 非级联选择器

最新推荐文章于 2023-05-18 17:00:41 发布

原创最新推荐文章于 2023-05-18 17:00:41 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何在MUI的picker组件中增加非级联选择功能，通过源码改造实现类似年龄段的选择需求，如18-30岁范围。文章详细展示了修改步骤，包括添加新选项noLink，并调整数据填充规则。

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 的源码，如果要更新源码，得实时记得重新添加这个改动！！！