初始时页面的效果，其页面的数据都是写固定的：
其html代码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>泉师释疑</title> 7 <meta name="renderer" content="webkit"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 9 <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> 10 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 11 <link rel="stylesheet" href="./css/font.css"> 12 <link rel="stylesheet" href="./css/xadmin.css"> 13 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 14 <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script> 15 <script type="text/javascript" src="./js/xadmin.js"></script> 16 <!-- 让IE8/9支持媒体查询，从而兼容栅格 --> 17 <!--[if lt IE 9]> 18 <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> 19 <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> 20 <![endif]--> 21 </head> 22 23 <body class="layui-anim layui-anim-up"> 24 <div class="x-nav"> 25 <span class="layui-breadcrumb"> 26 <a href="">首页</a> 27 <a href="">演示</a> 28 <a> 29 <cite>导航元素</cite></a> 30 </span> 31 <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"> 32 <i class="layui-icon" style="line-height:30px">ဂ</i></a> 33 </div> 34 <div class="x-body"> 35 <div class="layui-row"> 36 <form class="layui-form layui-col-md12 x-so"> 37 <input class="layui-input" placeholder="开始日" name="start" id="start"> 38 <input class="layui-input" placeholder="截止日" name="end" id="end"> 39 <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"> 40 <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button> 41 </form> 42 </div> 43 <xblock> 44 <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button> 45 <button class="layui-btn" onclick="x_admin_show('添加用户','./member-add.html',600,400)"><i class="layui-icon"></i>添加</button> 46 <span class="x-right" style="line-height:40px">共有数据：88 条</span> 47 </xblock> 48 <table class="layui-table"> 49 <thead> 50 <tr> 51 <th> 52 <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon"></i></div> 53 </th> 54 <th>ID</th> 55 <th>用户名</th> 56 <th>性别</th> 57 <th>手机</th> 58 <th>邮箱</th> 59 <th>地址</th> 60 <th>加入时间</th> 61 <th>状态</th> 62 <th>操作</th></tr> 63 </thead> 64 <tbody> 65 <tr> 66 <td> 67 <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon"></i></div> 68 </td> 69 <td>1</td> 70 <td>小明</td> 71 <td>男</td> 72 <td>13000000000</td> 73 <td>admin@mail.com</td> 74 <td>北京市 海淀区</td> 75 <td>2017-01-01 11:11:42</td> 76 <td class="td-status"> 77 <span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span></td> 78 <td class="td-manage"> 79 <a onclick="member_stop(this,'10001')" href="javascript:;" title="启用"> 80 <i class="layui-icon"></i> 81 </a> 82 <a title="编辑" onclick="x_admin_show('编辑','member-edit.html',600,400)" href="javascript:;"> 83 <i class="layui-icon"></i> 84 </a> 85 <a onclick="x_admin_show('修改密码','member-password.html',600,400)" title="修改密码" href="javascript:;"> 86 <i class="layui-icon"></i> 87 </a> 88 <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;"> 89 <i class="layui-icon"></i> 90 </a> 91 </td> 92 </tr> 93 <tr> 94 <td> 95 <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon"></i></div> 96 </td> 97 <td>1</td> 98 <td>小明</td> 99 <td>男</td> 100 <td>13000000000</td> 101 <td>admin@mail.com</td> 102 <td>北京市 海淀区</td> 103 <td>2017-01-01 11:11:42</td> 104 <td class="td-status"> 105 <span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span></td> 106 <td class="td-manage"> 107 <a onclick="member_stop(this,'10001')" href="javascript:;" title="启用"> 108 <i class="layui-icon"></i> 109 </a> 110 <a title="编辑" onclick="x_admin_show('编辑','member-edit.html',600,400)" href="javascript:;"> 111 <i class="layui-icon"></i> 112 </a> 113 <a onclick="x_admin_show('修改密码','member-password.html',600,400)" title="修改密码" href="javascript:;"> 114 <i class="layui-icon"></i> 115 </a> 116 <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;"> 117 <i class="layui-icon"></i> 118 </a> 119 </td> 120 </tr> 121 </tbody> 122 </table> 123 <div class="page"> 124 <div> 125 <a class="prev" href=""><<</a> 126 <a class="num" href="">1</a> 127 <span class="current">2</span> 128 <a class="num" href="">3</a> 129 <a class="num" href="">489</a> 130 <a class="next" href="">>></a> 131 </div> 132 </div> 133 134 </div> 135 <script> 136 layui.use('laydate', function(){ 137 var laydate = layui.laydate; 138 139 //执行一个laydate实例 140 laydate.render({ 141 elem: '#start' //指定元素 142 }); 143 144 //执行一个laydate实例 145 laydate.render({ 146 elem: '#end' //指定元素 147 }); 148 }); 149 150 /*用户-停用*/ 151 function member_stop(obj,id){ 152 layer.confirm('确认要停用吗？',function(index){ 153 154 if($(obj).attr('title')=='启用'){ 155 156 //发异步把用户状态进行更改 157 $(obj).attr('title','停用') 158 $(obj).find('i').html(''); 159 160 $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用'); 161 layer.msg('已停用!',{icon: 5,time:1000}); 162 163 }else{ 164 $(obj).attr('title','启用') 165 $(obj).find('i').html(''); 166 167 $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用'); 168 layer.msg('已启用!',{icon: 5,time:1000}); 169 } 170 171 }); 172 } 173 174 /*用户-删除*/ 175 function member_del(obj,id){ 176 layer.confirm('确认要删除吗？',function(index){ 177 //发异步删除数据 178 $(obj).parents("tr").remove(); 179 layer.msg('已删除!',{icon:1,time:1000}); 180 }); 181 } 182 183 184 185 function delAll (argument) { 186 187 var data = tableCheck.getData(); 188 189 layer.confirm('确认要删除吗？'+data,function(index){ 190 //捉到所有被选中的，发异步进行删除 191 layer.msg('删除成功', {icon: 1}); 192 $(".layui-form-checked").not('.header').parents('tr').remove(); 193 }); 194 } 195 </script> 196 <script>var _hmt = _hmt || []; (function() { 197 var hm = document.createElement("script"); 198 hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190"; 199 var s = document.getElementsByTagName("script")[0]; 200 s.parentNode.insertBefore(hm, s); 201 })();</script> 202 </body> 203 204 </html>