• layui table数据渲染页面+筛选医生+在筛选日期一条龙2


    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <title>预约管理</title>
            <link rel="stylesheet" href="css/layui.all.css" media="all" />
            <style>
                body {
                    margin: 10px;
                }
                
                .demo-carousel {
                    height: 200px;
                    line-height: 200px;
                    text-align: center;
                }
                
                .left {
                    float: left;
                }
                
                #bb {
                    margin-left: 15px;
                }
                
                .layui-table-cell {
                    text-align: center;
                }
            </style>
        </head>
    
        <body>
    
            <blockquote class="layui-elem-quote">
    
                <form class="layui-form">
                    <div class="layui-inline" style="float: right;">
                        <div class="left">
                            <input id="docname" class="layui-input" type="text" placeholder="搜索医生" onkeyup="this.value=this.value.replace(/s+/g,'')" />
                        </div>
                        <div class="left" style="padding:0;margin-left:10px;">
                            <div id="searchId" class="layui-btn"> 搜索</div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <!--<label class="left">选择时间</label>-->
                        <div class="left" style="margin-right: 15px;">
                            <input type="date" class="layui-input" id="time" name="dateShow" placeholder="选择时间">
                        </div>
                        <div class="left" style="padding:0;">
                            <!--<div id="btn"  class="layui-btn" > 搜索</div>-->
                        </div>
                    </div>
                </form>
            </blockquote>
    
            <!--<blockquote class="layui-elem-quote">
                    <form class="layui-form">
                    </form>
            </blockquote>  -->
    
            <table class="layui-table" lay-data="{height:510, id:'idTest'}" lay-filter="demo">
                <thead>
                    <tr>
                        <th lay-data="{field:'usrname', 110,fixed: true}">医生姓名</th>
                        <th lay-data="{field:'t09x00y09x50', 110}">09:00-09:50</th>
                        <th lay-data="{field:'t10x00y10x50', 110}">10:00-10:50</th>
                        <th lay-data="{field:'t11x00y11x50', 110}">11:00-11:50</th>
                        <th lay-data="{field:'t12x00y12x50', 110}">12:00-12:50</th>
                        <th lay-data="{field:'t13x00y13x50', 110}">13:00-13:50</th>
                        <th lay-data="{field:'t14x00y14x50', 110}">14:00-14:50</th>
                        <th lay-data="{field:'t15x00y15x50', 110}">15:00-15:50</th>
                        <th lay-data="{field:'t16x00y16x50', 110}">16:00-16:50</th>
                        <th lay-data="{field:'t17x00y17x50', 110}">17:00-17:50</th>
                        <th lay-data="{field:'t18x00y18x50', 110}">18:00-18:50</th>
                        <th lay-data="{field:'t19x00y19x50', 110}">19:00-19:50</th>
                        <th lay-data="{field:'t20x00y20x50', 110}">20:00-20:50</th>
                        <th lay-data="{field:'t21x00y21x50', 110}">21:00-21:50</th>
                        <th lay-data="{field:'t22x00y22x50', 110}">22:00-22:50</th>
                        <th lay-data="{field:'t23x00y23x50', 110}">23:00-23:50</th>
                    </tr>
                </thead>
            </table>
    
            <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
            <script src="js/layui.all.js"></script>
            <script>
                
                var table = layui.table; //表格
          var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                var day = date.getDate();
                var today = year + "-" + (month<10?"0"+month:month) + "-" +(day<10?"0"+day:day);
                $('#time').val(today);
                
                
                function GetAppointmentData(paramTime, paramDocName) {
            //var today = new Date(); 
           
           
                    var weburl = "https://tsch.fromfuture.cn:7712/GZ/v2/admin/queryYuYue?1=1";
                    
                    //var weburl = 'http://172.16.9.75:8080/v2/admin/queryYuYue?1=1';
    
                    if(paramTime != '') {
                        weburl += '&formdate=' + paramTime;
                    }
                    if(paramDocName != '') {
                        weburl += '&docname=' + paramDocName;
                    }
    
    
                    table.reload('idTest', {
                        page: true,
                        method: 'get',
                        url: weburl,
                        response: {
                            statusName: 'code' //数据状态的字段名称,默认:code
                                ,
                            statusCode: 000 //成功的状态码,默认:0
                                ,
                            msgName: 'message' //状态信息的字段名称,默认:msg
                                ,
                            countType: "data.totalRecord" //数据总数的字段名称,默认:count
                                ,
                            dataType: "data.parameterType" //数据列表的字段名称,默认:data 
                        },
                        request: {
                            pageName: 'pageNo' //页码的参数名称,默认:page
                            //,limitName: 'pageSize' //每页数据量的参数名,默认:limit
                        },
                        limits: [10, 30, 90, 150, 300],
                        limit: 10 //默认采用60
                    });
                };
    
                GetAppointmentData(today,'');//页面加载初始化数据,调用此方法,传空值
    
                $("#searchId").click(function() {
    
                    var time = $("#time").val();
                    var docname = $("#docname").val();
                    
                    GetAppointmentData(time.trim(), docname.trim());//调用方法
                    
                });
                
            </script>
        </body>
    
    </html>
    
    json
    {
    "code": "000",
    "data": {
    "parameterType": [
    {
    "t19x00y19x50": "未预约",
    "t09x00y09x50": "未预约",
    "t23x00y23x50": "未预约",
    "t20x00y20x50": "未预约",
    "orderid": "22222",
    "t14x00y14x50": "未预约",
    "t16x00y16x50": "未预约",
    "t15x00y15x50": "未预约",
    "t17x00y17x50": "未预约",
    "t10x00y10x50": "未预约",
    "usrname": "邓医师",
    "t21x00y21x50": "未预约",
    "t11x00y11x50": "未预约",
    "t13x00y13x50": "未预约",
    "t18x00y18x50": "未预约",
    "t12x00y12x50": "未预约",
    "t22x00y22x50": "未预约"
    },
    {
    "t10x00y10x50": "已预约",
    "usrname": "黄大夫",
    "t11x00y11x50": "已预约",
    "orderid": "22222",
    "t14x00y14x50": "已预约"
    },
    {
    "t19x00y19x50": "未预约",
    "t09x00y09x50": "未预约",
    "t23x00y23x50": "未预约",
    "t20x00y20x50": "未预约",
    "orderid": "22222",
    "t14x00y14x50": "未预约",
    "t16x00y16x50": "未预约",
    "t15x00y15x50": "未预约",
    "t17x00y17x50": "未预约",
    "t10x00y10x50": "未预约",
    "usrname": "鹿晗",
    "t21x00y21x50": "未预约",
    "t11x00y11x50": "已预约",
    "t13x00y13x50": "未预约",
    "t12x00y12x50": "未预约",
    "t18x00y18x50": "未预约",
    "t22x00y22x50": "未预约"
    },
    {
    "t19x00y19x50": "已预约",
    "t09x00y09x50": "已预约",
    "t23x00y23x50": "已预约",
    "t20x00y20x50": "已预约",
    "orderid": "22222",
    "t16x00y16x50": "已预约",
    "t15x00y15x50": "已预约",
    "t14x00y14x50": "已预约",
    "t17x00y17x50": "已预约",
    "t10x00y10x50": "已预约",
    "t21x00y21x50": "已预约",
    "usrname": "王大夫",
    "t11x00y11x50": "已预约",
    "t13x00y13x50": "已预约",
    "t12x00y12x50": "已预约",
    "t18x00y18x50": "已预约",
    "t22x00y22x50": "已预约"
    },
    {
    "t19x00y19x50": "已预约",
    "t09x00y09x50": "已预约",
    "t23x00y23x50": "已预约",
    "t20x00y20x50": "已预约",
    "orderid": "22222",
    "t15x00y15x50": "已预约",
    "t14x00y14x50": "已预约",
    "t16x00y16x50": "已预约",
    "t17x00y17x50": "已预约",
    "t10x00y10x50": "已预约",
    "usrname": "吴亦凡",
    "t21x00y21x50": "已预约",
    "t11x00y11x50": "已预约",
    "t13x00y13x50": "已预约",
    "t12x00y12x50": "已预约",
    "t18x00y18x50": "已预约",
    "t22x00y22x50": "已预约"
    }
    ],
    "pageNo": 1,
    "totalPage": 1,
    "pageSize": 15,
    "totalRecord": 5
    },
    "message": "成功"
    }
  • 相关阅读:
    AJAX 方式
    Qt程序设计——txt文本中获取字符串的问题
    二、Cocos2dx中Android部分的c++和java实现相互调用(高级篇)
    Android项目 手机安全卫士(代码最全,注释最详细)之五 splash动画效果
    Navigator 对象
    Dreamweaver中打开CodeSmith文件
    IOS开发:xcode5版本引发的问题
    Ubuntu 13.04 小米2S连接Eclipse真机调试
    Java面试题之四
    c++基础 之 面向对象特征一 : 继承
  • 原文地址:https://www.cnblogs.com/hjptopshow/p/7770709.html
Copyright © 2020-2023  润新知