master

分支 (1)

管理

管理

master

hzdjd
/
list.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导出列表</title>
		<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    	<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
		<link rel="stylesheet" type="text/css" href="css/list.css"/>
	</head>
	<body>
		<div id="header"></div>
		<div id="handler">
			<div class="content">
				<form action="#">
					<input type="text" readonly class="form_datetime form-control" id="startTime" placeholder="开始时间" value="" size="16">
					<input type="text" readonly class="form_datetime form-control" id="endTime" placeholder="结束时间" value="" size="16">
					<input type="text" class="form_datetime form-control" id="phone" placeholder="请输入手机号码" value="" size="16" maxlength="11">
					<a href="javascript:void(0);" class="search">搜索</a>
					<a href="javascript:void(0);" class="reset">清空</a>
					<a href="javascript:void(0);" class="export" target="_blank">导出</a>
				</form>
			</div>
		</div>

		<div id="list">
			<table>
				<thead>
					<tr>
						<th width="70"><input type="checkbox" id="SelectAll"/></th>
						<th width="70">序号</th>
						<th width="270">电话</th>
						<th width="370">签名</th>
						<th width="320">时间</th>
					</tr>
				</thead>
				<tbody>

				</tbody>
			</table>
		</div>
		<script type="text/html" id="listTpl">
			{{each data as value i}}
			<tr>
				<td><input type="checkbox" value="{{value.phone}}"/></td>
				<td>{{i + 1}}</td>
				<td>{{value.phone}}</td>
				<td>
					<span class="sign-box">
						<img src="{{value.img_name}}" alt="" />
					</span>
				</td>
				<td>{{value.ctime}}</td>
			</tr>
			{{/each}}
		</script>
		<script src="js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
		<script src="js/template.js"></script>
		<script>
			$(function(){
				$("#startTime").datetimepicker({
					format: 'yyyy-mm-dd hh:ii',
					language: 'zh-CN',
					autoclose: 1
				}).on("click",function(){
			        $("#startTime").datetimepicker("setEndDate",$("#endTime").val())
			    });

				$("#endTime").datetimepicker({
					format: 'yyyy-mm-dd hh:ii',
					language: 'zh-CN',
					autoclose: 1
				}).on("click",function(){
			        $("#endTime").datetimepicker("setStartDate",$("#startTime").val())
			    });

				function GetDateStr(AddDayCount) {
				    var dd = new Date();
				    dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
				    var y = dd.getFullYear();
				    var m = dd.getMonth()+1<10?'0'+(dd.getMonth()+1):dd.getMonth()+1;//获取当前月份的日期
				    var d = dd.getDate()<10?'0'+dd.getDate():dd.getDate();
				    return y+m+d;
				}
				var preDate = GetDateStr(-1);
				var nextDate = GetDateStr(0);

				var loadData = function(stime,etime,phone){
					var phone = phone?phone:"";
					$.ajax({
						type:"get",
						url:"./api.php?list=1",
						// url:"http://www.huihaicenter.com/api/dajiangdong/api.php?list=1",
						dataType: "json",
						data: {
							stime: stime,
							etime: etime,
							phone: phone
						},
						success: function(res){
							$("#list :checkbox").prop("checked", false);
							var html = template('listTpl', res);
							$("#list tbody").html(html);
						}
					});
				}

				loadData(preDate,nextDate);

				$(".search").click(function(){
					var stime = $.trim($("#startTime").val()).replace(/-/g, "");
					var etime = $.trim($("#endTime").val()).replace(/-/g, "");
					if(stime=="" && etime==""){
						alert('请选择查询时间');
					}
					var phone = $.trim($("#phone").val());
					if (!/^1[34578]\d{9}/.test(phone) && phone) {
						alert('请输入正确的手机号码');
						return;
					}
					loadData(stime,etime,phone);
				});

				$("#SelectAll").click(function(){
					if(this.checked){
			        	$("#list :checkbox").prop("checked", true);
				    }else{
						$("#list :checkbox").prop("checked", false);
				    }
				});

				$(document).on("click","tbody :checkbox",function(){
					allchk();
				});

				function allchk(){
					var chknum = $("tbody :checkbox").size();//选项总个数
					var chk = 0;
					$("tbody :checkbox").each(function () {
				        if($(this).prop("checked")==true){
							chk++;
						}
				    });
					if(chknum==chk){//全选
						$("#SelectAll").prop("checked",true);
					}else{//不全选
						$("#SelectAll").prop("checked",false);
					}
				}

				$(".export").click(function(){
					var valArr = new Array;
			        $("tbody :checkbox").each(function(i,item){
			        	if($(item).prop("checked")){
			        		valArr[i] = $(this).val();
			        	}
			        });
			        if(valArr.length==0){
			        	alert('请选择要导出的数据！');
			        	return;
			        }
					var vals = valArr.join(',');
					$(this).attr('href','./api.php?dl=1&ids='+vals);
				});

				$(".reset").click(function(){
					$("form")[0].reset();
				})
			});
		</script>
	</body>
</html>