[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)进行判断获取(值)