首頁  >  文章  >  web前端  >  JQueryMiniUI依照時間進行查詢如何實現

JQueryMiniUI依照時間進行查詢如何實現

小云云
小云云原創
2018-01-10 10:31:221463瀏覽

本文主要為大家帶來一篇JQueryMiniUI依照時間查詢的實作方法。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。

考核的事情已經變成了上一年了,當時要做一個圖書管理系統,但是當時因為在按照時間進行搜索的時候,無法將前台的數據傳遞到後台,所以失去了一部分,現在重看,其實也不過爾爾,反而然我有一種只是當時枉然的意味。好了,那麼如何將前台的時間資料傳遞到後台,其實如果是普通的傳遞倒也是無所謂的,因為有特殊的功能是在搜尋的時候實現

所以要在載入頁面的時候傳遞數據,jQuery-MINI UI如何實現:

#其實我們要要做的事情是將數據顯示到表格中,那麼我們就要看一開始是如何實現的:

前台千篇一律如此:


<p id="datagrid1" class="mini-datagrid" style="width: 1000px; height: 280px;"  
    url="../index?method=listAll" idField="id" multiSelect="true" sizeList="[5,10,15]" pageSize="10" 
    > 
    <p property="columns"> 
      <p type="checkcolumn"></p> 
      <p type="indexcolumn">序号</p> 
      <p field="bookGuid" width="60" headerAlign="center" allowSort="true">图书编号</p> 
      <p field="bookName" width="60" headerAlign="center" allowSort="true">图书名称</p> 
      <p field="bookType" class="mini-combobox" width="60" renderer="onTypeRenderer">图书类别</p> 
      <p field="suitable" width="60" renderer="onSuitRenderer">适合人群</p> 
      <p field="buyDate" width="150" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" allowSort="true">入库日期</p> 
      <p field="count" width="60" style="color:red">借阅次数</p> 
      <p field="remark" width="60" style="color:red">备注</p> 
      <p name="action" width="120" headerAlign="center" align="center" renderer="onActionRenderer" cellStyle="padding:0;">操作</p> 
    </p> 
  </p>

上面是我們的表格顯示的內容,mini- ui在頁面進行載入的時候就會初始化表格所以說在p中我們有一個url屬性,也就是告訴我們資料的來源


url="../index?method=listAll"

在頁面進行載入的時候回呼叫listAll這個方法,我們進行搜尋的時候也會去呼叫這個方法,但是我們會傳遞資料到後台

那麼在js重我們該如何寫,首先我們來看看不需要傳遞數據到到後台,怎麼來載入這個表格


var grid = mini.get("datagrid1"); 
    grid.load();

那麼我們在點擊搜尋的時候,是不是要進行傳遞資料到後台:


##

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中對接收到的資料進行判斷,然後顯示對應的資料

這個地方有一個特點時間的傳遞並不是按照yyyy- MM-dd這種格式,而是利用時間戳傳遞到後台,也就是說傳遞的是一個long類型是數據,我們來看一看後台是怎樣進行接收的


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); 
  //要知道的是联合查询中需要得到的List也是显示出来的 
  List list=mdao.getList(sql); 
    //实现的是分页 
    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); 
 
  }

然後在後台將時間戳轉換成為一定的格式,我們就可以在資料庫中戶進行搜尋了,還有的是sql語句中時間兩邊是要加上雙引號的。


總之,我們利用#JQuerymini-ui在進行資料時間資料傳遞的時候,如果僅僅傳遞一個時間,那麼時間的格式並不是我們想要的那麼滿意,而且在後台我們要進行各種各樣的判斷,現在我們傳遞時間戳會減少一些判斷,並且時間的格式也可以很容易的進行轉換。

相關建議:


thinkphp+Jquery MiniUI 開發管理系統

##thinkphp+Jquery MiniUI 開發管理系統,thinkphpjquery

jquery miniui 教學表格控制項合併儲存格應用程式_jquery

以上是JQueryMiniUI依照時間進行查詢如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn