Composant de rendu des compétences javascript table_javascript

Pour le composant de rendu du tableau, veuillez cliquer sur http://lovewebgames.com/jsmodule/table.html pour la démo, et pour le code source git, veuillez cliquer sur https:// github.com/tianxiangbing/table

Comme le montre l'image ci-dessus, les fonctions incluent essentiellement les opérations de pagination, de recherche, de suppression et AJAX rencontrées dans les formulaires couramment utilisés. Puisqu'il est rendu à l'aide de GUIDON, le style peut être facilement contrôlé et il est plus facile d'ajouter de nouvelles fonctions.

Exemple d'appel

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>

Modèle

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

Propriétés et méthodes
constructeur:fonction (table, temp, page, param, recherche, rappel, filterCon)

Constructeur, table fait référence au conteneur qui stocke la table, qui peut être un div vide ou un tbody dans la table
; Temp fait référence au modèle de la table, voici l'objet jquery du nœud script
la page doit être un conteneur pour placer des contrôles de pagination
param paramètre d'initialisation type json
search Nœud du bouton de recherche. Il doit y avoir un nœud avec un formulaire de classe dans votre niveau ancêtre. Vous utiliserez [query](https://github.com/tianxiangbing/query) pour formater les paramètres à l'intérieur. opération de données
rappel rappel après chargement
filtre filtre filterCon

init:fonction(paramètres)
init est la méthode de démarrage. Les paramètres actuels contiennent uniquement {type:'get'}, le type de requête ajax

.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.