부트 스트랩 테이블 시리즈 :
JS 테이블 구성 요소 아티팩트 부트 스트랩 테이블 (기본 버전)에 대한 자세한 설명
부트 스트랩 테이블 테이블 구성 요소 JS 구성 요소 시리즈의 아티팩트 [END 챕터]
JS 구성 요소 시리즈의 부트 스트랩 테이블 구성 요소 아티팩트 [2. 부모 아들 테이블 및 행 컬럼 주문]
부트 스트랩 테이블은 테이블 형식으로 표시되는 가벼운 기능이 풍부한 데이터이며, 단일 선택, 체크 박스, 정렬, 페이징, 페이징, 디스플레이/숨기기 열, 고정 제목 스크롤 테이블, 응답 형 디자인, AJAX로드 JSON 데이터, 정렬 된 열, 카드보기 등을 클릭하십시오.
1. 효과 디스플레이
1. 테이블 행 스타일
예를 들어, 우리는 주문 페이지를 표시해야 할 필요가 있으며, 상태가 다른 순서는 그림과 같이 다른 색상을 보여줍니다.
2. 양식 라인 내에서 편집
첫 번째 기사에서, 공원의 친구는 블로거에게 업계에서 편집의 효과를 지원할 수 있는지 물었습니다. 대답은 그렇습니다. 효과를 살펴 보겠습니다.
편집하기 전에
셀 데이터를 클릭하십시오
편집 후 완료하십시오
3. 행과 테이블의 열의 조합
블로거는 특히 페이지 보고서를 작성할 때 순위 및 순위 합병에 매우 일반적이라고 생각합니다. 효과를 살펴 보겠습니다.
현재 페이지가 불완전하고 클릭하여 입력하고 살펴 봅니다. 어때? 효과는 꽤 좋습니다.
4. 테이블 데이터 내보내기
테이블 데이터 내보내기와 관련하여 부트 스트랩 테이블은 기본, 모두, 선택된 세 가지 모드의 내보내기를 지원합니다. 즉, 현재 페이지의 데이터 내보내기, 모든 데이터 내보내기 및 선택한 데이터 내보내기입니다. 또한 Common Excel, XML, JSON 및 기타 형식과 같은 다양한 유형의 파일을 내보내는 것을 지원합니다.
현재 페이지를 Excel로 내 보냅니다
테이블의 모든 데이터를 내보내십시오
선택한 행 데이터를 내보내십시오
다른 유형의 파일을 내보내는 것은 기본적으로 Excel과 동일하므로 효과가 표시되지 않습니다.
2. 테이블 행 스타일 코드 예제
테이블 행의 스타일 설정과 관련하여 다른 기능이 가장 기본적인 기능입니다. 왜 세 번째 기사에 넣습니까? 블로거는이 기능이 어디에서나 사용될 수 있다고 생각하기 때문입니다. 물론 효과는 어렵지 않습니다. jQuery를 사용하여 TR의 배경색을 달성 할 수 있지만 Blogger는 부트 스트랩 테이블이 행의 배경색을 설정하는 메커니즘을 제공하기 때문에 내장 된 API를 사용하지 않는 이유를 생각합니다. 구현 방법을 봅시다.
테이블을 초기화 할 때
// 테이블 $ ( '#tb_order'). 부트 스트랩 가능 ({url : '/tableStyle/getOrder', // request URL (*) 메소드 : 'get', // request method (*) // 도구 모음 : '#ToolBar', // 툴 버튼으로 줄무늬가있는 컨테이너가 사실인지, // 거짓이든, cache, cache, cache, cach, cache, cache, cache, cache, cache, cache, cache, cache, cache, cache. 이 속성을 설정해야합니다 (*) Pagination : True, // paging (*) sortable : false, // sortorder : "asc", "asc", // 정렬 메소드 QueryParams : otableInit.queryparams, // pagination 매개 변수 (*) 사이드 페이션 : "서버", // 초기 고객 pagination : // pagenumber : 1, pagenumber : 1, pagenumber : 1, pagenumber : 기본 첫 페이지에 : 10, // 페이지 당 레코드 행 수 : [*) PageList : [10, 25, 50, 100], // (*) 검색 : true, // 테이블 검색이 클라이언트 검색이며 서버에 들어 가지 않기 때문에 Strictearns : True, True, True, True, True, True, ShowceR의 의미를 느낍니다. // 새로 고침 버튼을 표시합니다. 최소 CountColumns : // 허용 된 최소 열 수 허용 ClickToSelect : True, // 클릭 선택 행 높이 : 500, Line Height를 활성화합니다. 높이 속성이 설정되지 않으면 테이블의 높이가 레코드 수에 따라 테이블의 높이를 자동으로 느낍니다. 세부보기 및 목록 CardView : // 세부 사항보기 세부 사항을 수행합니다. DestralView : // 부모-자식 테이블 rowStyle : function (row, index) {// 여기에는 5 [active ','success ','info ','warning ','var strclass = "; if scheduled"; '성공'; // active} else if (row.order_status = "deleted") {strclass = 'danger';} else {return {};} return {classe : strclass}}, 열 : [{checkbox : true}, {field : 'order}, title},'field : 'field. type '}, {field :'order_status ', 제목 :'주문 상태 '}, {field :'warnice ', title :'warnics '},]});실제로이 매개 변수에 중점을 둡니다.
RowStyle : function (row, index) {// 여기에는 5 [ 'active', 'success', 'info', 'info', 'warance', 'danger']; var strclass = ""; if (row.order_status = "scheduled") {strclass = 'success'; // active} else (row. '위험';} else {return {};} return {classe : strclass}},부트 스트랩 테이블은 5 인 테이블의 행 배경 색상, 즉 'Active', 'Success', 'Info', '경고', '위험'을 지원합니다. 해당 각각의 배경색에 대해 코드를 실행하여 볼 수 있습니다. 이 방법의 반환 값과 관련하여 블로거는 처음으로 사용했을 때 오랫동안 연구했습니다. 부트 스트랩 테이블의 규칙에 따라 : {classe : strclass}와 같은 JSON 형식 객체 유형을 반환해야합니다.
3. 양식 라인의 코드 편집 예
테이블 편집과 관련하여 부트 스트랩 테이블을 사용하여 확장 해야하는 여러 JS 파일.
1. 추가 JS 파일을 소개합니다
<link rel = "Stylesheet"href = "// rawgit.com/vitalets/x-editable/mas src = "// rawgit.com/vitalets/x-editable/mas
2. CSHTML 페이지에서 테이블을 정의 할 때는 두 가지 속성을 추가합니다.
<table id = "tb_departments"> <thead> <tr> <th data-field = "name"data-editable = "true"> 부서 이름 </th> <th data-field = "parentname"> 슈페리어 부서 </th> <th data-field = "level"data-editable = "true"> 부서 수준 </th> <th data-field = "desc" data-editable = "true"> descriptor </th> </tre> </tead> </table>
JS에서 초기화되면 쓰기 방법은 다음과 같습니다.
{필드 : "이름", 제목 : "이름", 편집 가능 : true}3. JS에서 테이블을 초기화 할 때 이벤트를 등록 및 저장
$ ( '#tb_departments'). bootstraptable ({url : '/editable/getDepartment', // request URL (*) 메소드 : 'get', // request method (*) 도구 모음 : '#ToolBar', // 도구 버튼으로 줄무늬가있는 컨테이너가 사실인지, // 라인을 표시하는지, 거짓이든, // cache, you, you, // 이 속성을 설정해야합니다 (*) Pagination : True, // paging (*) sortable : false, // sortorder : "asc", "asc", // 정렬 메소드 QueryParams : otableInit.queryparams, // 매개 변수 전달 (*) 부작용 : "Server", // 고객 Paging, Server Server Paging (*), 서버 pagingumber : // 기본 첫 페이지 페이지 : 10, // 페이지 당 레코드 수 (*) oneDitablesave : 함수 (필드, 행, OldValue, $ el) {$ .ajax ({type : "post", url : "/editable/edit", data : {strjson : json.stringify (row)}, success : data (dature, status) {stratus (status =) {stratus (status) " 성공 ");}}, error : function () {alert ("error ");}, 완료 : function () {}});}});핵심 요점은이 이벤트의 처리를 보는 것입니다.
oneDitablesave : 함수 (필드, 행, OldValue, $ el) {$ .ajax ({type : "post", url : "/editable/edit", data : {strjson : json.stringify (row)}, success : function (data, status == "success") {elert ( "elit"; {alert ( "error");}, 완료 : function () {}});}해당 방법은 저장된 논리를 직접 처리해야합니다. 4 개의 매개 변수 필드, 행, OldValue 및 $ el은 현재 열의 이름, 현재 행의 데이터 객체, 업데이트 전 값 및 편집 된 현재 셀의 jQuery 객체에 해당합니다.
4. 테이블 행 및 열 병합 코드의 예
테이블의 Row-Column 병합 기능은 다른 JS 파일을 참조 할 필요가 없습니다. CSHTML 페이지에서 테이블 colspan과 rowspan 만 사용하면 달성하면됩니다.
1. CSHTML 페이지
<table id = "tb_report"> <thead> <tr> <th colspan = "4"data-valign = "middle"data-align = "center"> q1 </th> <th colspan = "4"data-valign = "middle"data-align = "center"> Quarter </th> <th Quarter < "4"datavalign = "data-align" "data-align" "data-align Data-Field = "TotalCount"Rowspan = "2"Data-Valign = "Middle"Data-Align = "Center"> 연례 요약 </th> </tr> <tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <Tr> <TH Data-Align = "Center"> data-align = "center"> 3 월 </th> <th data-field = "firstquarter"data-align = "center"> firstquarter </th> <th data-field = "aprcount"data-align = "center"> 4 월 </th> <th data-field = "maycount"data-align = "center"> may </th data-field = "junnuncount" data-align = "center"> jun </th> <th data-field = "Septquarter"data-align = "center"> Quarter </th> <th data-field = "julcount"data-align = "center"> 7 월 </th> <th data-field = "agucount"data-align = "center"> August </th> <th data-field = "sepcount" data-align = "center"> sep </th> <th data-field = "3quarter"data-align = "center"> Quarter 3 </th> <th data-field = "옥시 칸트"data-align = "center"> 10 월 </th> <th data-field = "novcount"data-align = "center"> 11 월 </th> <th data-field = "deccount" data-align = "center"> 12 월 </th> <th data-field = "forthquarter"data-align = "center"> Quarter 4 </th> </tr> </thead> </table>
2. 특별한 JS 초기화는 없습니다
$ ( '##tb_report'). 부트 스트랩 가능 ({url : '/groupcolumns/getReport', // request URL (*) 메소드 : 'get', // request method (*) 도구 모음 : '#ToolBar', // 툴 버튼으로 줄무늬가있는 컨테이너가 사실인지, // 라인을 사용하는지 // cache를 사용하는지, // 이 속성을 설정하려면 (*) Pagination : // Pagination (*) Sortorder : "ASC", "ASC", // 정렬 메소드 QueryParams : otableInit.queryParams, // 매개 변수 전달 (*) 사이드 페이터 : "서버", // 페이징 방법 : 클라이언트 클라이언트 페이징, 서버 서버 페이징 (*) PageNumber : // 초기 페이지, DEFAULT의 첫 페이지 크기 페이지 당 레코드 라인 (*) Pagelist : [10, 25, 50, 100], // 페이지 당 행 수를 선택할 (*)});어때요, 쉬운가요? 물론 어떤 사람들은 CSHTML에서 직접 JS 초기화를 사용하지 않고 URL, Pagination 및 기타 정보를 설정하기 위해 테이블 속성을 사용 할 수 있다고 말했습니다. 실제로, API를 보면 초기화 된 각 속성이 테이블의 속성에 해당한다는 것을 알게됩니다. AS를 입력하십시오
양식에 처리 할 특별한 이벤트가 없으면 전혀 문제가 없습니다.
5. 표 데이터 내보내기 코드 예제
테이블 데이터의 내보내기 기능에는 일부 확장 된 JS 지원이 필요합니다.
1. 추가 JS 파일을 소개합니다
<script src = "~/content/bootstrap-table/extensions/export/bootstrap-table-export.js"> </script> <script src = "// rawgit.com/hhurz/tableexport.jquery.plugin/mas
2. JS가 초기화 될 때
$ ( '#tb_departments'). bootstraptable ({url : '/export/getDepartment', // request URL (*) 메소드 : 'get', // request method (*) 도구 모음 : '#ToolBar', // 도구 버튼으로 줄무늬가있는 컨테이너가 사실인지, // 라인을 표시하는지, 거짓이든, // cache, you, 당신은 cache, 당신은 cache, 당신은 cache, 당신은 cache, 당신. 이 속성을 설정해야합니다 (*) Pagination : True, // paging (*) sortable : false, // sortorder : "asc", "asc", // 정렬 메소드 QueryParams : otableInit.queryparams, // 매개 변수 전달 (*) 부작용 : "client", // pagination 메소드 : 서버 서버 Paging (*)의 초기화 (*). 기본 첫 페이지 페이지 : 10, // 페이지 당 레코드 라인 수 : [*) Pagelist : [10, 25, 50, 100], // 페이지 당 행 수를 선택할 수 있습니다 (*) ClickTosElect : true, showexport : true, // exportDatAtype : "기본", // 기본 ", 'all', 'selected' name '}, {field :'parentname ', title :'superior department '}, {field :'level ', 제목 :'부서 수준 '}, {field :'desc ','desc ':'description '},]});핵심 요점을 살펴 보겠습니다.이 두 가지 속성
showexport : true, // ExportDatatype를 표시할지 여부 : "기본", // 기본 ", 'all', 'selected'.ShowExport는 내보내는 버튼을 표시할지 여부를 의미합니다. 내보내기 모드가 현재 페이지인지 모든 데이터인지 선택한 데이터인지를 의미합니다.
6. 요약
위의 내용은 함수의 효과와이를 구현하는 간단한 코드입니다. 블로거는 해결해야 할 몇 가지 문제가 있음을 발견했습니다.
1. 인라인 편집 기능은 각 셀을 백그라운드에 제출하는 것입니다.이 셀은 데이터베이스의 빈번한 작동을 일으키고 부적절하다고 느낍니다. 각 줄을 백그라운드에 제출하는 더 좋은 방법이 있는지 모르겠습니다.
2. 내보내기 기능은 매우 유용하지만 불행히도 IE 브라우저에서 지원하지 않습니다. 블로거는 공식 웹 사이트에서 예제를 시도했으며 IE가이를 내보낼 수없는 것 같습니다. 확인됩니다.
위는 편집기가 소개 한 JS 구성 요소 시리즈의 부트 스트랩 테이블 구성 요소 아티팩트 [End Chapter]의 관련 내용입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!