> 웹 프론트엔드 > JS 튜토리얼 > javascript table_javascript 기술의 렌더링 구성 요소

javascript table_javascript 기술의 렌더링 구성 요소

WBOY
풀어 주다: 2016-05-16 15:51:39
원래의
1505명이 탐색했습니다.

테이블의 렌더링 구성 요소에 대한 데모는 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'}만 포함되어 있습니다

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿