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
검색 버튼 노드. 조상 수준에 클래스 형식의 노드가 있어야 합니다. 쿼리 내부의 매개변수 형식을 지정하려면 [쿼리](https://github.com/tianxiangbing/query)를 사용하세요. 데이터 연산
로딩 후 콜백 콜백
filterCon 필터필터

초기화:기능(설정)
init는 시작 방법입니다. 현재 설정에는 ajax 요청 유형인 {type:'get'}만 포함되어 있습니다

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.