Rendering-Komponente von Javascript table_javascript skills

Für die Rendering-Komponente der Tabelle klicken Sie bitte auf http://lovewebgames.com/jsmodule/table.html für eine Demo und für den Git-Quellcode klicken Sie bitte auf https:// github.com/tianxiangbing/table

Wie im Bild oben gezeigt, umfassen die Funktionen im Wesentlichen Paging-, Such-, Lösch- und AJAX-Operationen, die in häufig verwendeten Formularen vorkommen. Da es mit HANDLEBARS gerendert wird, lässt sich der Stil einfacher steuern und es ist einfacher, neue Funktionen hinzuzufügen.

Anrufbeispiel

html

<div class="form">
  名称: <input type="text" name="gname"> <a href="#" id="search">search</a>
</div>
<div id="tab-list" ajaxurl="list.json">
  loading...
</div>
<div id="pager"></div>

Vorlage

<script type="text/x-handlebars-template" id="tpl-list">
  <table class="tab-list">
    <thead>
      <tr>
          <th class="first-cell">序号</th>
          <th>商品条码</th>
          <th>商品名称</th>
          <th>状态</th>
          <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {{#each data}}
      <tr>
          <td class="first-cell">{{@index}}</td>
          <td>{{goods_bn}}</td>
          <td>{{goods_name}}</td>
          <td>上架</td>
          <td><a class="js-ajax" js-ajax-param="id={{goods_id}}" href="action.json">下架</a> <a class="js-delete" href="action.json">删除</a></td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</script>

js

<script>
  var table = new Table($('#tab-list'), $('#tpl-list'), $('#pager'), {}, $('#search'));
  table.init({type:'post'});
</script>

Eigenschaften und Methoden
constuctor:function(table, temp, page, param, search, callback, filterCon)

Konstruktor, Tabelle bezieht sich auf den Container, der die Tabelle speichert. Dies kann ein leeres Div oder ein Tbody in der Tabelle sein Temp bezieht sich auf die Vorlage der Tabelle, hier ist das JQuery-Objekt des Skriptknotens
Seite muss ein Container zum Platzieren von Paging-Steuerelementen sein
param Initialisierungsparametertyp JSON
Suche Schaltflächenknoten. Es muss ein Knoten mit Klassenform in Ihrer Vorfahrenebene vorhanden sein. Sie verwenden [query](
https://github.com/tianxiangbing/query), um die darin enthaltenen Parameter zu formatieren Datenoperation Rückruf Rückruf nach dem Laden
filterCon filter filter

init:function(settings)

init ist die Startmethode. Die aktuellen Einstellungen enthalten nur {type:'get'}, den Typ der Ajax-Anfrage

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.