[easyUI]日期条件查询&实现下载弹窗

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

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:'起始时间： '}
          ,'-',
          {text:'结束时间： '}
          ,'-',
          {
            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)进行判断获取(值)