天天看点

JQueryMiniUI按照时间进行查询

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

所以要在加载页面的时候传递数据,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语句中时间两边是要加上双引号的。