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 的源码,如果要更新源码,得实时记得重新添加这个改动!!!
mui picker 非级联选择器
猜你喜欢
转载自blog.csdn.net/beyond__devil/article/details/83541838
今日推荐
周排行