MUI 在同一页面中动态添加多个picker选择器
程序员文章站
2022-05-31 14:39:02
...
【页面效果】
【说明】
由于业务需求，该页面所有文本框，文本域，选择器及选择器内选项皆为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>
//时间选择器节点id
var 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() {
// 时间选择器 下拉菜单选项和id
console.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里的value
function 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() {
// 时间选择器 下拉菜单选项和id
console.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] mui 图片放大预览demo