Memaparkan komponen kemahiran javascript table_javascript

Untuk komponen pemaparan jadual, sila klik http://lovewebgames.com/jsmodule/table.html untuk demo dan untuk kod sumber git, sila klik https:// github.com/tianxiangbing/table

Seperti yang ditunjukkan dalam gambar di atas, fungsi pada asasnya termasuk operasi paging, carian, pemadaman dan AJAX yang ditemui dalam bentuk yang biasa digunakan. Memandangkan ia dipaparkan menggunakan HANDLEBARS, gaya boleh dikawal dengan mudah dan lebih mudah untuk menambah fungsi baharu.

Contoh panggilan

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>

Templat

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

Sifat dan kaedah
constuctor:function(table, temp, page, param, search, callback, filterCon)

Pembina, jadual merujuk kepada bekas yang menyimpan jadual, yang boleh menjadi div kosong atau tbody dalam jadual; Temp merujuk kepada templat jadual, berikut ialah objek jquery nod skrip
halaman perlu menjadi bekas untuk meletakkan kawalan paging
jenis parameter permulaan param json
cari Nod butang carian mesti ada dengan bentuk kelas dalam peringkat nenek moyang anda operasi data
panggil balik panggilan balik selepas memuatkan filterCon penapis penapis
init:function(tetapan)
init ialah kaedah permulaan. Tetapan semasa hanya mengandungi {type:'get'}, jenis permintaan ajax

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.