layer结合weui分页结合bpm框架万能查询一页加载所有数据例子


发布时间:2018/3/19 21:43:19  次浏览  作者:admin

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fenye.aspx.cs" Inherits="NetWing.BPM.Admin.weixin.fenye" %>

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</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">
    <!--<link rel="stylesheet" href="js/mui.min.css">-->
    <link href="../../weixin/weiui/css/jquery-weui.min.css" rel="stylesheet" />
    <link href="../../weixin/weiui/lib/weui.min.css" rel="stylesheet" />
    <script src="../../weixin/weiui/lib/jquery-2.1.4.js"></script>
    <script src="../../weixin/weiui/js/jquery-weui.min.js"></script>
    <script src="../../weixin/weiui/lib/fastclick.js"></script>
    <link href="../../weixin/layui/css/layui.mobile.css" rel="stylesheet" />
    <link href="../../weixin/layui/css/layui.css" rel="stylesheet" />
    <link rel="stylesheet" href="cssandjs/creditcard.css">
    <!--引入layer-->
    <script src="../../weixin/layui/layui.js"></script>
</head>

<body>
    <!-- 容器 -->
    <div class="weui-tab">
        <div class="weui-navbar">
            <a class="weui-navbar__item weui-bar__item--on" href="#tab1">审核中客户
            </a>
            <a class="weui-navbar__item" href="#tab2">通过审核客户
            </a>

        </div>
        <div class="weui-tab__bd">
            <!--审核中客户-->
            <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                <div id="tab1list"></div>
                <div id="tab1loading" style="text-align: center"></div>

            </div>
            <!--通过审核客户-->
            <div id="tab2" class="weui-tab__bd-item">
                <div id="tab2list"></div>
                <div id="tab2loading" style="text-align: center"></div>
            </div>

        </div>
    </div>




    <!--初始化事件  先初始化tab1 -->
    <script>






        $("#tab1").infinite(50);
        //当用户滚动到页面底部的时候,会在 body 上触发 infinite 事件。监听此事件即可:
        var loading = false;  //状态标记
        var page = 1;
        var pagecount = 10;//每页数量
        var total = 0;//总数据条数
        //金额等于0审核中客户  
        var filter = encodeURI("{\"groupOp\": \"AND\", \"rules\": [{\"field\":\"spje\",\"op\":\"eq\",\"data\":\"0\" }],\"groups\":[]}");
        //审批金额大于0为通过审批用户
        var filter2 = encodeURI("{\"groupOp\": \"AND\", \"rules\": [{\"field\":\"spje\",\"op\":\"gt\",\"data\":\"0\" }],\"groups\":[]}");


        addData(page, pagecount, 'tab1list', filter);//审核中用户
        addData(page, pagecount, 'tab2list', filter2);//审核通过用户



        //先取得总页数---审核中客户
        $.ajax({
            type: 'POST',
            url: '/Wzsh_khxx/ashx/Wzsh_khxxHandler.ashx?filter=' + filter + '',
            dataType: 'json',
            beforeSend: function () { },
            complete: function () { },
            success: function (d) {
                //渲染分页
                layui.use('laypage', function () {
                    var laypage = layui.laypage;

                    //执行一个laypage实例
                    laypage.render({
                        elem: 'tab1loading', //注意,这里的 test1 是 ID,不用加 # 号
                        count: d.total, //数据总数,从服务端得到
                        groups: 3,
                        jump: function (obj, first) {//jump - 切换分页的回调
                            //obj包含了当前分页的所有参数,比如:
                            console.log("当前页:" + obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                            console.log("每页显示:" + obj.limit); //得到每页显示的条数

                            //首次不执行
                            if (!first) {
                                addData(obj.curr, pagecount, 'tab1list', filter);//第一次加载第一页
                                console.log("当前点击第:" + obj.curr + "页");
                                //do something
                            }
                        }
                    });
                });
                //alert(JSON.stringify(d));
            }
        });





        //先取得总页数---审批通过客户
        $.ajax({
            type: 'POST',
            url: '/Wzsh_khxx/ashx/Wzsh_khxxHandler.ashx?filter=' + filter2 + '',
            dataType: 'json',
            beforeSend: function () { },
            complete: function () { },
            success: function (d) {
                //渲染分页
                layui.use('laypage', function () {
                    var laypage = layui.laypage;

                    //执行一个laypage实例
                    laypage.render({
                        elem: 'tab2loading', //注意,这里的 test1 是 ID,不用加 # 号
                        count: d.total, //数据总数,从服务端得到
                        groups: 3,
                        jump: function (obj, first) {//jump - 切换分页的回调
                            //obj包含了当前分页的所有参数,比如:
                            console.log("当前页:" + obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                            console.log("每页显示:" + obj.limit); //得到每页显示的条数

                            //首次不执行
                            if (!first) {
                                addData(obj.curr, pagecount, 'tab2list', filter2);//第一次加载第一页
                                console.log("当前点击第:" + obj.curr + "页");
                                window.scrollTo(0, 0); //javascript方式回顶部
                                //do something
                            }
                        }
                    });
                });
                //alert(JSON.stringify(d));
            }
        });



        function addData(p, rows, appendObj, filter) {
            $.ajax({
                type: 'POST',
                url: '/Wzsh_khxx/ashx/Wzsh_khxxHandler.ashx?page=' + p + '&rows=' + rows + '&filter=' + filter+'',
                dataType: 'json',
                beforeSend: function () { },
                complete: function () { },
                success: function (d) {
                    // console.log("得到的json数据:" + JSON.stringify(d));
                    //定义模版
                    var template = '';
                    //循环解析json
                    $.each(d.rows, function (i, obj) {
                        //alert(obj.tagName);
                        template = template + '<div class="weui-cells" > ';
                        template = template + '<div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + '<p>姓名</p>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell__ft">' + obj.truename + '</div>';
                        template = template + '</div >';
                        template = template + '<div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + '<p>电话</p>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell__ft">' + obj.mobile + '</div>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + '<p>申请时间</p>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell__ft">' + obj.add_time + '</div>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + '<p>申请金额</p>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell__ft">' + obj.sqje + '</div>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + '<p>审批时间</p>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell__ft">' + obj.sp_time + '</div>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + '<p>审批金额</p>';
                        template = template + '</div>';
                        template = template + '<div class="weui-cell__ft">' + obj.spje + '</div>';
                        template = template + '</div>';
                        template = template + '</div>';
                        //弹出层默认不显示
                        template = template + '<div id="pop' + obj.KeyId + '" class="weui-popup__container popup-bottom" style="display:none;z-index:999;">';
                        template = template + '<div class="weui-popup__overlay"></div>';
                        template = template + '<div class="weui-popup__modal">';
                        template = template + '<div style="margin-left:5px;margin-right:5px;margin-bottom:60px;margin-top:5px;">';
                        //template = template + '你的内容放在这里...';
                        //内容部分开始
                        template = template + '<div class="weui-cells">';
                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>产品名称</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.productmc + '</div>';
                        template = template + '</div>';

                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>姓名</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.truename + '</div>';
                        template = template + '</div>';



                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>性别</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.sex + '</div>';
                        template = template + '</div>';



                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>电话</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.mobile + '</div>';
                        template = template + '</div>';



                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>身份证号</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.cardno + '</div>';
                        template = template + '</div>';


                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>申请时间</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.add_time + '</div>';
                        template = template + '</div>';

                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>申请金额</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.sqje + '</div>';
                        template = template + '</div>';

                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>审批时间</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.sp_time + '</div>';
                        template = template + '</div>';



                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>审批金额</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.spje + '</div>';
                        template = template + '</div>';



                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>审批结果</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.spjg + '</div>';
                        template = template + '</div>';



                        template = template + ' <div class="weui-cell">';
                        template = template + '<div class="weui-cell__bd">';
                        template = template + ' <p>住址</p>';
                        template = template + ' </div>';
                        template = template + '<div class="weui-cell__ft">' + obj.address + '</div>';
                        template = template + '</div>';



                        template = template + '</div>';
                        //内容部分结束


                        template = template + '<a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a>';
                        template = template + '</div>';
                        template = template + '</div>';
                        template = template + '</div>';
                        template = template + '<a href="javascript:;" style="margin:5px 10px 0 10px;"  class="open-popup weui-btn weui-btn_primary" data-target="#pop' + obj.KeyId + '">查看</a>';



                    });
                    // console.log("模版结果:" + template);
                    $('#' + appendObj).empty();//先清空原来的元素
                    $('#' + appendObj).append(template);//在某元素之前插入

                    total = d.total;




                    //alert(JSON.stringify(d));
                }
            });


        }

    </script>




    <script>

        //mui.init({
        //    pullRefresh: {
        //        container: '#pullrefresh',//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
        //        up: {
        //            height: 50,//可选.默认50.触发上拉加载拖动距离
        //            auto: true,//可选,默认false.自动上拉加载一次
        //            contentrefresh: "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
        //            contentnomore: '没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
        //            callback: pullupRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
        //        },
        //        down: {
        //            style: 'circle',//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
        //            auto: false,//可选,默认false.首次加载自动上拉刷新一次
        //            callback: pulldownRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
        //        }
        //    }
        //});


        //var count = 0;
        //var pagecount = 5;//定义每页有几条

        ///**
        // * 上拉加载具体业务实现
        // */
        //function pullupRefresh() {
        //    count=1;
        //    console.log("上拉加载 当前页数:" + count);
        //    console.log('当前url:/Wzsh_khxx/ashx/Wzsh_khxxHandler.ashx?page=' + count + '&rows=' + pagecount + '');
        //    setTimeout(function () {
        //        mui.ajax('/Wzsh_khxx/ashx/Wzsh_khxxHandler.ashx?page=' + count + '&rows=' + pagecount + '', {
        //            dataType: 'json', //服务器返回json格式数据
        //            type: 'get', //HTTP请求类型
        //            timeout: 10000, //超时时间设置为10秒;
        //            success: function (data) {
        //                console.log("上拉业务count:" + count);
        //                //丢弃小数部分,保留整数部分 parseInt(5 / 2)
        //                //console.log(parseInt(data.total / 20) + 1);
        //                console.log("----" + data.rows);
        //                //向上取整,有小数就整数部分加1  Math.ceil(5 / 2)
        //                console.log("当前页数:" + Math.ceil(data.total / pagecount));

        //                var allpages = Math.ceil(data.total / pagecount);//得到一共有几页

        //                console.log(data);
        //                //plus.nativeUI.closeWaiting();
        //                //服务器返回响应,根据响应结果,分析是否登录成功;
        //                if (data.rows.length != 0) {
        //                    //console.log('上上:'+count+'---'+data.rows);
        //                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((count > allpages)); //参数为true代表没有更多数据了。
        //                    jQuery.each(data.rows, function (i, o) { //v是json数组
        //                        var str = "";
        //                        var str = '<li id="news' + o.KeyId + o.truename + '" class="mui-table-view-cell mui-media"><a href="javascript:;">';


        //                        str = str + '<p class="zhaiyao">' + o.KeyId + o.truename + '</p>';

        //                        str = str + '</a>';
        //                        str = str + '</li>';
        //                        str = str + '';
        //                        jQuery("#newslist").append(str);
        //                        mui('#pullrefresh').pullRefresh().endPullupToRefresh(2 > 1);
        //                    })
        //                } else {
        //                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(2 > 1);
        //                }
        //            },
        //            error: function (xhr, type, errorThrown) {
        //                //plus.nativeUI.closeWaiting();
        //                //   //异常处理;
        //                //   //console.log(type);
        //                //   mui.toast("请检查网络是否连通!");
        //               // --count;
        //            }
        //        });
        //    }, 1500);
        //}

        ///**
        //* 下拉刷新具体业务实现
        //*/
        //function pulldownRefresh() {
        //    console.log("下拉刷新!");
        //    ++count;
        //    setTimeout(function () {
        //        console.log("当前页数:" + count)
        //        console.log("当前url:/Wzsh_khxx/ashx/Wzsh_khxxHandler.ashx?page=" + count + "&rows=" + pagecount + "");
        //        mui.ajax('/Wzsh_khxx/ashx/Wzsh_khxxHandler.ashx?page=' + count + '&rows=' + pagecount + '', {
        //            //mui.ajax('/weixin/getinter.ashx?action=articlelist&cbiao=wzsh_khxx&cid=陈婷婷&pageindex=' + count + '&pagesize=3', {
        //            dataType: 'json', //服务器返回json格式数据
        //            type: 'get', //HTTP请求类型
        //            timeout: 10000, //超时时间设置为10秒;
        //            success: function (data) {
        //                //plus.nativeUI.closeWaiting();
        //                //服务器返回响应,根据响应结果,分析是否登录成功;
        //                console.log(data);
        //                if (data.rows.length != 0) {
        //                    jQuery("#newslist").html("");
        //                    console.log("123456789");
        //                    //console.log('下下:'+count+'---'+data.rows);
        //                    mui('#pullrefresh').pullRefresh().refresh(true);
        //                    jQuery.each(data.rows, function (i, o) { //v是json数组
        //                        var str = "";
        //                        var str = '<li id="news' + o.KeyId + o.truename+'" class="mui-table-view-cell mui-media"><a href="javascript:;">';


        //                        str = str + '<p class="addtime">' + o.KeyId + o.truename +'</p>';
        //                        str = str + '</a>';
        //                        str = str + '</li>';
        //                        str = str + '';
        //                        jQuery("#newslist").append(str);
        //                    })
        //                } else {
        //                    mui.toast("请检查网络是否连通!");
        //                }
        //            },
        //            error: function (xhr, type, errorThrown) {
        //                plus.nativeUI.closeWaiting();
        //                //异常处理;
        //                //console.log(type);
        //                mui.toast("请检查网络是否连通!");
        //            }
        //        });
        //        mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
        //    }, 1500);
        //}

        //if (mui.os.plus) {
        //    mui.plusReady(function () {
        //        setTimeout(function () {
        //            mui('#pullrefresh').pullRefresh().pullupLoading();
        //        }, 1000);

        //    });
        //} else {
        //    mui.ready(function () {
        //        mui('#pullrefresh').pullRefresh().pullupLoading();
        //    });
        //}

    </script>
    <script>
        $(function () {
            FastClick.attach(document.body);
        });
    </script>

    <script>
        $(document).on("open", ".weui-popup-modal", function () {
            console.log("open popup");
        }).on("close", ".weui-popup-modal", function () {
            console.log("close popup");
        });
    </script>

    <!--/底部-->
    <!-- #include file="bottom.html" -->
</body>

</html>