mui_分页,搜索,时间筛选之优化

原创 yinglsc 随笔 mui 254阅读 2018-01-29 10:30:01 举报

<!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>${Session.user.school!}</title>
<link href="https://cdn.bootcss.com/mui/3.4.0/css/mui.min.css"; rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
<link rel="stylesheet" href="../css/iconfont1.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../plugins/mui/css/app.css" />
<!--<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.dtpicker.css" rel="stylesheet" />-->
<link rel="stylesheet" type="text/css" href="../plugins/mui/css/mui.picker.min.css"/>
</head>
<body>
<style type="text/css">
.mui-switch.mui-active:before{content:'打开'}
.mui-switch:before{content:'关闭'}
.mui-switch:before{top: -8px;}
.loadMore{margin: 20px auto;text-align: center;}
.ny_cont{margin-top: 50px;}
.mui-card-header.mui-card-media .mui-media-body{margin-left: 0px;}
.mui-card-footer, .mui-card-header{min-height:35px}
</style>
<style>
.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-between;
text-align: center;
}
.mui-content-padded {
padding: 0px;margin-top: -6px;margin-right: -6px;
}
.mui-content-padded a {
margin: 3px;
width: 40px;
height: 40px;
display: inline-block;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 20px;
background-clip: padding-box;
}
.mui-content-padded a .mui-icon {
margin-top: 8px;
}
.mui-spinner,
.mui-spinner-white {
margin-top: 12px
}
.active .mui-spinner-indicator {
background: #007AFF;
}
.mui-content a {
color: #8F8F94;
}
.mui-content a.active {
color: #007aff;
}

        .loadMore{margin: 20px auto;text-align: center;padding: 5px 3px;}
        .mui-card-content-inner{padding-top: 5px;}

        .search_cont{margin-top:44px }
        .search_cont{margin-top:54px;padding: 0 10px;border-radius: 15px; }
        .dingsqdCheck_ul{border-radius: 7px;}
        .mui-table-view:before,.mui-table-view:after{height: 0;}
        .mui-table-view-cell>a:not(.mui-btn){margin: -17px -15px;}
        .tongzhi_cont0{
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .quanw{color: #098eeb;cursor: pointer;}

        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时,垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          color: #ffffff;
          font-size: 28px;
        }
        #rili_xf{
            position: fixed;
            top: 0%;
            left: 0%;
            right: 0;
            width: 100%;height: 100%;background-color: #ffffff;display: none;opacity: 1;
            z-index: 10;
        }
        .rili_top{
            height: 44px;width: 100%;background-color: #4da848;text-align: center;color: #ffffff;line-height: 44px;
        }
        .dingsqdCheck_bt{width: 43%;}
        .mui-table-view-cell>a:not(.mui-btn){margin: -11px -15px;}
        .myIndex_nqd{color: #4da848;}
        .myIndex_yqd{color: #dd524d;}
        .myIndex_yqj{color: #ff9800;}
        .ny_conts{background-color: #ffffff;margin-top: 10px;}
        .count_inst_nbt{padding: 3px 5px 1px 5px;background-color: #e64340;color: #ffffff !important;
                -moz-border-radius: 15px;
                    -webkit-border-radius: 15px;   position: absolute;top: 0px;right: 0px;font-size: .9rem;
                    border-radius:15px; font-size: 13px;float: right;}
        .count_inst_xbt{padding: 3px 5px 1px 5px;background-color: #ff9800;color: #ffffff !important;
        -moz-border-radius: 15px;
            -webkit-border-radius: 15px;  position: absolute;top: 0px;right: 0px;font-size: .9rem;
            border-radius:15px; font-size: 13px;float: right;}
    </style>
    <header class="mui-bar mui-bar-nav green_nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" ></a>
        <h1 class="mui-title">请假审批</h1>
        <a  class="mui-pull-right mui-icon" onclick="rili()">
            <span style="font-size: 0.9rem;margin-right: 3px;">筛选</span><i class="icon iconfont icon-shaixuan" style="margin-top:-9px;font-size: 19px;"></i>
        </a>
    </header>
    <section class="search_cont">
        <ul class="mui-table-view dingsqdCheck_ul">
            <li class="mui-table-view-cell search_li">
                <a style="margin-top: -22px;margin-bottom: -22px;" class=" dingsqdCheck_cont1">
                    <span style="margin-top: 8px;float: left;" class="mui-icon mui-icon-search"></span>
                    <input id="kw" style="text-align: left;width: 70%;float: left;padding-left: 15px;"  type="text" placeholder="搜索"/>
                </a>
               <!-- <button type="button" class="mui-btn  mui-pull-left" id="sear">搜索</button>-->
            </li>
        </ul>
    </section>
    <section class="ny_conts">

    </section>
    <!--加载更多按钮-->
     <div style="text-align: center;">
        <button class="loadMore"  onclick="more()">点击加载更多</button>
        <div class="loadEnd" style="display: none;margin: 20px auto;font-size: 0.9rem;">已经加载完</div>
     </div>
</body>
<script src="/plugins/mui/js/mui.min.js"></script>
<script src="/plugins/mui/js/mui.picker.js"></script>
<script src="/plugins/mui/js/mui.poppicker.js"></script>
<script src="/js/jquery-2.1.4.js"></script>
<script src="/plugins/mui/js/mui.picker.min.js"></script>
<script type="text/javascript" charset="utf-8">
    mui.init();
</script>
<script>

var page = 1;
var keyword="";
var start="";
var end="";

    window.addEventListener('pageshow', function(e) {
        $('.ny_conts').html("");
        start=localStorage.startTime;
        end=localStorage.endTime;
        search();
    getData();
    });
    function more(){
        $('.loadMore').text('正在加载中');
    page += 1;
    getData();
}
    function search(){
        $("#kw").bind('input propertychange', function() {
              var kw = $("#kw").val();
              console.log(kw);
        keyword=kw;
        page=1;
        $('.ny_conts').html("");
        getData();
            })
    }
    function rili(){
        window.location.href="/leave/screen.html"
    }

    function qux(){
        location.reload();
    }
    function getData(){
  $('.loadMore').hide();
  $('.loadEnd').text('正在加载...');
  $('.loadEnd').show();
        $.post("/leave/getData.json?time="+new Date().getTime(),{"keyword":keyword,"page":page,"start":start,"end":end},function(data){

            //console.log(data);
            if(data.total == page){
                $('.loadMore').hide();
                $('.loadEnd').text('已经加载完');
                $('.loadEnd').show();
            }else if(data.total == 0){
                $('.loadEnd').text('已经加载完');
                $('.loadEnd').show();
               $('.loadMore').hide();
            }else{
                $('.loadEnd').hide();
                $('.loadMore').text('点击加载更多');
                $('.loadMore').show();
            }

        if(data.code == 0){
              var dl=data.data;
          var html = "";
              for(var i=0; i<dl.length; i++){
                var id = dl[i].id;
                var student = dl[i].student;
                var number = dl[i].number;
                var phone = dl[i].phone;
                var grade = dl[i].grade;
                var teacher = dl[i].teacher;
                var context = dl[i].context;
                var typeName = dl[i].typeName;
                var type = dl[i].type;
                var stateName = dl[i].stateName;
                var state = dl[i].state;
                var leaveTime = dl[i].leaveTime;
                var isRead = dl[i].isRead;
                //字体颜色通过notice2_ul_active控制,红点通过notice2_ul_h5_red控制
                 if(isRead == 0){
                    ac = "notice2_ul_h5_red";
                }else{
                    ac = "";
                }
                if(type == 1){
                    sstate = "事假";
                    statetp = "count_inst_xbt"
                }else{
                    sstate = "病假";
                    statetp = "count_inst_nbt"
                }
                if(state == 1){
                    isCheck = "待审批";
                    isChecktp = "myIndex_yqd";
                }else if(state == 2){
                    isCheck = "通过";
                    isChecktp = "myIndex_nqd";
                }else if(state == 3){
                    isCheck = "未通过";
                    isChecktp = "myIndex_yqj";
                }
            html= html+'<li class="mui-table-view-cell ">'
                                    +'<a href="/leave/details.html?id='+id+'">'
                                        +'<h5 class="notice2_ul_active notice2_ul_h5 " style="margin-top: 5px;">'
                                            +'<div class="'+ac+'"></div>'
                                            +'<span class="'+statetp+'" >'+sstate+'</span>'
                                            +student+'('+grade+')'
                                        +'</h5>'
                                        +'<p class="notice2_ul_active" style="margin-top: 5px;margin-bottom: 3px;">'+context+'</p>'
                                        +'<div class="notice2_foot">'
                                            +'<span class="mui-pull-left '+isChecktp+'">'+isCheck+'</span>'
                                            +'<span class="mui-pull-right">'+leaveTime+'</span>'
                                        +'</div>'
                                    +'</a>'
                                +'</li>';
              }
          //这里还有一层好处,android没bug,但是ios端会出现2次搜索结果重复,在for外层这样就可以解决
          if(page==1){
            $(".ny_conts").html(html);
          }else{
            $(".ny_conts").append(html);
          }

            }
        },"json")
    }
</script>

</html>
//这里优化的是ajax列表读取,老大说不能循环一次append一次,先计算之后再循环之外一次加入(这里是分页+搜索+筛选)

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复