mui picker 非級聯選擇器
阿新 • • 發佈:2018-12-18
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 的原始碼,如果要更新原始碼,得實時記得重新新增這個改動!!!