JavaScriptのレンダリングコンポーネント table_javascriptスキル

テーブルのレンダリング コンポーネントについては、http://lovewebgames.com/jsmodule/table.html をクリックしてデモを、git ソース コードについては、https:// をクリックしてください。 github.com/tianxiangbing/table

上の図に示すように、この機能には基本的に、一般的に使用されるフォームで発生するページング、検索、削除、および AJAX 操作が含まれています。 HANDLEBARSを使用してレンダリングされるため、スタイルの制御が容易であり、新しい機能の追加も容易です。

呼び出し例

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>

テンプレート

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

プロパティとメソッド
コンストラクタ:関数(テーブル、一時、ページ、パラメータ、検索、コールバック、filterCon)

コンストラクター、テーブルはテーブルを格納するコンテナーを指し、テーブル内の空の div または tbody にすることができます。 Temp はテーブルのテンプレートを指します。ここではスクリプト ノード
の jquery オブジェクトを示します。 ページは、ページング コントロールを配置するためのコンテナである必要があります
param 初期化パラメータ型 json
search 検索ボタン ノード。祖先レベルにクラス フォームを持つノードが必要です。[query](
https://github.com/tianxiangbing/query) を使用して、クエリ内のパラメーターをフォーマットします。データ操作 callback ロード後のコールバック
filterCon フィルター filter

init:関数(設定)

init は起動メソッドです。現在の設定には、ajax リクエストのタイプである {type:'get'} のみが含まれています
。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。