So implementieren Sie eine zeitbasierte JQueryMiniUI-Abfrage

Dieser Artikel stellt Ihnen hauptsächlich eine Implementierungsmethode für JQueryMiniUI-Abfragen nach Zeit vor. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Die Bewertungssache hat sich im Vergleich zum letzten Jahr geändert. Damals wollte ich ein Bibliotheksverwaltungssystem aufbauen. Bei der Suche nach Zeit konnten die Front-End-Daten jedoch nicht übertragen werden , also ist ein Teil davon verloren gegangen. Wenn ich es mir jetzt noch einmal ansehe, ist es eigentlich nur mittelmäßig, aber ich habe das Gefühl, dass es damals einfach umsonst war. Okay, wie überträgt man also die Zeitdaten vom Vordergrund in den Hintergrund? Dabei spielt es keine Rolle, ob es sich um eine normale Übertragung handelt, da es spezielle Funktionen gibt, die bei der Suche implementiert werden

Wie implementiert die jQuery-MINI-Benutzeroberfläche Daten beim Laden der Seite?

Tatsächlich wollen wir anzeigen die Daten in die Tabelle, dann wir Es kommt darauf an, wie es zu Beginn umgesetzt wird:

Die Rezeption ist die gleiche:

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

Das Obige zeigt unsere Tabelle. Mini-UI initialisiert die Tabelle, wenn die Seite geladen wird. Daher haben wir in p ein URL-Attribut, das uns die Quelle der Daten mitteilt

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

Beim Laden der Seite wird die listAll-Methode aufgerufen. Wir rufen diese Methode auch bei der Suche auf, übergeben die Daten jedoch an den Hintergrund.

Wie sollten wir also vorgehen? Schreiben Sie es in js? Schauen wir uns zunächst die Daten an. So laden Sie dieses Formular: Klicken Sie dann auf „Suchen“. Müssen wir Daten in den Hintergrund übertragen? Daten

Dieser Ort verfügt über eine Funktion. Die Zeit wird nicht im Format JJJJ-MM-TT übertragen, sondern mithilfe des Zeitstempels in den Hintergrund übertragen, was bedeutet, dass eine lange Art von Daten übertragen wird Schauen Sie sich an, wie der Hintergrund ihn empfängt

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

Dann wird der Zeitstempel im Hintergrund in ein bestimmtes Format konvertiert und wir können in der Datenbank suchen Auf beiden Seiten der Zeitanführungszeichen müssen doppelte Zeichen hinzugefügt werden.

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

Kurz gesagt

, wir verwenden

JQuerymini-ui

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

bei der Übertragung von Zeitdaten, wenn wir Nur eine Zeit vergehen, das Format der Zeit ist nicht so zufriedenstellend, wie wir es wollen, und wir müssen im Hintergrund verschiedene Urteile fällen. Jetzt übergeben wir den Zeitstempel, wodurch einige Urteile reduziert werden, und das Format der Zeit kann auch sein leicht geändert werden.

Verwandte Empfehlungen:

thinkphp+Jquery MiniUI-Entwicklungsmanagementsystemthinkphp+Jquery MiniUI-Entwicklungsmanagementsystem, thinkphpjquery

jquery miniui Tutorial Tabellensteuerung Zelle zusammenführen application_jquery

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine zeitbasierte JQueryMiniUI-Abfrage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!