<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="com.wbitech.zhsg.Config"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<title>产品销售统计</title>
<link rel="stylesheet" href="mobile/css/base.css">
<link rel="stylesheet" href="mobile/css/style.css">
<script type="text/javascript" src="mobile/js/jquery-1.11.js"></script>
<script type="text/javascript" src="mobile/js/component.tab.js"></script>
<script type="text/javascript" src="mobile/js/component.dialog.js"></script>
<script type="text/javascript" src="mobile/js/fortest.js"></script>
<style type="text/css">
.address_box {
text-align: center;
}
body * {
max-width: 780px;
}
* {
margin: 0px;
padding: 0px;
border: none;
outline: none;
font-style: normal;
}
.ab_id {
width: 6%;
}
.ab_company_name {
width: 26%;
}
.ab_wine_title {
width: 40%;
}
.ab_delivery_num {
width: 9%;
}
.ab_product_banlance_total_money {
width: 9%;
}
.ab_product_total_money {
width: 10%;
}
.address_box.def:before {
content: "默认";
float: left;
line-height: 1.8rem;
height: 1.8rem;
margin-right: .5rem;
display: inline-block;
background-color: #46C9D8;
color: #fff;
border-radius: .4rem;
padding: 0 1rem;
margin-top: .6rem;
font-size: 1.1rem;
}
.tool_title {
line-height: 5rem;
height: 5rem;
background-color: #fff;
padding-left: 2rem;
border-bottom: solid 1px #f2f2f2;
}
.tt_label {
color: #999;
font-size: 1.5rem;
}
.select_informationa li.selected {
background-color: #f2f2f2;
}
.select_informationa li.selected .address_box_edit {
display: block;
}
.address_box_edit {
text-align: center;
background-color: #f2f2f2;
border-top: solid 1px #ddd;
margin-top: 1rem;
display: none;
}
.address_box_edit a {
line-height: 4rem;
display: inline-block;
width: 6rem;
}
.select_company {
width: 90%;
display: inline-block;
text-align: left;
height: 4rem;
}
.select_tools {
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
}
.element.style {
border-top: solid 1px #222;
border-left: solid 1px #222;
background: #fff;
}
.select_informationa {
background: #fff;
}
.time {
width: 100%;
display: inline-block;
margin-top: 1rem;
}
.time label {
display: inline-block;
width: 50%;
float: left;
height: 3rem;
line-height: 3rem;
}
table {
border-top: solid 1px #222;
border-left: solid 1px #222;
}
td {
border-bottom: solid 1px #222;
border-right: solid 1px #222;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- ↓↓↓主屏↓↓↓ -->
<div class="page_index">
<div class="select_tools">
<select class="select_company" id="select_company">
<!-- 获取(进酒宝以外)所有的公司 -->
<option value="" selecteds>全部供应商</option>
</select>
<!-- 选择默认时间为当天到七天前 -->
<!-- 使用css样式 需要在块级元素里声明calss .是class #是Id -->
<div class="time">
<label>起:<input type="date" class="select_start_time" />
</label> <label>止:<input type="date" class="select_end_time" />
</label>
</div>
</div>
<ul class="select_informationa" id="select_informationa">
</ul>
</div>
<!-- ↑↑↑主屏↑↑↑ -->
<!-- ↓↓↓第二屏↓↓↓ -->
<div class="page_2rd"></div>
<!-- ↑↑↑第二屏↑↑↑ -->
<!-- 会话屏 -->
<div class="page_dialog">
<div class="dialog_bg">
<div class="message_container"></div>
</div>
</div>
<!-- 会话屏 -->
</div>
</body>
<script type="text/javascript">
/*
var A: 声明一个没有值的属性,在后台接收时需要声明一个同样的属性来接收。
$(".(calss)").append(在原有输出的信息基础上加入其他信息)；append是追加
$(".(calss)").html(把原有输出的信息完全替换为当前输出的信息)，html是完全替换
使用ajax,data返回信息到event,*(data)需要和function的名字一样,要和*(event)一样.
data返回数据接受
使用信息返回的时候,名字一定要相同,不然接收不到信息
传回信息给action方法,
change事件:当值发生改变时,会发生change事件,
var声明的属性,赋值之后要使用的话,需要在function 方法名(中声明这这个属性,使用data返回信息)
*/
function compent(event) {
closeDialog();
var html = "";
$(event.records).each(function(i, e) {
html += "<option value= ‘"+e.id+"‘>"+ e.company_name+"</option>";
});
$(".select_company").append(html);
}
//获取信息
$.ajax({
url : "mobile/sen/compent",
type : ‘post‘,
dataType : ‘json‘,
data : {},
success : function(data) {
if (data.records != null) {
compent(data);
}
}
});
$(document).ready(function() {
//1. 设置2个日期,1个公司选择器的初始值
var today = new Date().Format("yyyy-MM-dd");
var dd = new Date();
dd.setDate(dd.getDate() - 7);
var _7day = dd.Format("yyyy-MM-dd");
$(".select_start_time").val(_7day);
$(".select_end_time").val(today);
var company_id = company_id;
//2. 根据初始化的条件,ajax获取数据并渲染列表
loadData(_7day, today, company_id);
//3. 给日期控件绑定点击事件
$(".select_start_time").change(function() {
var start_time = $(this).val();
var end_time = $(".select_end_time").val();
var company_id = $("#select_company_id").val();
loadData(start_time, end_time, company_id);
});
$(".select_end_time").change(function() {
var start_time = $(".select_start_time").val();
var end_time = $(this).val();
var company_id = $("#select_company_id").val();
loadData(start_time, end_time, company_id);
});
//4. 给公司选择器绑定选择事件
$("#select_company").change(function() {
var start_time = $(".select_start_time").val();
var end_time = $(".select_end_time").val();
var company_id = $(this).val();
loadData(start_time, end_time, company_id);
});
});
//通过方法:ajax获取列表数据
//参数:开始时间 结束时间 所选公司id
function loadData(start_time, end_time, company_id) {
$.ajax({
url : "mobile/sen/information",
type : ‘post‘,
dataType : ‘json‘,
data : {
"startDay" : start_time,
"endDay" : end_time,
"company_id" : company_id
},
success : function(data) {
if (data.records != null) {
//渲染列表
$(".select_informationa").empty();
initTable(data);
}
}
});
}
//表格信息
function initTable(event) {
closeDialog();
var html = "";
//给对应的信息加上标题
html += "<table class="+‘address_box‘+" cellspacing=‘0‘><tr>";
html += ‘<td class=\"ab_id\">序号</td>‘;
html += ‘<td class=\"ab_company_name\">公司</td>‘;
html += ‘<td class=\"ab_wine_title\">产品名(瓶/件)</td>‘;
html += ‘<td class=\"ab_delivery_num\">销售总量</td>‘;
html += ‘<td class=\"ab_product_banlance_total_money\">结算金额</td>‘;
html += ‘<td class=\"ab_product_total_money\">总金额</td>‘;
html += ‘</tr>‘;
$(event.records).each(
function(i, e) {
"<tr value=" + (i + 1) + ">";
html += "<td class=\"ab_id\">" + (i + 1) + "</td>";
html += "<td class=\"ab_company_name\">" + e.company_name+ "</td>";
html += "<td class=\"ab_wine_title\">" + e.wine_title + "("+ (e.spec) + "支装)" + "</td>";
html += "<td class=\"ab_delivery_num\">" + e.delivery_num+ "</td>";
html += "<td class=\"ab_product_banlance_total_money\">"+ e.product_banlance_total_money + "</td>";
html += "<td class=\"ab_product_total_money\">"+ e.product_total_money + "</td>";
html += "</tr>";
});
$(".select_informationa").append(html);
}
// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function(fmt) { //author: meizz
var o = {
"M+" : this.getMonth() + 1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth() + 3) / 3), //季度
"S" : this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
for ( var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
: (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</html>
原文地址：https://www.cnblogs.com/wumeng98/p/8111420.html