Android混合开发 mui例子之列表页（-）
kwlist.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--> <link rel="stylesheet" href="../../css/mui.css"> <link rel="stylesheet" href="../../css/iconfont.css"> <link rel="stylesheet" href="../../css/common.css"> <!--App自定义的css--> <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />--> <style> .mui-table h4, .mui-table h5, .mui-table .mui-h5, .mui-table .mui-h6, .mui-table p { margin-top: 0; } .mui-table h4 { line-height: 21px; font-weight: 500; } .mui-table .oa-icon { position: absolute; right: 0; bottom: 0; } .mui-table .oa-icon-star-filled { color: #f14e41; } .padding { padding-right: 5px; } .select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; outline: none; border: none; } </style> </head> <body> <header class="mui-bar mui-bar-nav commhead-backgroundcolor"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left commhead-textcolor" ></a> <h1 class="mui-title headtext-color commhead-textcolor" >货位库存查看</h1> <a class="mui-action-next mui-pull-right commhead-right" >批号</a> </header> <div class="mui-content"> </div> </body> <script src="../../js/mui.min.js"></script> <script src="../../js/mui.picker.js"></script> <script src="../../js/mui.picker.min.js"></script> <script> var jud=false; mui.init({ swipeBack: true, //启用右滑关闭功能 gestureConfig:{ doubletap:true }, subpages:[{ url:'kwdetail.html', id:'kwdetail.html', styles:{ top: '45px', bottom: '0px', } }] }); document.querySelector('.mui-action-next').addEventListener('tap', function() { jud=!jud; if(jud) { this.text="名称"; }else { this.text="批号"; } }); </script> </html>
kwdetail.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--> <link rel="stylesheet" href="../../css/mui.css"> <link rel="stylesheet" href="../../css/iconfont.css"> <!--App自定义的css--> <!--<link rel="stylesheet" type="text/css" href="../css/app.css" />--> <style> .mui-table h4, .mui-table h5, .mui-table .mui-h5, .mui-table .mui-h6, .mui-table p { margin-top: 0; } .mui-table h4 { line-height: 21px; font-weight: 500; } .mui-table .oa-icon { position: absolute; right: 0; bottom: 0; } .mui-table .oa-icon-star-filled { color: #f14e41; } .padding { padding-right: 5px; } </style> </head> <body> <!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--数据列表--> <ul id="list" class="mui-table-view mui-table-view-striped mui-table-view-condensed"> <li id="lihwm"></li> <li v-for="item in items" v-if='item' class="mui-table-view-cell"> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-12"> <div><span class="mui-h4">某某某屈臣氏苏打水330ml 1*24灌 8880：{{item.RETURN_PEOPLE_NAME}}</span></div> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-6"> <span class="mui-h5">规格：{{item.ALLOWED}}</span> </div> <div class="mui-table-cell mui-col-xs-6 "> <span class="mui-h5">数量：{{item.ALLOWED}}</span> </div> <div class="mui-table-cell mui-col-xs-6 "> <span class="mui-h5">件数：{{item.ALLOWED}}</span> </div> <div class="mui-table-cell mui-col-xs-6 "> <span class="mui-h5">描述：{{item.ALLOWED}}</span> </div> </div> <span class="mui-h5">批号：{{item.USED_CODE}}</span> </div> </div> </li> </ul> </div> </div> </body> <script src="../../js/mui.min.js"></script> <script type="text/javascript" src="../../js/vue.js"></script> <script type="text/javascript" src="../../js/common.js"></script> <script> var pageIndex = 1; var list_Data; var vm = new Vue({ el: '#list', data: { items: [] } }); mui.init({ swipeBack: true, //启用右滑关闭功能 pullRefresh: { container: '#pullrefresh', down: { callback: pulldownRefresh }, up: { contentrefresh: '正在加载...', callback: pullupRefresh } } }); var where = { groups: [{ rules: [ ], op: "or" }, { rules: [ ], op: "and" } ], op: "and" } where.groups[0].rules.push({ field: 'APPLY_PEOPLE', value: (localStorage.getItem("username")), op: 'equals' }); where.groups[0].rules.push({ field: 'RETURN_PEOPLE_NAME', value: (localStorage.getItem("username")), op: 'equals' }); where.groups[1].rules.push({ field: 'GSZD', value: (localStorage.getItem("GSZD")), op: 'equals' }); where.groups[1].rules.push({ field: 'IS_BACK', value: 1, op: 'notequal' }); mui.plusReady(function() { console.log(JSON.stringify(where)) plus.nativeUI.showWaiting(); mui(".mui-table-view").on('tap', '.mui-table-view-cell', function() { // openView(); }); document.getElementById('lihwm').innerHTML="<div id='divhwm' style='background-color:rgb(174,54,52);color: white;text-align: center; padding-top: 0.625rem;padding-bottom: 0.625rem;'>货位码：ZP-21-40</div>"; Api_List({ view: "TB_FDN_MATERIALS_RE_APPLY", pageIndex: pageIndex, orderName: "INSERT_TIME", orderSort: "DESC", whereString: JSON.stringify(where), success: function(data) { list_Data = eval(data); vm.$data.items = list_Data; plus.nativeUI.closeWaiting(); }, error: function() { plus.nativeUI.closeWaiting(); } }); }) /** * 下拉刷新具体业务实现 */ function pulldownRefresh() { setTimeout(function() { pageIndex = 1; Api_List({ view: "TB_FDN_MATERIALS_RE_APPLY", pageIndex: pageIndex, orderName: "INSERT_TIME", orderSort: "DESC", whereString: JSON.stringify(where), success: function(data) { vm.$data.items = eval(data); mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed }, error: function() { mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed } }); }, 1500); } /** * 上拉加载具体业务实现 */ function pullupRefresh() { setTimeout(function() { pageIndex++; Api_List({ view: "TB_FDN_MATERIALS_RE_APPLY", pageIndex: pageIndex, orderName: "INSERT_TIME", orderSort: "DESC", whereString: JSON.stringify(where), success: function(data) { list_Data = eval(data); mui('#pullrefresh').pullRefresh().endPullupToRefresh((list_Data.length <= 0)) list_Data.forEach(function(obj) { vm.$data.items.splice(0, 0, obj) }) }, error: function() { mui('#pullrefresh').pullRefresh().endPullupToRefresh(true) } }); }, 1500); } mui(".mui-table-view").on('tap', '.mui-table-view-cell', function() { //openView(); }) window.addEventListener("openview", function() { //openView(); }) </script> </html>
依赖common.js
/** * @description 获取本地设置的服务器ip和port */ function GetServerInfo() { var serverIp = localStorage.serverIp; var serverPort = localStorage.serverPort; if(serverIp == null || serverPort == null) return '' return serverIp + ":" + serverPort; } /** *@description 加载list页 */ function Api_List(options) { mui.ajax('http://' + GetServerInfo() + '/Api/List', { data: { tb: options.view || "", pageIndex: options.pageIndex || "", orderName: options.orderName || "", orderSort: options.orderSort || "", whereString: options.whereString || "" }, dataType: 'json', //服务器返回json格式数据 type: 'get', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒； success: function(data) { //console.log(data) // data = JSON.parse(data); if(!data.IsError) { if(options.success != null || options.success != undefined) { options.success.call(null, eval(data.Data)); } } else { plus.nativeUI.toast(data.Message); } }, error: function(xhr, type, errorThrown) { if(type == "timeout") { plus.nativeUI.toast("网络链接超时"); } else { plus.nativeUI.toast("数据加载异常，请重试"); } plus.nativeUI.toast("数据加载异常，请重试"); if(options.error != undefined && options.error != null) { options.error.call(null, xhr, type, errorThrown) } } }); } /** *@description 加载下拉框 */ function Api_DropList(options) { mui.ajax('http://' + GetServerInfo() + '/Api/DropList', { data: { view: options.view || "", where: options.where || "", idfield: options.idfield || "", textfield: options.textfield || "", valueField: options.valueField || "", sortname: options.sortname || "", sortorder: options.sortorder || "" }, crossDomain:true, dataType: 'json', //服务器返回json格式数据 type: 'get', //HTTP请求类型 timeout: 10000, //超时时间设置为10秒； success: function(data) { data = eval(data); if(!data.IsError) { if(options.success != null || options.success != undefined) { options.success.call(null, eval(data.Data)); } } else { plus.nativeUI.toast(data.Message); } }, error: function(xhr, type, errorThrown) { if(type == "timeout") { plus.nativeUI.toast("网络链接超时"); } else { plus.nativeUI.toast("数据加载异常，请重试"); } plus.nativeUI.toast("数据加载异常，请重试"); if(options.error != undefined && options.error != null) { options.error.call(null, xhr, type, errorThrown) } } }); } /** *@description Ajax请求二次封装 带loading窗口 */ function Ajax(options) { var wait_ico; if(plus != undefined && plus != null) { wait_ico = plus.nativeUI.showWaiting(); } mui.ajax('http://' + GetServerInfo() + ((options.url || "").indexOf('/') == 0 ? (options.url || "") : ('/' + options.url || "/")), { data: options.data || "", dataType: 'json', //服务器返回json格式数据 type: options.type || 'get', //HTTP请求类型 timeout: options.timeout || 10000, //超时时间设置为10秒； headers: options.headers || "", crossDomain:true, success: function(data) { wait_ico.close(); //console.log(data) data = JSON.parse(data); //console.log(data.IsError) if(!data.IsError) { if(options.success != null || options.success != undefined) { options.success.call(null, data.Data); } } else { plus.nativeUI.toast(data.Message); } }, error: function(xhr, type, errorThrown) { if(wait_ico != null && wait_ico != undefined) { wait_ico.close(); } if(type == "timeout") { plus.nativeUI.toast("网络链接超时..."); } else { plus.nativeUI.toast("数据加载异常，请重试"); } if(options.error != undefined && options.error != null) { options.error.call(null, xhr, type, errorThrown) } } }); } /** *@description Ajax请求二次封装 无loading窗口 */ function AjaxAnsyc(options) { mui.ajax('http://' + GetServerInfo() + ((options.url || "").indexOf('/') == 0 ? (options.url || "") : ('/' + options.url || "/")), { data: options.data || "", dataType: 'json', //服务器返回json格式数据 type: options.type || 'get', //HTTP请求类型 timeout: options.timeout || 10000, //超时时间设置为10秒； success: function(data) { //console.log(data) data = JSON.parse(data); //console.log(data.IsError) if(!data.IsError) { if(options.success != null || options.success != undefined) { options.success.call(null, data.Data); } } else { plus.nativeUI.toast(data.Message); } }, error: function(xhr, type, errorThrown) { // console.log(errorThrown) if(type == "timeout") { plus.nativeUI.toast("网络链接超时"); } else { plus.nativeUI.toast("数据加载异常，请重试"); } if(options.error != undefined && options.error != null) { options.error.call(null, xhr, type, errorThrown) } } }); } /** *@description * 说明：JS时间Date格式化参数 * 参数：格式化字符串如：'yyyy-MM-dd HH:mm:ss' * 结果：如2016-06-01 10:09:00 */ Date.prototype.Format = function(fmt) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "H+": this.getHours(), "m+": this.getMinutes(), "s+": this.getSeconds(), "q+": Math.floor((this.getMonth() + 3) / 3), "S": this.getMilliseconds() }; var year = this.getFullYear(); var yearstr = year + ''; yearstr = yearstr.length >= 4 ? yearstr : '0000'.substr(0, 4 - yearstr.length) + yearstr; if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (yearstr + "").substr(4 - RegExp.$1.length)); for(var k in o) if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } /** *@description * 说明：Json时间(/Date(1410019200000+0800)/)格式化 * 参数：格式化字符串如：'yyyy-MM-dd HH:mm:ss' * 结果：如2016-06-01 10:09:00 */ String.prototype.FormatJson = function(fmt) { var d = eval('new ' + (this.replace(/\//g, ''))); var o = { "M+": d.getMonth() + 1, "d+": d.getDate(), "H+": d.getHours(), "m+": d.getMinutes(), "s+": d.getSeconds(), "q+": Math.floor((d.getMonth() + 3) / 3), "S": d.getMilliseconds() }; var year = d.getFullYear(); var yearstr = year + ''; yearstr = yearstr.length >= 4 ? yearstr : '0000'.substr(0, 4 - yearstr.length) + yearstr; if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (yearstr + "").substr(4 - RegExp.$1.length)); //console.log(fmt) for(var k in o) if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } /* * @description 字符串转时间类型 */ function ConvertToDate(strDate) { var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/, function(a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')'); return date; }
