[easyUI]日期條件查詢&實現下載彈窗

<%  
    String path = request.getContextPath();  
    request.setAttribute("base", path);  
%>

<table  id="cardBuyList" title="膜卡購彩情況" ></table>

jQuery easyUI 技術支持鏈接: http://www.jeasyui.net/

$(function(){//頁面加載完畢
    $('#cardBuyList').datagrid({    
        url:'${base}/card/queryBuy',
        method:'get',
        singleSelect:false,
        collapsible:true,
        pagination:true,
        pageSize:30,
        pageList:[30],//可選每頁的個數
        columns:[[		
		{field:'ccid',title:'膜卡號',align:'center',width:150,
			formatter:function(val, row, index){  
			    if(row.card){  
			      return row.card.ccid;  
			    }  
			}
		},  
		{field:'buyUserName',title:'用戶名',align:'center',width:160,
			formatter:function(val, row, index){  
			    if(row.card){  
			      return row.card.buyUserName;  
			    }  
			}	
		},
		{field:'buyUserPhone',title:'用戶手機號',align:'center',width:160,
			formatter:function(val, row, index){  
			    if(row.card){  
			      return row.card.buyUserPhone;  
			    }  
			}	
		},  
		{field:'total',title:'購彩金額',align:'center',width:100},  
		{field:'date',title:'日期',hidden:true,align:'center',width:100},  
         ]]  
  }); 
  $('#cardBuyList').datagrid({ 
	  toolbar: [
          {text:'起始時間： <input type="text" id="start" name="start" class="easyui-datebox" style="height:18px;width:100px;line-height:18px" />'}
          ,'-',
          {text:'結束時間： <input type="text" id="end" name="end" class="easyui-datebox" style="height:18px;width:100px;line-height:18px" />'}
          ,'-',
          {
            text:'查詢',
            iconCls:'icon-search',
            handler:function(){
               	var grid = $('#cardBuyList');  
               	var curPageNum = grid.datagrid('getPager').data("pagination").options.pageNumber;  
               	var rows = grid.datagrid('getPager').data("pagination").options.pageSize;  
               	var start = $("#start").datebox("getValue");
               	var end = $("#end").datebox("getValue");
               	var params = {"startDate":start,"endDate":end,"page":curPageNum,"rows":rows};
               	
               	$.post("${base}/card/queryBuyByDate",params, function(data){
               		$("#cardBuyList").datagrid('loadData',data);//加載本地數據，舊的行將被移除
           	        }) 
           	}
           },'-',{
             text:'導出',
             iconCls:'icon-add',
             handler:function(){
            	//var tableDate = $('#cardBuyList').datagrid('getData');//返回加載完畢後的數據,.serialize()只能序列表單數據
            	//alert(tableDate);//[object Object]
               	var start = $("#start").datebox("getValue");
               	var end = $("#end").datebox("getValue");        	
               	window.location.href = "${base}/print/buy?startDate="+start+"&endDate="+end;
               	
               	/* 	ajax不能完成文件下載，只能完成請求提交併獲取返回信息，不能處理下載文件的response。
	               	var params = {"startDate":start,"endDate":end};
                 	$.get("/print/buy",params)
                	$.post("/print/buy",params, function(data){
               			if(data.status == 200){ 
        					$.messager.alert('提示','導出成功!','info');
        				}
           			}) */
	         }
             } 
         ]
    })
})

以上技術點:

         1. 在easyUI的datagrid控件上加入toobar(工具條),然後在toobar上加入查詢條件框

         2. 條件查詢的返回數據,不能通過刷新datagrid進行加載,需要.datagrid('loadData',data);//加載本地數據，舊的行將被移除

         3. 建議固定pageList屬性值

         4. easyUI的ajax異步請求不能實現下載彈窗,通過window.location.href 進行解決

         5. 若後端傳回數據是VO類(封裝了pojo),則需要formatter:function(val, row, index)進行判斷獲取(值)