JQueryMiniUI按照時間進行查詢的實現(xiàn)方法
考核的事情已經(jīng)變成了上一年了,當時要做一個圖書管理系統(tǒng),但是當時因為在按照時間進行搜索的時候,無法將前臺的數(shù)據(jù)傳遞到后臺,所以失去了一部分,現(xiàn)在重看,其實也不過爾爾,反而然我有一種只是當時枉然的意味。好了,那么如何將前臺的時間數(shù)據(jù)傳遞到后臺,其實如果是普通的傳遞倒也是無所謂的,因為有特殊的功能是在搜索的時候?qū)崿F(xiàn)
所以要在加載頁面的時候傳遞數(shù)據(jù),jQuery-MINI UI如何實現(xiàn):
其實我們要要做的事情是將數(shù)據(jù)顯示到表格中,那么我們就要看一開始是如何實現(xiàn)的:
前臺千篇一律如此:
<div id="datagrid1" class="mini-datagrid" style="width: 1000px; height: 280px;"
url="../index?method=listAll" idField="id" multiSelect="true" sizeList="[5,10,15]" pageSize="10"
>
<div property="columns">
<div type="checkcolumn"></div>
<div type="indexcolumn">序號</div>
<div field="bookGuid" width="60" headerAlign="center" allowSort="true">圖書編號</div>
<div field="bookName" width="60" headerAlign="center" allowSort="true">圖書名稱</div>
<div field="bookType" class="mini-combobox" width="60" renderer="onTypeRenderer">圖書類別</div>
<div field="suitable" width="60" renderer="onSuitRenderer">適合人群</div>
<div field="buyDate" width="150" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" allowSort="true">入庫日期</div>
<div field="count" width="60" style="color:red">借閱次數(shù)</div>
<div field="remark" width="60" style="color:red">備注</div>
<div name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">操作</div>
</div>
</div>
上面是我們的表格顯示的內(nèi)容,mini-ui在頁面進行加載的時候就會初始化表格所以說在div中我們有一個url屬性,也就是告訴我們數(shù)據(jù)的來源
url="../index?method=listAll"
在頁面進行加載的時候回調(diào)用listAll這個方法,我們進行搜索的時候也會去調(diào)用這個方法,但是我們會傳遞數(shù)據(jù)到后臺
那么在js重我們該如何編寫,首先我們來看看不需要傳遞數(shù)據(jù)到到后臺,怎樣來加載這個表格
var grid = mini.get("datagrid1");
grid.load();
那么我們在點擊搜索的時候,是不是要進行傳遞數(shù)據(jù)到后臺:
function search() {
var type1 = mini.get("type1").getValue();
var date1=mini.get("date1").getValue();
var timestamp = Date.parse(date1);
grid.load({
type1:type1,
timestmp:timestamp
});
}
按照上面我們就可以在后臺的listAll中對接收到的數(shù)據(jù)進行判斷,然后顯示對應(yīng)的數(shù)據(jù)
這個地方有一個特點時間的傳遞并不是按照yyyy-MM-dd這種格式,而是利用時間戳傳遞到后臺,也就是說傳遞的是一個long類型是數(shù)據(jù),我們來看一看后臺是怎樣進行接收的
public void listAll(HttpServletRequest request, HttpServletResponse response) throws Exception{
String type=request.getParameter("type1");
String lstr=request.getParameter("timestmp");
long time=0;
if(lstr!=null && isNumeric(lstr)){
time=Long.parseLong(lstr);
}
Date date1=new Date();
date1.setTime(time);
Date date2=new Date();
date2.setTime(time+24*60*60*1000);
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
String sql="select * from bookinfo";
if(type!= null && type.length()>0 && time==0)
{
sql="select * from bookinfo where booktype="+Integer.parseInt(type);
}
else if(time!=0 && type.length()==0)
{
sql ="select * from bookinfo where buydate between \""+ sdf.format(date1) +"\" and \""+sdf.format(date2)+"\"";
}
else if(time!=0 && type.length()>0)
{
sql ="select * from bookinfo where booktype="+Integer.parseInt(type)+" and buydate between \""+ sdf.format(date1) +"\" and \""+sdf.format(date2)+"\"";
}
else
{
sql ="select * from bookinfo";
}
System.out.println(sql);
//要知道的是聯(lián)合查詢中需要得到的List也是顯示出來的
List list=mdao.getList(sql);
//實現(xiàn)的是分頁
int pageSize=Integer.parseInt(request.getParameter("pageSize"));
int pageIndex=Integer.parseInt(request.getParameter("pageIndex"));
List sub_list=new ArrayList<>();
int start=pageIndex*pageSize;
for(int i=start;i<list.size() && i<start+pageSize;i++)
{
sub_list.add(list.get(i));
}
String json=JsonUtil.listToJson(sub_list, "yyyy-MM-dd hh:mm:ss");
System.out.println(json);
json=JsonData.modifyJson(json);
json=json.replaceFirst("null", list.size()+"");
response.getWriter().write(json);
}
然后在后臺將時間戳轉(zhuǎn)換成為一定的格式,我們就可以在數(shù)據(jù)庫中戶進行搜索了,還有的是sql語句中時間兩邊是要加上雙引號的。
總之,我們利用JQuerymini-ui在進行數(shù)據(jù)時間數(shù)據(jù)傳遞的時候,如果僅僅傳遞一個時間,那么時間的格式并不是我們想要的那么滿意,而且在后臺我們要進行各種各樣的判斷,現(xiàn)在我們傳遞時間戳會減少一些判斷,并且時間的格式也可以很容易的進行轉(zhuǎn)換。
以上這篇JQueryMiniUI按照時間進行查詢的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jquery實現(xiàn)商品sku多屬性選擇功能(商品詳情頁)
這篇文章主要介紹了jquery實現(xiàn)商品sku多屬性選擇功能(商品詳情頁),文中簡單給大家介紹了sku的概念,需要的朋友可以參考下2019-12-12
jQuery插件FusionCharts實現(xiàn)的MSBar3D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的MSBar3D圖效果,結(jié)合完整實例形式分析了jQuery使用FusionCharts載入xml數(shù)據(jù)繪制MSBar3D圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
用JQuery調(diào)用Session的實現(xiàn)代碼
用JQuery調(diào)用Session的實現(xiàn)代碼,需要的朋友可以參考下。2010-10-10
基于jQuery的遍歷同id元素 并響應(yīng)事件的代碼
寫網(wǎng)頁的時候,腳本循環(huán)的時候有很多時候都會循環(huán)出來同id的網(wǎng)頁元素,下面貼出來代碼,如何利用jQuery對這些元素進行逐一遍歷并可響應(yīng)消息2012-06-06

