完整的easyui datagrid 动态生成列

最新推荐文章于 2024-08-02 17:23:07 发布

飞舞的锄头

最新推荐文章于 2024-08-02 17:23:07 发布

阅读量2.3k

点赞数

分类专栏： php 文章标签： easyui datagrid 动态

本文链接：https://blog.csdn.net/bailin0007/article/details/21011803

版权

php 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

需求：根据用户选择的时间段，动态生成对应的年月。

代码如下

<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>