需求: 根据用户选择的时间段,动态生成对应的年月。
代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>salesquantityper</title>
<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/demo/demo.css">
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<?php
$x1= isset($_POST['bt']) ? intval($_POST['bt']) : date("Y-m",strtotime("-3 month"));
$x2 = isset($_POST['et']) ? intval($_POST['et']) :date("Y-m",strtotime("-1 month"));
?>
<!-- 筛选列表 -->
<div style="background-color:EFF7FB">
<form id="form1" name="form1" style="margin-bottom:0px;" >
<table>
<tr>
<td><h4>Search:</h4></td>
<td>
<!-- 只有年和月的选择框 -->
<script>
document.write("<select id='bt'>");
var year =2008;
var month =1;
for(var i=0;i<90;i++){
if(month>12){
year++;
month=1;
var str_temp=month.toString();
month="0"+str_temp;
}else if(month<10){
var str_temp=month.toString();
month="0"+str_temp;
}
var datestr = year+"-"+month;
document.write("<option value="+datestr+"-01"+">"+datestr+"</option>");
month++;
}
document.write("</select>");
document.getElementById('bt').options[71].selected="selected";
</script></td><td>--to--</td>
<td><script>
document.write("<select id='et'>");
var year =2008;
var month =1;
var month1=1;
for(var i=0;i<90;i++){
if(month>12){
year++;
month=1;
var str_temp=month.toString();
month="0"+str_temp;
}else if(month<10){
var str_temp=month.toString();
month="0"+str_temp;
}
var datestr = year+"-"+month;
var split=datestr.split('-');
var value = (parseInt(split[1]) + 1) > 12 ? (parseInt(split[0]) + 1) + "-01" : (parseInt(split[1]) + 1) < 10 ? split[0] + "-0"+(parseInt(split[1]) + 1) : split[0] + "-"+(parseInt(split[1]) + 1);
document.write("<option value="+value+'-01'+">"+datestr+"</option>");
month++;
}
document.write("</select>");
document.getElementById('et').options[73].selected="selected";
</script></td>
<td>
<input type="button" id="but" value="go" οnclick="getD()" >
</td>
<td>
</td>
<TD></TD>
</tr>
</tr>
</table>
</form>
<br>
<div><p>Default show the data of last 3 months</p> </div>
</div>
<br>
<script >
function getD()
{
//先清空datagrid
$('#divDatagrid').html('<table id="salesquantityper"></table>');
//通过ajax请求生成的新的datagrid的列名
$.ajax({url:'get_salesquantityper.php?type=initrows',
type:"POST",
dataType:'json',
data:{bt:$("#bt").find("option:selected").text(),et:$("#et").find("option:selected").text()}
,success:function(data){
$('#salesquantityper').datagrid({
title:'Stores Sales Quantity Performance',
url: 'get_salesquantityper.php?bt1='+$('#bt').val()+"^^"+$('#et').val(),
width:'auto',
singleSelect: true,
rownumbers:true,
frozenColumns:[[{field:'Category',title:'<strong>Category</strong>'}]],
columns:data
});
},error:function(xhr){
alert('ajax error\n'+xhr.responseText);
}})
}
</script>
<!-- bestline表格 -->
<?php
//月份的英文转换
function getMonth($str_ym){
$ym_list=explode("-",$str_ym);
$yy=$ym_list[0];
$mm=$ym_list[1];
switch ($mm) {
case 01 :
return "January".$yy;
break;
case 02:
return "February".$yy;
break;
case 03 :
return "March".$yy;
break;
case 04 :
return "April".$yy;
break;
case 05:
return "May".$yy;
break;
case 06 :
return "June".$yy;
break;
case 07 :
return "July".$yy;
break;
case 08 :
return "Aguest".$yy;
break;
case 09 :
return "September".$yy;
break;
case 10:
return "October".$yy;
break;
case 11 :
return "November".$yy;
break;
case 12 :
return "December".$yy;
break;
}
}
//生成列
function xx1($str1){
$strt=substr($str1,0,4).'-';
return $strt.substr($str1,4,6);
}
function initRows1($bym,$eym){
//判断两个日期间相差多少月
$bym_list=explode("-",$bym);
$eym_list=explode("-",$eym);
if($bym_list[0]==$eym_list[0]){
$months=abs($bym_list[1]-$eym_list[1]);
}else{
$months=abs(($eym_list[0]-$bym_list[0]-1)*12)+abs($eym_list[1]+(12-$bym_list[1]));
}
$items=array();
for ($i=0;$i<=$months;$i++){
echo "<th colspan='3'><strong>".substr(getMonth(date("Y-m", strtotime("+$i months $bym"))),-4).substr(getMonth(date("Y-m", strtotime("+$i months $bym"))),0,-4)."</strong></th>";
}
}
function initRows2($bym,$eym){
//判断两个日期间相差多少月
$bym_list=explode("-",$bym);
$eym_list=explode("-",$eym);
if($bym_list[0]==$eym_list[0]){
$months=abs($bym_list[1]-$eym_list[1]);
}else{
$months=abs(($eym_list[0]-$bym_list[0]-1)*12)+abs($eym_list[1]+(12-$bym_list[1]));
}
$items=array();
for ($i=0;$i<=$months;$i++){
if($i%2==0){//让列间隔改变颜色
echo"<th data-options=field:'".getMonth(date("Y-m", strtotime("+$i months $bym-01")))."_Number_stores' width='80' align='right' styler='changeColor'><strong>Nubmer of<br> Stores </strong></th>";
echo"<th field='".getMonth(date("Y-m", strtotime("+$i months $bym-01")))."_Quantity_sold' width='100' align='right' styler='changeColor'><strong>Quantity Sold</strong></th>";
echo"<th field='".getMonth(date("Y-m", strtotime("+$i months $bym-01")))."_qn' align='right' styler='changeColor'><strong>Average <br>qty Sold per store</strong></th>";
}else{
echo"<th data-options=field:'".getMonth(date("Y-m", strtotime("+$i months $bym-01")))."_Number_stores' width='80' align='right'><strong>Nubmer of<br> Stores </strong></th>";
echo"<th field='".getMonth(date("Y-m", strtotime("+$i months $bym-01")))."_Quantity_sold' width='100' align='right'><strong>Quantity Sold</strong></th>";
echo"<th field='".getMonth(date("Y-m", strtotime("+$i months $bym-01")))."_qn' align='right'><strong>Average <br>qty Sold per store</strong></th>";
}
}
}
?>
<div id="divDatagrid">
<table id="salesquantityper" class="easyui-datagrid" style="height:220px" title="Stores Sales Quantity Performance"
data-options="url: 'get_salesquantityper.php', singleSelect: true, rownumbers:true "
>
<thead data-options="frozen:true">
<tr>
<th data-options="field:'Category'" ><strong>Category</strong></th>
</tr>
</thead>
<thead >
<tr>
<?php
//include "t.php";
initRows1($x1, $x2);//initRows1方法正确输出
?>
</tr>
<tr>
<?php
initRows2($x1, $x2);
?>
</tr>
</thead>
</table>
<table id="xx"></table>
</div>
<script>
function changeColor(index,row){
return 'background-color:#F3F3F3;';
}
</script>
</body>
</html>