How to implement JQueryMiniUI query based on time

This article mainly brings you an implementation method of JQueryMiniUI querying according to time. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The assessment matter has changed to last year. At that time, I wanted to build a library management system. However, when searching according to time, the front-end data could not be transferred to the back-end, so part of it was lost. , re-watching it now, it’s actually nothing more than mediocre, but I have a feeling that it was just in vain at the time. Okay, so how to transfer the time data from the foreground to the background? In fact, it doesn’t matter if it is a normal transfer, because there are special functions that are implemented during search

So to pass data when loading the page, how to implement jQuery-MINI UI:

In fact, what we have to do is to display the data into the table, then we It depends on how it is implemented at the beginning:

The front desk is the same:

<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>

The above is what our table shows, mini- ui will initialize the form when the page is loaded, so in p we have a url attribute, which tells us the source of the data

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

is loaded on the page When calling back the listAll method, we will also call this method when searching, but we will pass the data to the background.

So how should we write it in js? First, let’s see if we don’t need to pass data. Go to the background, how to load this form

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

So when we click search, do we need to transfer the data to the background:

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 
       
      }); 
    }

According to the above, we can judge the received data in the background listAll, and then display the corresponding data

There is a characteristic in this place that the transfer of time is not based on yyyy- In the format of MM-dd, the timestamp is used to transmit to the background, which means that a long type of data is passed. Let’s take a look at how the background receives it

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); 
 
  }

Then the timestamp is converted into a certain format in the background, and we can search in the database. In addition, double quotes are required on both sides of the time in the SQL statement.

In short, we useJQuerymini-uiWhen transferring data and time, if If we only pass a time, the format of the time is not as satisfactory as we want, and we have to make various judgments in the background. Now we pass the timestamp, which will reduce some judgments, and the format of the time can also be easily changed. Make the conversion.

Related recommendations:

thinkphp+Jquery MiniUI development management system

##thinkphp+Jquery MiniUI development management system, thinkphpjquery

jquery miniui tutorial table control merge cell application_jquery

The above is the detailed content of How to implement JQueryMiniUI query based on time. For more information, please follow other related articles on the PHP Chinese website!