부트 스트랩 테이블 사용 요약
부트 스트랩 테이블은 부트 스트랩 테이블을 기반으로 작성된 테이블 플러그인으로, 특별히 데이터를 표시하는 데 사용됩니다. 부트 스트랩은 트위터 출신이며 현재 가장 인기있는 프론트 엔드 프레임 워크입니다. Bootstrap은 HTML, CSS 및 JavaScript를 기반으로하며 간단하고 유연하며 빠른 프론트 엔드 개발의 장점이 있습니다. 나는 여기에 부트 스트랩과 같은 것을 설명하지 않을 것입니다. 이 기사는 프로젝트에서 부트 스트랩 테이블 사용에 대한 이해와 배우는 방법에 대한 이해에 중점을 둘 것입니다.
먼저 jQuery, Bootstrap 및 Bootstrap 테이블의 관계를 설명하겠습니다. 부트 스트랩 코드의 많은 부분에는 jQuery가 포함됩니다.
다음으로 부트 스트랩 테이블의 특성 : jQuery-UI, JQGRID 및 기타 테이블 디스플레이 플러그인을 사용하면 부트 스트랩 테이블이 평평하고 가볍습니다. 가벼운 데이터 디스플레이에는 충분하며 아버지 아들 테이블 등에 대한 지원도 매우 좋습니다. 가장 중요한 것은 다른 부트 스트랩 태그와 완벽하게 결합 할 수 있다는 것입니다.
좋아, 그게 소개의 전부입니다. 코드 및 렌더링을 직접 업로드 한 다음 추가 토론을하겠습니다.
<! docType html public "-// w3c // dtd xhtml 1.0 엄격한 // en" "http://www.w.w.w.rt/xhtml1/dtd/xhtml1-Strict.dtd"> <head> <tonde> bootstrap-table> <meta http-requiv = "meta http-requiv =" content = "text/html; charset = utf-8"/> <meta name = "description"content = ""/> <meta name = "keywords"content = ""/> <script type = "text/javaScript"src = "./ js/jquery-2.2.1.js"> <script> <text/javascript " src = "./ bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javaScript"src = "./ bootstrap-table/bootstrap-table-all.js"> </script> <script> <text/javascript " src = "./ bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <link rel = "Stylesheet"type = "text/css"href = "./ bootstrap/css/bootstrap.min.css"> 링크 rel = "Styleshet"type "text/css" href = "./ bootstrap-table/bootstrap-table.min.css"> </head> <script language = "javaScript"> </script> <body> <div> <div> <div> <h3> 추가 교사 계정 </h3> </div> <div> <div> <div> <div> <h3> aria-hidden = "true"> </span> modify </button id = "btn_delete"type = "button"> <span aria-hidden = "true"> </span> delete> delete> </div> <table id = "teacher_table"data-toggle = "table"data-url = "./ data.php"data.method ""post " data-query-params = "queryparams"data-toolbar = "#툴바"data-pagination = "true"data-search = "true"data-show-refresh = "true"data-show-toggle = "true"data-show colums = "true"data-page-size = "5"> 비밀번호 </th> <th data-field = "t_name"> 교사 이름 </th> </tr> </table> </div> </div> </div> </body>
생식 이미지 :
Ok 다음으로, 위의 코드의 의미를 단계적으로 분석 해 봅시다.
1. 우선, 해당 jQuery 부트 스트랩 부트 스트랩 테이블 패키지를 다운로드해야합니다. 온라인으로 자습서가 있으며 여기에서 다운로드하는 방법을 설명하지 않습니다.
위 <head> 태그의 JS 및 CSS 파일 이름에 대한 참조에서 이러한 파일을 소개해야합니다.
참고 부트 스트랩, 컴파일 된 압축 패키지에는 3 개의 폴더 만 있습니다.
1. JQuery-2.2.1.js --- 최신 jQuery 파일
2. bootstrap.min.js --- bootstrap/js의 최신 bootstrap.min.js 압축 파일
3. bootstrap.min.css --- bootstrap/css의 최신 bootstrap.min.css 압축 파일
4. Bootstrap-Table.js --- Bootstrap-Table의 최신 JS 파일
5. Bootstrap-Table-Zh-CN.JS --- Bootstrap-Table/Locale의 최신 중국 초기 파일
6. bootstrap-table.min.css --- 부트 스트랩-테이블 아래의 최신 CSS 압축 파일
이 6 개는 구성되어야하며, 그 중 Bootstrap-Table-Zh-CN.JS는 중국어를 지원하는 JS 파일입니다. 이 파일이로드 된 경우에만 일부 테이블 디스플레이 정보가 중국어로 설정됩니다.
부트 스트랩-테이블 -zh-cn.js를 제거한 후 디스플레이 효과를 실험 해 봅시다.
물론 디스플레이 정보를 다른 언어로 설정하고 Bootstrap-Table-Zh-CN.JS를 다른 언어의 JS 파일로 바꾸면됩니다. 부트 스트랩 테이블 패키지에는 지원이 있습니다.
이 파일의 소스 코드를 볼 수도 있습니다. 살펴보면이 파일이 무엇을하는지 알게 될 것입니다.
/** * 부트 스트랩 테이블 중국어 번역 * 저자 : Zhixin wen <[email protected]> * (function ($) { 'aing strict'; $ .fn.bootstraptable.locales [ 'zh-cn'] = {formatloadingmessage : fortmatloadingmessage : return 'return'retain the date, please, please reby, please retain : ^, formategreatspate (Pagenumber) {페이지 당 ' + pagenumber +'record ', formatshowsrows : {return'show ' + pagefrom +'to ' + pageto + pageto +' 일치하는 기록 '; formattoggle : fortmatcolumns : return '} {return'column};
JS 파일을 인용 한 후로드시 초기화 효과를기도한다는 것을 알 수 있습니다. 표시된 정보를 해당 중간 내용으로 변환합니다.
2. 다음으로, 관련 HTML 코드에 대해 이야기 해 봅시다. 실제로 이것은 부트 스트랩 테이블과 관련된 HTML 코드의 유일한 부분입니다.
<table id = "teacher_table"data-toggle = "table"data-url = "./ data.php"data-method = "post"data-query-params = "queryparams"data-toolbar = "#도구 바"data-pagination = "true" "true"data-show-refresh = "true"data-show-toggle = "true" "true" data-page-size = "5"> <thead> <tr> <th data-field = "name"> 사용자 계정 </th> <th data-field = "pwd"> 사용자 암호 </th> <th data-field = "t_name"> 교사 이름 </th> </tr> </thead> </table>
예, 테이블 태그가 하나만 있고 많은 매개 변수가 있으며 테이블의 형태는 이러한 매개 변수를 통해 구현됩니다. 어떤 스타일과 기능이 있는지 알아야합니다. 그것들을 나열함으로써, 그것은 확실히 양동이가 떨어질 것입니다. 사람들에게 낚시하는 방법을 가르치는 것보다 낚시하는 방법을 사람들에게 가르치는 것이 좋습니다. 이 카테고리를 어디에서 찾을 수 있는지 알려 드리겠습니다. 수업의 의미. Bootstrap-Table의 전문 웹 사이트로 이동하여 사용하는 링크를 찾을 수 있습니다. 링크를 열려면 클릭하십시오. 유효하지 않은 경우 http://bootstrap-table.wenzhixin.net.cn/documentation을 직접 입력 할 수 있습니다
물론 예에서 몇 가지 예를 볼 수 있습니다.
해당 매개 변수의 의미를 어떻게 확인합니까? 위의 그림이 보이면 오른쪽은 몇 가지 옵션이며 설정할 수있는 테이블 속성, 행 속성 및 바인딩 이벤트를 선택할 수 있습니다.
테이블 속성 테이블 옵션을 클릭하여 다음 그림을 표시하십시오. 먼저, 제목 이름이 JS에 사용되어 테이블을 만들고, 속성은 HTML에 사용되어 테이블을 만듭니다.
몇 가지 예를 들기 위해 위의 코드에는 몇 가지 매개 변수가 있습니다. 그들이 의미하는 바는 다음과 같습니다.
Data-url : 데이터 요청을위한 URL.
데이터 방법 : 요청 방법.
데이터 높이 : 테이블 높이를 설정하십시오
Data-Query-Params = "QueryParams": 설정
data-toolbar = "#툴바": 버튼이 id 인 컨테이너를 도구 모음입니다.
Data-Pagination = "True": 페이지 번호를 표시할지 여부를 설정합니다
Data-Search = "True": 검색 창을 설정합니다
DataShow-Refresh = "True": 새로 고침 버튼을 설정하십시오
Data-Show-Toggle = "True": 데이터 표시 형식을 설정합니다
이제 확인하는 방법을 이해해야합니다!
다음 코드는 핵심이며 <tr>는 연속의 그리드를 나타내고 데이터 필드 = "이름"은 그리드의 데이터 이름을 연속으로 나타냅니다. 배경에서 전송 된 데이터는 데이터 필드에 따라 구별되며 누가 전송되기 때문에 데이터 필드를 ID로 이해할 수 있습니다.
<tr> <th data-field = "name"> 사용자 계정 </th> <th data-field = "pwd"> 사용자 암호 </th> <th data-field = "t_name"> 교사 이름 </th> </tr> </thead>
HTML 정적 생성을 원하지 않는 사람들의 경우 JS를 사용하여 동적 생성을 생성 할 수도 있습니다. 코드 데모를 제공하려면 관련 매개 변수를 설정하려면 이름 : 위에서 언급 한 옵션 만 사용하면됩니다. 예를 들어, html에서 데이터 요청에 대해 대상 파일 데이터를 설정하십시오 : "./data.php"JS에서는 URL을 선언합니다 : "./data.php".
$ ( '#table'). 부트 스트랩 가능 ({열 : [{field : 'id', 제목 : '항목 id'}, 'item id'}, 'item id'}, {field : 'name', title : 'item name'}, {field : 'price', 'item price'}], data : [{id : 1, item 1 ','price : '$ 1'}, {id : 2, '$ 2', '$ 2', '$ 1'}. }]});3. 이런 식으로, 다른 코드는 무엇을 하는가, 코드의 일부는 부스트랩의 패널을 형식, 즉 패널에 테이블을 포함시킨다. 제거 된 패널 코드 후 부트 스트랩 테이블의 효과는 다음과 같습니다.
패널이 없다는 것입니다.
4. 데이터 전송 형식, 부트 스트랩 테이블이받은 데이터는 기본적으로 JSON 형식입니다.
요청 된 배경 주소는 "./data.php"라는 것을 위에서 볼 수 있습니다. 콘텐츠를 살펴 보겠습니다.
<? php $ results [0] = array ( "name"=> "aoze", "pwd"=> "20132588", "t_name"=> "Zhang San"); $ results [1] = array ( "name"=> "lisi", "pwd"=> "1234", "t_name"=> "li si"); $ results [2] = array ( "name"=> "wangwu", "pwd"=> "44455", "t_name"=> "Wang Wu"); echo json_encode ($ results);?>
매우 간단합니다! 물론 이것은 내가 손으로 작성한 테스트 데이터 일 뿐이며 물론 프로젝트의 데이터베이스에서 발견됩니다.
5. 물론 데이터 만 표시하는 것만으로는 충분하지 않습니다. 삭제 및 수정 기능과 같은 테이블과 상호 작용해야합니다. 현재 부트 스트랩 테이블 이벤트를 사용해야합니다. 위의 경우 그림과 같이 두 개의 버튼 구성 요소를 테이블에 포함 시켰습니다.
이 모자이크를 구현하는 방법은 테이블의 속성에 그러한 라인 data-toolbar = "#툴바"를 추가하는 것입니다.
툴바의 라인에 ID가있는 라벨을 도구 모음으로 추가하는 것을 의미합니다.
이 프로젝트를 구현할 때이 두 버튼을 사용하여 테이블의 선택한 행에서 해당 작업을 수행해야합니다.
해당 이벤트를 작성하고 먼저 선택한 트리거 이벤트를 테이블에 바인딩 한 다음 GetSelectrow 함수를 통해 선택한 행의 데이터를 얻습니다.
$ ( '##el 함수 getSelectedRow () {var index = $ ( '#el여전히 심도있게 공부하고 싶다면 여기를 클릭하여 3 가지 흥미로운 주제를 공부하고 첨부 할 수 있습니다.
부트 스트랩 학습 튜토리얼
부트 스트랩 실용 튜토리얼
부트 스트랩 테이블 사용 자습서
부트 스트랩 플러그인 사용 튜토리얼
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.