MUI 在同一页面中动态添加多个picker选择器

【页面效果】

【说明】
由于业务需求，该页面所有文本框，文本域，选择器及选择器内选项皆为webview接收前一页面传来的JSON参数进行动态显示，此处忽略文本框和文本域，只做选择器。

【JSON参数】
字段信息：FieldParaMess
该变量存储着数据表的字段信息，比如字段类型，字段名称等

表内数据：obj
该变量存储着数据表内的详细数据

【代码】

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><!--标准mui.css--><link rel="stylesheet" href="css/mui.min.css"><link href="css/mui.poppicker.css" rel="stylesheet" /><link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" /><style>*{touch-action: none;}.mui-btn {font-size: 16px;padding: 8px;}h5.mui-content-padded {margin-left: 3px;margin-top: 20px !important;}h5.mui-content-padded:first-child {margin-top: 12px !important;}.ui-alert {text-align: center;padding: 20px 10px;font-size: 16px;}</style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">修改数据</h1></header><div class="mui-content mui-scroll-wrapper"><div class="mui-scroll"><form class="mui-input-group" style="background-color: #efeff4;border: 0;"><div class="mui-card"><div class="mui-card-header">数据详情</div><div class="mui-card-content"><div class="mui-card-content-inner" id="card_list"><!-- 此处为动态拼接 --></div></div></div></form></div></div><script src="js/mui.min.js"></script><script src="js/mui.picker.min.js"></script><script src="js/mui.poppicker.js"></script><script>//时间选择器节点idvar date_btn_list = new Array();//普通选择器的节点id和选择器选项var select_btn_obj_list = new Array();//字段信息var FieldParaMess = null;//表内数据var obj = null;mui.init();mui.plusReady(function() {//关闭等待框plus.nativeUI.closeWaiting();//显示当前页面mui.currentWebview.show();var self = plus.webview.currentWebview();//字段信息，获取上一个webview传来的参数FieldParaMess = JSON.parse(self.FieldParaMess);//表内数据obj = JSON.parse(self.obj);var card_string = '';console.log(FieldParaMess);console.log(obj);//循环数据，判断前端显示样式for (var v = 0; v < FieldParaMess.length; v++) {//判断是否为文本域if (FieldParaMess[v].fCollectType == "textarea") {card_string = card_string +'<div style="margin: 10px 5px;">' +'<label>' + FieldParaMess[v].fFieldNameCn + '</label>' +'<textarea rows="3" id="input_' + FieldParaMess[v].fId + '">' + obj[FieldParaMess[v].fFieldNameEn] +'</textarea>' +'</div>';//判断是否为时间选择器} else if (FieldParaMess[v].fCollectType == "datetime") {card_string = card_string +'<div>' +'<label>' + FieldParaMess[v].fFieldNameCn + '</label>' +'<button id="date_' + FieldParaMess[v].fId +'" data-options=\'{"type": "date"}\' class="btn mui-btn mui-btn-block">' + obj[FieldParaMess[v].fFieldNameEn] +'</button>' +'<input type="text" class="mui-input-clear" value="' + obj[FieldParaMess[v].fFieldNameEn] +'" style="display:none;" id="input_' + FieldParaMess[v].fId + '">' +'</div>';date_btn_list.push(FieldParaMess[v].fId);//判断是否为下拉菜单（普通选择器）} else if (FieldParaMess[v].fCollectType == "options") {card_string = card_string +'<div>' +'<label>' + FieldParaMess[v].fFieldNameCn + '</label>' +'<button id="select_' + FieldParaMess[v].fId + '" class="mui-btn mui-btn-block" type="button">' + obj[FieldParaMess[v].fFieldNameEn] + '</button>' +'<input type="text" class="mui-input-clear" value="' + obj[FieldParaMess[v].fFieldNameEn] +'" style="display:none;" id="input_' + FieldParaMess[v].fId + '">' +'</div>';var select_btn_obj = new Object();select_btn_obj.fCollectParameter = FieldParaMess[v].fCollectParameter;select_btn_obj.fId = FieldParaMess[v].fId;//将选择器的节点id和选择器内选项以对象形式存储，放入定义好的List内select_btn_obj_list.push(select_btn_obj);//文本框} else {card_string = card_string +'<div class="mui-input-row">' +'<label>' + FieldParaMess[v].fFieldNameCn + '</label>' +//（判断是否为数字文本框）'<input type="' + ((FieldParaMess[v].fFieldType).indexOf("int") >= 0 ? "number" : "text") +'" class="mui-input-clear" value="' + obj[FieldParaMess[v].fFieldNameEn] + '">' +'</div>';}}//清空节点内容var list = document.getElementById("card_list");for (var i = list.childNodes.length; i > 0; i--) {list.removeChild(list.childNodes[i - 1]);}//确认按钮card_string = card_string +'<div class="mui-button-row">' +'<button type="button" class="mui-btn mui-btn-primary" id="btn_sure_update" style="float: left;margin-left: 3.125rem;" onclick="sure_update()">确认</button>' +'<button type="button" class="mui-btn mui-btn-danger" id="btn_cancel_update" style="float: right;margin-right: 3.125rem;">取消</button>' +'</div>';//拼接节点mui('#card_list')[0].insertAdjacentHTML('beforeend', card_string);btn_func();});//添加滚动效果mui('.mui-scroll-wrapper').scroll({deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006});var date_fid;var userPickerObjList = new Array();function btn_func() {//           时间选择器       下拉菜单选项和idconsole.log(date_btn_list, select_btn_obj_list);//下拉菜单for (var i = 0; i < select_btn_obj_list.length; i++) {//select_btn_obj_list[i].fCollectParameter为字符串"条件1,条件2,条件3,条件4,条件5"var selectlist = (select_btn_obj_list[i].fCollectParameter).split(",");//普通选择器的内容需要键值对的形式以数组的方式添加进去var add_to_pickerlist = new Array();for (var f = 0; f < selectlist.length; f++) {var selectobj = new Object();selectobj.value = selectlist[f];selectobj.text = selectlist[f];add_to_pickerlist.push(selectobj);}//创建一个picker对象var userPicker = new mui.PopPicker();//添加选择器内的选项userPicker.setData(add_to_pickerlist);//绑定激活选择器的按钮var showUserPickerButton = document.getElementById('select_' + select_btn_obj_list[i].fId);var userResult = document.getElementById('select_' + select_btn_obj_list[i].fId);var picobj = new Object();picobj.userPicker = userPicker;picobj.showUserPickerButton = showUserPickerButton;picobj.userResult = userResult;//为了防止只有最后一个选择器可以正常使用userPickerObjList.push(picobj);}//时间选择器for (var n = 0; n < date_btn_list.length; n++) {datepackLister(date_btn_list[n]);}for (var i = 0; i < userPickerObjList.length; i++) {var userObj = userPickerObjList[i];userObj.fId = select_btn_obj_list[i].fId;userpackLister(userObj);}}//给下拉菜单添加监听并弹出选择器function userpackLister(obj) {(obj.showUserPickerButton).addEventListener('tap', function(event) {obj.userPicker.show(function(items) {obj.userResult.innerText = items[0].text;mui('#input_' + obj.fId)[0].value = items[0].text;// console.log(mui('#input_' + obj.fId)[0].value);//返回 false 可以阻止选择框的关闭//return false;});}, false);}//加载时间选择器并监听function datepackLister(btnid) {// console.log(btnid);var result = mui('#date_' + btnid)[0];// date_fid = date_btn_list[n];var btn = mui('#date_' + btnid)[0];btn.addEventListener('tap', function() {var _self = this;if (_self.picker) {_self.picker.show(function(rs) {result.innerText = rs.text;mui('#input_' + btnid)[0].value = rs.text;// console.log(mui('#input_' + date_fid)[0].value);_self.picker.dispose();_self.picker = null;});} else {var optionsJson = this.getAttribute('data-options') || '{}';var options = JSON.parse(optionsJson);var id = this.getAttribute('id');/** 首次显示时实例化组件* 示例为了简洁，将 options 放在了按钮的 dom 上* 也可以直接通过代码声明 optinos 用于实例化 DtPicker*/_self.picker = new mui.DtPicker(options);_self.picker.show(function(rs) {/** rs.value 拼合后的 value* rs.text 拼合后的 text* rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本* rs.m 月，用法同年* rs.d 日，用法同年* rs.h 时，用法同年* rs.i 分（minutes 的第二个字母），用法同年*/result.innerText = rs.text;mui('#input_' + btnid)[0].value = rs.text;// console.log(mui('#input_' + btnid)[0].value);/* * 返回 false 可以阻止选择框的关闭* return false;*//** 释放组件资源，释放后将将不能再操作组件* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。*/_self.picker.dispose();_self.picker = null;});}}, false);}//确认按钮，获取input里的valuefunction sure_update() {console.log(FieldParaMess, obj);for (var f = 0; f < FieldParaMess.length; f++) {obj[FieldParaMess[f].fFieldNameEn] = mui('#input_' + FieldParaMess[f].fId)[0].value;}console.log(obj);}</script></body></html>

【核心部分】

function btn_func() {//           时间选择器       下拉菜单选项和idconsole.log(date_btn_list, select_btn_obj_list);//下拉菜单for (var i = 0; i < select_btn_obj_list.length; i++) {//select_btn_obj_list[i].fCollectParameter为字符串"条件1,条件2,条件3,条件4,条件5"var selectlist = (select_btn_obj_list[i].fCollectParameter).split(",");//普通选择器的内容需要键值对的形式以数组的方式添加进去var add_to_pickerlist = new Array();for (var f = 0; f < selectlist.length; f++) {var selectobj = new Object();selectobj.value = selectlist[f];selectobj.text = selectlist[f];add_to_pickerlist.push(selectobj);}//创建一个picker对象var userPicker = new mui.PopPicker();//添加选择器内的选项userPicker.setData(add_to_pickerlist);//绑定激活选择器的按钮var showUserPickerButton = document.getElementById('select_' + select_btn_obj_list[i].fId);var userResult = document.getElementById('select_' + select_btn_obj_list[i].fId);var picobj = new Object();picobj.userPicker = userPicker;picobj.showUserPickerButton = showUserPickerButton;picobj.userResult = userResult;//为了防止只有最后一个选择器可以正常使用userPickerObjList.push(picobj);}//时间选择器for (var n = 0; n < date_btn_list.length; n++) {datepackLister(date_btn_list[n]);}for (var i = 0; i < userPickerObjList.length; i++) {var userObj = userPickerObjList[i];userObj.fId = select_btn_obj_list[i].fId;userpackLister(userObj);}}//给下拉菜单添加监听并弹出选择器function userpackLister(obj) {(obj.showUserPickerButton).addEventListener('tap', function(event) {obj.userPicker.show(function(items) {obj.userResult.innerText = items[0].text;mui('#input_' + obj.fId)[0].value = items[0].text;// console.log(mui('#input_' + obj.fId)[0].value);//返回 false 可以阻止选择框的关闭//return false;});}, false);}//加载时间选择器并监听function datepackLister(btnid) {// console.log(btnid);var result = mui('#date_' + btnid)[0];// date_fid = date_btn_list[n];var btn = mui('#date_' + btnid)[0];btn.addEventListener('tap', function() {var _self = this;if (_self.picker) {_self.picker.show(function(rs) {result.innerText = rs.text;mui('#input_' + btnid)[0].value = rs.text;// console.log(mui('#input_' + date_fid)[0].value);_self.picker.dispose();_self.picker = null;});} else {var optionsJson = this.getAttribute('data-options') || '{}';var options = JSON.parse(optionsJson);var id = this.getAttribute('id');/** 首次显示时实例化组件* 示例为了简洁，将 options 放在了按钮的 dom 上* 也可以直接通过代码声明 optinos 用于实例化 DtPicker*/_self.picker = new mui.DtPicker(options);_self.picker.show(function(rs) {/** rs.value 拼合后的 value* rs.text 拼合后的 text* rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本* rs.m 月，用法同年* rs.d 日，用法同年* rs.h 时，用法同年* rs.i 分（minutes 的第二个字母），用法同年*/result.innerText = rs.text;mui('#input_' + btnid)[0].value = rs.text;// console.log(mui('#input_' + btnid)[0].value);/* * 返回 false 可以阻止选择框的关闭* return false;*//** 释放组件资源，释放后将将不能再操作组件* 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。* 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。* 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。*/_self.picker.dispose();_self.picker = null;});}}, false);}

【肯定会有更简洁的方式，能力有限，仅供参考】

MUI 在同一页面中动态添加多个picker选择器相关推荐

在ASP.NET页面中动态添加控件
今天被问到如何在ASP.NET 页面中动态创建一批控件,并且希望在后续代码中能访问到这些动态创建的控件.我用下面的例子来解释这个问题 ================================= ...
js向页面中动态添加脚本
var head= document.getElementsByTagName('head')[0];var script= document.createElement('script');scri ...
asp.net panel 加html,ASP.NET 页面中动态增加的控件、添加事件
要求:页面上有一个Add按钮,每点击一次该按钮,页面上动态创建一个WebPartZone! 提醒:WebPartZone只能在OnInit或之前才能创建,否则报异常! 大家都知道,按钮的点击事件是在R ...
android viewpager动态加载页面,Android viewpager中动态添加view并实现伪无限循环的方法...
本文实例讲述了Android viewpager中动态添加view并实现伪无限循环的方法.分享给大家供大家参考,具体如下: viewpager的使用,大家都熟悉,它可以实现页面之间左右滑动的切换,这里 ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...
js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件
文章目录前言一.场景需求还原二.代码示例 1.引入JQuery库 2.代码示例一:HTML中div标签部分二:HTML中script标签部分三:JS文件部分总结前言本篇文章中讲的是在 ...
在ScrollView中动态添加View
需求:要求在ScrollView中动态添加View,并且添加的View可以进行缩进. 思路:一开始的思路是使用ListView动态添加Item的方法来实现,即当需要新增一个View时,就给适配器新增一 ...
uniapp中动态添加及修改导航栏
在pages.json {"path": "pages/cart/cart","style": {"navigationBarTi ...
Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

MUI 在同一页面中动态添加多个picker选择器

MUI 在同一页面中动态添加多个picker选择器相关推荐

最新文章

热门文章