当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JQueryMiniUI按照时间进行查询的实现方法

JQueryMiniUI按照时间进行查询的实现方法

2017年12月12日  | 移动技术网IT编程  | 我要评论

考核的事情已经变成了上一年了，当时要做一个图书管理系统，但是当时因为在按照时间进行搜索的时候，无法将前台的数据传递到后台，所以失去了一部分，现在重看，其实也不过尔尔，反而然我有一种只是当时枉然的意味。好了，那么如何将前台的时间数据传递到后台，其实如果是普通的传递倒也是无所谓的，因为有特殊的功能是在搜索的时候实现

所以要在加载页面的时候传递数据，jquery-mini ui如何实现：

其实我们要要做的事情是将数据显示到表格中，那么我们就要看一开始是如何实现的：

前台千篇一律如此：

<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">借阅次数</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>

上面是我们的表格显示的内容，mini-ui在页面进行加载的时候就会初始化表格所以说在div中我们有一个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在进行数据时间数据传递的时候，如果仅仅传递一个时间，那么时间的格式并不是我们想要的那么满意，而且在后台我们要进行各种各样的判断，现在我们传递时间戳会减少一些判断，并且时间的格式也可以很容易的进行转换。

以上这篇jqueryminiui按照时间进行查询的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网