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


Posted in jQuery onJune 07, 2017

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

所以要在加载页面的时候传递数据,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按照时间进行查询的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
详解jquery选择器的原理
Aug 01 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jquery实现抽奖功能
Oct 22 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jquery仿京东商品放大浏览页面
Jun 06 #jQuery
jquery实现图片放大点击切换
Jun 06 #jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
Jquery EasyUI $.Parser
Jun 02 #jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 #jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 #jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
You might like
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP实现简易计算器功能
2020/08/28 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
python处理csv数据的方法
2015/03/11 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
python字符串反转的四种方法详解
2019/12/02 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
酒店led欢迎词
2014/01/09 职场文书
会走路的树教学反思
2014/02/20 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
新学期决心书
2014/03/11 职场文书
供用电专业求职信
2014/07/07 职场文书
小学生暑假安全公约
2015/07/14 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python