부트 스트랩 테이블은 테이블 형식으로 표시되는 가볍고 기능이 풍부한 데이터이며, 단일 선택, 체크 박스, 정렬, 페이징, 디스플레이/숨기기 열, 고정 제목 스크롤 테이블, 응답 디자인, Ajax로드 JSON 데이터, 정렬 된 열, 카드보기 등을 클릭하면서도 상위 테이블의 사용법과 함께 약간의 고급 사용을 소개합니다.
부트 스트랩 테이블 시리즈 :
JS 테이블 구성 요소 아티팩트 부트 스트랩 테이블 (기본 버전)에 대한 자세한 설명
부트 스트랩 테이블 테이블 구성 요소 JS 구성 요소 시리즈의 아티팩트 [END 챕터]
JS 구성 요소 시리즈의 부트 스트랩 테이블 구성 요소 아티팩트 [2. 부모 아들 테이블 및 행 컬럼 주문]
1. 효과 디스플레이
오늘은 다음 방법을 약간 변경하겠습니다. 먼저 구현 효과를 살펴본 다음 나중에 코드 구현 및 예방 조치를 소개하겠습니다. 어서 렌더링을 보내겠습니다.
1. 아버지와 아들 테이블 렌더링
2. 행 주문
주문하기 전에
선을 드래그하여 첫 번째 줄로 정렬하십시오.
3. 열 순서
주문하기 전에
열 제목 정렬을 드래그합니다
주문 후
2. 아버지 아들 테이블 코드에 대한 자세한 설명
이전 장에서는 부트 스트랩 테이블의 기본 사용법을 소개했습니다. 테이블을 초기화 할 때 속성 "세부 사항"이 있습니다. true로 설정하면 각 행 앞에서 "+"모양의 아이콘을 볼 수 있습니다. 이 아이콘을 클릭하면 하위 테이블을로드하는 이벤트가 트리거됩니다. 이것이 일반적인 원칙입니다. 코드를 살펴 보겠습니다. 실제로 매우 간단합니다.
1. 테이블 초기화 및 행사를 확장하려면 라인을 등록하십시오.
$ ( "#tb_powerSet"). bootStraptable ({url : '/api/menuapi/getparentMenu', 메소드 : 'get', detailview : true, // parent and child table // sidepagination : "server", pagesize : 10, peapelist : [10, 25], columns : [field : 'menj :'menj : 'menj :'menje ' 'menu_url', 'menu url'}, {field : 'parent_id', 제목 : '부모 메뉴'}, 'menu_level', 'men level'}, // 서브 테이블을로드하는 이벤트 : index, $ index (index)하위 테이블 로딩 이벤트 ONEXPANDROW의 해당 메소드 함수 (인덱스, 행, $ 세부 사항)의 세 가지 매개 변수를 살펴 보겠습니다.
색인 : 상위 테이블의 현재 행의 행 색상.
행 : 부모 테이블의 현재 행의 JSON 데이터 객체.
$ 세부 사항 : 현재 행 아래에 생성 된 새 행의 TD 객체.
생성 된 하위 테이블 테이블이 $ detail 객체에로드되기 때문에 세 번째 매개 변수는 특히 중요합니다. 부트 스트랩 테이블은 우리를 위해 $ detail 객체를 생성 한 다음 원하는 테이블로 채워야합니다.
2. ainit.initsubtable () 방법을 살펴 보겠습니다.
// 하위 테이블 초기화 (무선 루프) oinit.initSubtable = function (index, row, $ detail) {var parentid = row.menu_id; var cur_table = $ detail.html ( '<table> </table>'). 찾기 ( 'table'); $ (cur_table) .boottraptable : '/getchildmenu' 'get', queryparams : {stparentid : parentid}, ajaxoptions : {stparentid : parentid}, clicktoselect : true, detailview : true, true, // parent-child table : "menu_id", pagesize : 10, pupelist : [10, 25], column : [checkbox : true}) {field : 'menu_url', title : 'menu url'}, {field : 'parent_id', title : 'parent menu'}, 'parent menu'}, {field : 'menu_level', 'menu level', 'menu level'},], // 어린이 테이블 Onexpandrow가 없을 때까지 하위 테이블을 가져 오는 무선 루프 : index, $ subdetail) {oinit.init. $ subdetail);}});};이것으로부터 우리는 하위 테이블을 생성하는 원칙이 테이블 객체 cur_table을 작성한 다음이 객체의 테이블 초기화를 등록하는 것임을 알 수 있습니다. 아주 간단하지 않습니까 ~~
3. 라인 순서 코드에 대한 자세한 설명
라인 주문 코드가 더 간단합니다. 살펴 보겠습니다.
1. 두 개의 추가 참조가 필요합니다
<script src = "~/content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"> </script> <script src = "~/content/bootstrap-table/extensions/rewords/bootstrap-table-Reorder-Rows.js"> </script>
2. CSHTML 페이지에서 테이블을 정의 할 때는 두 가지 속성을 추가합니다.
<table id = "tb_order"data-use-row-attr-func = "true"data-reamertable-rows = "true"> </table>
그런 다음 JS 테이블을 초기화 할 때 수정할 필요가 없으며로드 된 테이블은 행 순서 기능을 실현할 수 있습니다.
4. 열 순서 코드에 대한 자세한 설명
라인 순서와 유사합니다. 열 순서는 다음과 같이 사용됩니다.
1. 몇 가지 추가 JS 및 CSS를 참조하십시오
<스크립트 src = "~/content/bootstrap-table/extensions/reourder-columns/bootstrap-table-Reorder-columns.js"> </script> <link rel = "stylesheet"href = "../ assets/examples.cs"> <링크 rel = "Stylesheet" href = "https://rawgit.com/akottr/dragtable/mas src = "https://rawgit.com/akottr/dragtable/mas src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
2. CSHTML 페이지에서 테이블을 정의 할 때 속성을 추가하십시오.
<table id = "tb_departments"data-readerable-columns = "true"> </table>
다른 곳에는 수정이 필요하지 않습니다. 로드 된 테이블은 열 순서를 실현할 수 있습니다. 쉬운가요?
5. 제어 필터링
원래이 기사는 끝날 예정이었고, 갑자기 이전 장에 검색 기능이 있다는 것을 기억했습니다. 서버 페이징을 사용할 때 검색 기능을 사용할 수없는 것 같습니다. 그래서 나는 이전에 CS에서 각 열을 필터링하는 것과 비슷한 기능을 가지고 있음을 기억했습니다. 블로거는 다시 호기심이 많았다. 부트 스트랩 테이블에는 이런 종류의 각 열을 테이블에 필터링하여 문서를 확인했습니다. 결과가 충족되고 실제로 무언가가 있습니다 ~~ 봅시다.
1. 렌더링 표시
2. 코드 예제
(1) 추가 JS를 소개합니다
<스크립트 src = "~/content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"> </script>
(2) 테이블 속성 및 헤더 속성을 정의합니다
<table id = "tb_roles"data-filter-control = "true"> <thead> <tr> <th data-field = "role_name"data-filter-control = "select"> 역할 이름 </th> <th data-field = "설명"data-filter-control = "input"> 역할 설명 </th> <th data-field = "roble_defaulturl" Data-Filter-Control = "Input"> 역할 기본 페이지 </th> </tr> </tead> </table>
테이블 헤더의 속성이 여기에서 정의되므로 JS를 초기화 할 때 열을 정의 할 필요가 없습니다.
(3) JS 초기화
$ ( '#tb_roles'). 부트 스트랩 가능 ({url : '/role/getrole', 메소드 : 'get', 도구 모음 : '#도구 바', 스트라이프 : true, cache : false, striped : true, pagination : true, queryparams : function (param) {return param;}, queryparamstapey SidePagination : "Server", Pagesize : 10, PageList : [10, 25, 50, 100], 검색 : True, ShowColumns : True, ShowRefresh : True, MinimumCountColumns : 2, ClickTosElect : True,});처음에 블로거는 이런 종류의 검색이 사용자 클라이언트를 페이징 할 수 있다고 생각했지만 디버깅 후에는 그렇지 않았습니다. 원래 검색 조건은 JSON을 통해 서버로 전달할 수 있습니다. 디버깅 과정을 살펴 보겠습니다
백그라운드에서 매개 변수를 받고이를 제외시킵니다
이런 식으로 쿼리 조건을 배경으로 잘 전달할 수 있습니다. 아주 좋고 강력합니다. 이렇게하면 테이블 검색 기능을 확장하는 데 어려움이 제거됩니다 ~~
6. 요약
위는 부트 스트랩 테이블의 일부 확장 응용 프로그램입니다. 불완전하지 않을 수 있으며 행 및 열 병합, 행 및 열 동결 등과 같이 도입되지 않은 일부 고급 사용법이 있습니다.
위의 내용은 부트 스트랩 테이블 테이블 구성 요소 아티팩트에 대한 관련 지식입니다 [2. 아버지와 아들 테이블과 행 및 열 순서] 편집자가 소개했습니다. 나는 그것이 모두에게 도움이되기를 바랍니다!