jquery-dataGrid控件的使用

    要点：1.，后台传入jsp界面上的数据 有五项   其中一项用list封装

2，jsp界面规范写对  url能请求到

         Control层  ：  要点  1、字段的封装与传值。2、获取到的数据放在对应的

public Object getAllBuyLogInfo(HttpServletResponse response,
			HttpServletRequest request)
	{
		String pageNo=request.getParameter("page");
		String pageSize=request.getParameter("rows");
		String startTime=request.getParameter("start");
		String endTime=request.getParameter("end");
		String busCode=request.getParameter("busCode");
		System.out.println("请求到的参数"+pageNo+"..."+pageSize+"....."+startTime+"....."+endTime+"...."+busCode);
				
		int pageNo1=Integer.parseInt(pageNo);
		int pageSize1=Integer.parseInt(pageSize);
		pageNo1=(pageNo1-1)*pageSize1;
		System.out.println("获取到的第几行和每行显示多少条:"+pageNo+"和pageSize的大小："+pageSize);
		PageNoAndSizePo po=new PageNoAndSizePo();
		po.setPageNo(pageNo1);
		po.setPageSize(pageSize1);
		
		if(busCode!=null){
			int busCode1=Integer.parseInt(busCode);
			po.setBusCode(busCode1);
		}
		if(startTime!=null){
			startTime+=" 00:00:00";
			po.setStartTime(startTime);
		}
		if(endTime!=null){
			endTime +=" 23:59:59";
			po.setEndTime(endTime);
		}
		System.out.println(po.toString());
		
		
		List<RedBuyLogDetailPO> pos=new ArrayList<RedBuyLogDetailPO>();
			pos=redBuyInfoService.getDetailBuyLogInfo(po);
		//获取数据库总条数
		int redBuyLogCount=redBuyInfoService.getCountRedBuyLog(po);
		
		System.out.println("从后台获取的的");
		DataGridPo<RedBuyLogDetailPO> dataGridPo=new DataGridPo<RedBuyLogDetailPO>();
		dataGridPo.setLogInfoList(pos);
		dataGridPo.setTotal(redBuyLogCount);
		dataGridPo.setPageNo(pageNo1);
		dataGridPo.setPageSize(pageSize1);
		return dataGridPo;
		
	}

jsp：需要注意的1、page,rows字段是dataGrid默认字段，自己传值

      2、返回列表值放在data里面  注意 字段名跟返回的要一致

<script type="text/javascript">

   var initDataGridUrl='${path}/hb/getAllBuyLogInfo.do';
   var getDiffDay=function(start,end)
   {
	   var start=start.replace(/-/g,"/");
	   var dateStart =new Date(start);
	   var end =end.replace(/-/g,"/");
	   var dateEnd=new Date(end);
	   iDays=parseInt(Math.abs(end-start)/1000/60/60/24);
	   return iDays;
   }
   
   var getDateTitleArr=function(start,end)
   {
	   var arr=[];
	   /* var startArr=start.split('-');
	   var endArr=start.split('-');
	   var dateStart =new Date(startArr[1]+'-'+startArr[0]+'-'+startArr[2]);
	   var dateEnd=new Date(endArr[1]+'-'+endArr[0]+'-'+endArr[2]); */
	   var j=0;
	   for(var i=Date.parse(start);i<=Date.parse(end);i+=24*60*60*1000)
		   {
		      var date=new Date(i);
		      var month=date.getMonth()+1;
		      var timeFormat=date.getFullYear()+'/'+month+'/'+date.getDate();
		      arr[j]=timeFormat;
		      //alert(arr[j]);
		      j++;
		   }
	   return arr;   
   }
   
   
	   
				 $(document).ready(function()
				 {    
		    	     alert("可以构建datagrid信息");
	    	   			  // 构建datagrid信息
	    		     $('#dataGrid').datagrid({
						title:'详情',
						singleSelect:true,
						height:340,
						    url:initDataGridUrl, // 请求地址
						    collapsible:true, // 可折叠
							striped: true, // 行条纹化（即奇偶行使用不同背景色）
						    rownumbers:false, // 行号
						    pageSize:10,
						    pageList:[10,20,30,40],
						    nowrap:false,
						    pagination:true, // 分页
						    singleSelect:true, // 只允许选中一行
							loadFilter:function(data){
						     return {total:data.total, rows:data.logInfoList};
						    },
						   columns:[
						             [
						                {field:'nickName',title:'用户昵称',width:180,height:60,align:'center'},
						                {field:'status',title:'成功购买',width:130,height:60,align:'center'},
						                {field:'busCode',title:'业务套餐',width:130,height:60,align:'center'},
						                {field:'redStatus',title:'红包生成状态',width:130,height:60,align:'center'},
						                {field:'createTime',title:'购买时间',width:220,height:60,align:'center'},
						             ]
						     ],
 							});
 							
 							// 查询点击事件
 				  $('#query').click(function()
	    		 {
	    		    alert("点击生效");
	    	        var start =$('#startDay').val();
	    	        var end=$('#endDay').val();
	    	        var busCode=$('#busCode').val();
	    	        alert(busCode);
	    	        if(start=="")
	    	        {
	    	        	alert("请输入开始时间");
	    	        	return false;
	    	        }
	    	        if(end=="")
	    	        {
	    	        	alert("请输入结束时间");
	    	        	return false;
	    	        }
	    	        if(start==""&&end=="")
	    	        {
	    	        	alert("请输入时间查询条件");
	    	        	return false;
	    	        }
	    	        if(getDiffDay(start,end)>31)
	    	        	{
	    	        	   alert("时间间隔在31天内");
	    	        	   return false;
	    	        	}
	    	        	//$('#dataGrid').reload();
	    	        	
	    	        	$('#dataGrid').datagrid('load',{
                        start:start,end:end,busCode:busCode
                        });
	    	   //获取常规数据   $页面上的操作
<span style="white-space:pre">	</span>    <span style="white-space:pre">	</span>      /*   $.ajax(
<span style="white-space:pre">	</span>    <span style="white-space:pre">	</span>          {
<span style="white-space:pre">	</span>    <span style="white-space:pre">	</span>        <span style="white-space:pre">	</span>  type:'POST',
<span style="white-space:pre">	</span>    <span style="white-space:pre">	</span>        <span style="white-space:pre">	</span>  data:{start:start,end:end,busCode:busCode,page:page,rows:rows},
<span style="white-space:pre">	</span>    <span style="white-space:pre">	</span>        <span style="white-space:pre">	</span>  url:commonStaticUrl,
<span style="white-space:pre">	</span>    <span style="white-space:pre">	</span>          }<span style="white-space:pre">		</span>
<span style="white-space:pre">	</span>    <span style="white-space:pre">	</span>        );  */
	    	        return false;
	    	});
 		 });
	</script>

           <div title="套餐购买详情"  id="dataContainer">
<span style="white-space:pre">		</span> <span style="white-space:pre">	</span><table id="dataGrid" class="dataGrid">
    <span style="white-space:pre">		</span></table>  <span style="white-space:pre">	</span>

 <span style="white-space:pre">	</span></div>

<span style="white-space:pre">		</span>

整个一要点就完了。·