<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>***</title>
<link rel="stylesheet" type="text/css" href='basestyle.css'/>
<link rel="stylesheet" type="text/css" href='patient.css'/>
<link rel="stylesheet" type="text/css" href='mui.min.css'/>
<link rel="stylesheet" type="text/css" href='mui.picker.min.css'/>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/template.js" type="text/javascript"></script>
<script src="js/template-web.js" type="text/javascript"></script>
<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
template.openTag = "{{";
template.closeTag = "}}";
</script>
</head>
<body>
<nav class="header doctor_header">
<div class="return"></div>
<div class="head-con">***</div>
<div class="head-btn"> </div>
</nav>
<div style="position: absolute;z-index: 2;top: 50px;width: 100%">
<div class="prescription_content">
<div style="display: flex;text-align: center;background: #fff;border-bottom: 1px #ccc solid">
<input class="select_date patient_input" data-options='{"type":"date"}' placeholder="请选择开始日期"
value="" style="cursor: pointer" readonly/>
<span class="patient_line">--</span>
<input class="select_date patient_input" data-options='{"type":"date"}' placeholder="请选择结束日期"
value="" style="cursor: pointer" readonly/>
</div>
</div>
<div class="patient_search">
<input type="text" class="search" id="mysearch" placeholder="请输入关键字" value=""/><button onclick="seachText()">搜索</button>
</div>
</div>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="top: 132px;">
<div class="mui-scroll prescription_content" id="prescription_content">
<!--数据列表-->
<div class="buylist" id="notbuy_list_medic">
<!--渲染数据-->
</div>
</div>
</div>
<script id="notbuy_list_data" type="text/html">
{{each data as value index}}
<div class="patient_content">
<div class="patient_box title"><p>编号：{{value.PRESN}}</p><p>日期：{{(value.PRESCRIPTDATE)}}</p></div>
<div class="patient_box"><p><span>{{value.PATNAME}}</span><span>{{value.SEX}}</span><span>{{value.AGE}}</span></p><p></p></div>
<div class="patient_box"><p><span>实验室</span><span>{{value.DEPT}}</span></p><p></p></div>
<div class="patient_box"><p><span>结果</span><span>{{value.DIAGNOSIS}}</span></p><p><button onclick="pushPage({{value.ID}})">查看</button></p></div>
</div>
{{/each}}
</script>
<script>
var pageCount = 1;//页码
var date_inputs = document.getElementsByClassName('select_date');
var today = new Date();
var thisyear = today.getFullYear();
var thismonth = today.getMonth();
today.setFullYear(thisyear,thismonth,1);
var startDate,endDate;
startDate = date_inputs[0].value =formatter(today) ;//当月的1号
endDate = date_inputs[1].value =formatter(new Date()) ;//当前时间的日期
var resourse = {data:[],pageCount:0};
window.onload = function () {
getData(startDate,endDate,'',pageCount);
(function ($) {
$.init(
//初始化上拉下拉控件
{
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
}
);
var inputs = $('.select_date');
inputs.each(function (i, input) {
input.addEventListener('tap', function () {
var _self = this;
if (_self.picker) {
_self.picker.show(function (rs) {
input.value = rs.text;
_self.picker.dispose();
_self.picker = null;
});
} else {
var optionsJson = this.getAttribute('data-options') || '{}';
var options = JSON.parse(optionsJson);
_self.picker = new $.DtPicker(options);
_self.picker.show(function (rs) {
input.value = rs.text;
//这个时候已经能拿到日期
compareDate(date_inputs[0].value,date_inputs[1].value);
startDate = date_inputs[0].value;
endDate = date_inputs[1].value;
_self.picker.dispose();
_self.picker = null;
});
}
}, false);
});
function pulldownRefresh() {
setTimeout(function() {
pageCount = 1;
var text = document.getElementById('mysearch').value;
getData(startDate,endDate,text,pageCount);
//
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
deteleTip();
}, 1500);
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
deteleTip();
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh();
pageCount++;
// mui('#pullrefresh').pullRefresh().endPullupToRefresh((++pageCount>resourse.pageCount)); //参数为true代表没有更多数据了。调用了一次后面再调用就不执行下拉加载了，不知道是不是我使用的方法不对，所以我手动写了一个提示语notMassge‘没有更多数据了。。。’
if(pageCount <= resourse.pageCount){
resourse.data = [];
var text = document.getElementById('mysearch').value;
getData(startDate,endDate,text,pageCount,'pullupRefresh');
}else{
var notMassge = document.createElement('div');
notMassge.className = 'notMassge';
notMassge.id = 'notMassge';
notMassge.innerHTML = '没有更多数据了。。。';
var buylist = document.body.querySelector('.buylist');
buylist.after(notMassge);
}
}, 1500);
}
})(mui);
};
var notbuy_list = document.getElementById("notbuy_list");
//网络请求数据
var getData = function (start_Date, end_Date, str, PageCount, Refresh) {
$.ajax({
type: "POST", //传值方式
url: "******", //后台处理地址
data: {
PageCount:PageCount //页码，必填，首次为1，下拉加载，下拉一次+1
},
success: function (res) {
if(Refresh){
//如果是下拉刷新
for (var i=0;i<res.Items.length;i++){
res.Items[i].PRESCRIPTDATE = ChangeDateFormat(res.Items[i].PRESCRIPTDATE);
}
var html = template("notbuy_list_data", {data: res.Items});
document.getElementById('notbuy_list_medic').insertAdjacentHTML('beforeEnd', html);
}else {
var conent = document.getElementById('pullrefresh');
if(res.Items.length >0){
conent.style.display = 'block';
resourse.pageCount = res.TotalPages;
for (var i=0;i<res.Items.length;i++){
res.Items[i].PRESCRIPTDATE = ChangeDateFormat(res.Items[i].PRESCRIPTDATE);
}
resourse.data = res.Items;
var notbuy_list_data = template("notbuy_list_data", resourse);
document.getElementById('notbuy_list_medic').innerHTML = notbuy_list_data;
}else{
conent.style.display = 'none';
}
}
} //参数
});
}
function deteleTip() {
//删除‘没有更多数据’提示语；
var parent = document.getElementById('prescription_content');
var child = document.getElementById("notMassge");
if(child){
parent.removeChild(child);
}
}
function pushPage(ID) {
//写跳转页面的方法
console.info(ID);
// history.go();
}
function seachText() {
deteleTip();
resourse.data = [];
pageCount = 1;
var text = document.getElementById('mysearch').value;
if(clearSpace(text).length >0){
if (compareDate(startDate,endDate)) {
getData(startDate,endDate,text,pageCount);
}
}else{
alert('请输入关键字');
}
}
function getUrlParam (id, url) {
//获得地址栏中的参数 window.location.search
var reg = "/(\\?|\\&|\\&&)" + id + "=([^\\&]+)/im";
reg = eval(reg);
var result = url.match(reg);
if (result && result[2]) {
return result[2];
} else {
return null;
}
}
//去除字符串空格
function clearSpace (str){
var result;
result = str.replace(/(^\s+)|(\s+$)/g,"");
result = result.replace(/\s/g,"");
return result;
};
//日期比较
function compareDate(start, end) {
console.info(start+" "+end);
start = new Date(start);
end = new Date(end);
if (end - start < 0) {
alert("结束日期要大于开始日期");
return false;
}
return true;
}
function formatter(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);
};
function ChangeDateFormat(val) {
if (val != null) {
var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));
//月份为0-11，所以+1，月份小于10时补个0
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
return date.getFullYear() + "-" + month + "-" + currentDate;
}
return "";
}
</script>
</body>
</html>mui做的上拉刷新和下拉加载和日期选择器
最新推荐文章于 2021-08-05 12:21:04 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
