jquery-dataGridコントロールの使用


ポイント:1.バックグラウンドからjspインタフェースに転送されるデータは5つあります.そのうちの1つは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>

要点全体で終わりました.・