mui做的上拉刷新和下拉加载和日期选择器

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/BlueRose_9999/article/details/79804456
<!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">&nbsp;</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>
展开阅读全文

没有更多推荐了,返回首页