bootstrap-table 사용 개요
bootstrap-table은 bootstrap-table을 기반으로 작성되었으며, 데이터 표시에 특별히 사용되는 테이블 플러그인입니다. Bootstrap은 Twitter에서 유래되었으며 현재 가장 널리 사용되는 프런트엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JAVASCRIPT를 기반으로 하며 단순성, 유연성, 신속한 프런트엔드 개발이라는 장점을 가지고 있습니다. 여기서는 부트스트랩과 부트스트래핑을 설명하지 않겠습니다. 이 기사에서는 내 프로젝트에서 부트스트랩 테이블 사용에 대한 이해와 이를 배우는 방법을 설명하는 데 중점을 둘 것입니다.
[관련 영상 추천 : 부트스트랩 튜토리얼]
먼저 jquery, bootstrap, bootstrap-table의 관계에 대해 설명하겠습니다. bootstrap 코드의 많은 부분이 jquery를 포함하고 있는데, 이는 bootstrap이 jquery에 의존한다는 것을 의미하며, 우리가 사용하려는 bootstrap-table은 bootstrap을 기반으로 생성되므로 bootstrap-table을 사용하기 전에 jquery와 bootstrap js를 참조해야 합니다. CSS 파일.
다음으로 bootstrap-table의 특징: jquery-ui, jqgrid 및 기타 테이블 표시 플러그인과 비교할 때 bootstrap-table은 일부 경량 데이터 표시에 충분하고 가볍습니다. 부모-자식 테이블 등에 대한 지원도 매우 좋습니다. 가장 중요한 것은 다른 부트스트랩 레이블과 원활하게 결합할 수 있다는 것입니다.
자, 소개는 여기까지입니다. 더 자세히 논의하기 전에 바로 코드와 렌더링을 살펴보겠습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>bootstrap-table</title> <meta http-equiv="Content-Type" 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> <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="./bootstrap-table/bootstrap-table-all.js"></script> <script type="text/javascript" src="./bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" > <link rel="stylesheet" type="text/css" href="./bootstrap-table/bootstrap-table.min.css" > </head> <script language="javascript"> </script> <body> <div class="col-md-offset-3 col-md-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 id="已添加教师账号">已添加教师账号</h3> </div> <div class="panel-body"> <div id="toolbar" class="btn-group"> <button id="btn_edit" type="button" class="btn btn-default" > <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post" data-query-params="queryParams" data-toolbar="#toolbar" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="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> </div> </div> </div> </body>
렌더링:
자, 위 코드의 의미를 단계별로 분석해 보겠습니다.
1. 먼저 해당 jquery bootstrap bootstrap-table 패키지를 다운로드해야 합니다. 온라인에 대한 튜토리얼이 있으므로 여기서는 다운로드 방법을 설명하지 않겠습니다.
위의
태그에 인용된 js 및 css 파일 이름을 보면 이러한 파일을 가져와야 함을 알 수 있습니다.부트스트랩 참고, 다운로드한 컴파일 압축 패키지에는 css,font,js 폴더 3개만 있습니다
1. jquery-2.2.1.js ---- 최신 jquery 파일
2. bootstrap.min.js --- 최신 bootstrap/js에 있는 bootstrap.min.js 압축 파일
3. bootstrap.min.css --- 최신 bootstrap/css 부트스트랩. min.css 압축 파일
4.bootstrap-table-all.js --- 최신 부트스트랩 테이블 아래의 js 파일
5.bootstrap-table-zh-CN.js -- --bootstrap-table/locale 아래의 최신 중국어 초기 파일
6.bootstrap-table.min.css ---bootstrap-table 아래의 최신 CSS 압축 파일
이 6가지 필수 항목 그 중 bootstrap-table-zh-CN.js는 중국어를 지원하는 js 파일입니다. 이 파일을 로드해야 테이블 표시 정보 중 일부가 중국어로 설정됩니다.
bootstrap-table-zh-CN.js를 제거한 후 표시 효과를 실험해 보겠습니다.
물론 표시 정보를 다른 언어로 설정할 수도 있습니다. bootstrap-table-zh-CN.js를 다른 언어의 js 파일로 바꾸면 됩니다. bootstrap-table 패키지에 지원이 있습니다.
이 파일의 소스 코드를 보면 이 파일이 무엇을 하는지 알 수 있습니다.
/**
* Bootstrap Table Chinese translation
* Author: Zhixin Wen<wenzhixin2010@gmail.com>
*/
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加载数据中，请稍候……';
},
formatRecordsPerPage: function (pageNumber) {
return '每页显示 ' + pageNumber + ' 条记录';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
},
formatSearch: function () {
return '搜索';
},
formatNoMatches: function () {
return '没有找到匹配的记录';
},
formatPaginationSwitch: function () {
return '隐藏/显示分页';
},
formatRefresh: function () {
return '刷新';
},
formatToggle: function () {
return '切换';
},
formatColumns: function () {
return '列';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})(jQuery); js 파일을 참조한 후 로딩 시 초기화 효과를 기원하는 것을 한눈에 알 수 있다. 일부 표시 콘텐츠를 해당 콘텐츠로 변환합니다.
2. 다음으로 해당 html 코드에 대해 이야기해보겠습니다. 사실 bootstrap-table 관련 html 코드에는 이 부분만 있습니다.
<table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post" data-query-params="queryParams" data-toolbar="#toolbar" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="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을 직접 입력할 수 있습니다. >
물론 예시에서도 몇 가지 예를 볼 수 있습니다.
举几个例子在我们上面的代码中有这么几个 参数他们的意思是：
data-url：索取数据的url。
data-method：请求方式。
data-height：设置表格的高
data-query-params="queryParams" ：设置
data-toolbar="#toolbar" ：设置装按钮的容器为id为toolbar的。
data-pagination="true" ：设置是否显示页码数
data-search="true" ：设置search框
data-show-refresh="true" ：设置刷新按钮
data-show-toggle="true" ：设置数据显示格式
这下你该明白怎么样查看了吧！
注意其中下面段代码是核心，
<thead> <tr> <th data-field="name">用户账号</th> <th data-field="pwd">用户密码</th> <th data-field="t_name">教师姓名</th> </tr> </thead>
对于不想用html静态生成，也可以使用js动态生成。给一个代码demo，要设置相关的参数只需要采用 上面讲的 Name:options 即可。例如在html中设置数据请求的目的文件 data-url："./data.php" 在js中只要声明 url:"./data.php"
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});3.这样说，其他代码是干什么的，其中一部分代码是使用了 boostrap中的面板来设置格式，即将table镶嵌在面板中。 所去掉面板的代码后bootstrap-table的效果是这样的
仅仅是没有了面板而已。
4.传送数据的格式，bootstrap-table 接收的数据形式默认为json格式的
在上面可以看到请求的后台地址为:"./data.php",我们来看一下他的内容
<?php
$results[0]=array("name"=>"aoze","pwd"=>"20132588","t_name"=>"张三");
$results[1]=array("name"=>"lisi","pwd"=>"1234","t_name"=>"李四");
$results[2]=array("name"=>"wangwu","pwd"=>"44455","t_name"=>"王五");
echo json_encode($results);
?>很简单吧！ 当然这只是我手写的一些测试数据，在项目中当然是从数据库中查找出来的。
5.当然仅仅使显示数据有时候还是不够的，我们需要和table进行一些互动，比如进行一些删除，修改的功能，这时就需要用到bootstrap-table 的一些事件了。在上面的案例中我在table的中镶嵌了两个button组件如图
这个镶嵌的实现办法是在在table的属性中 添加了这么一行 data-toolbar="#toolbar"
其意思就是在工具栏的一行添加 id为toolbar的标签。
在本人做到这个项目中，要通过这两个按钮对table中点击选中的行进行相应的操作。
编写相应的事件，首先为table绑定一个选中的触发事件，然后通过getSelectRow函数获得点击选中行的数据。
$('#teacher_table').on('click-row.bs.table', function (e, row, element)
{
$('.success').removeClass('success');//去除之前选中的行的，选中样式
$(element).addClass('success');//添加当前选中的 success样式用于区别
}); function getSelectedRow()
{
var index = $('#teacher_table').find('tr.success').data('index');//获得选中的行
return $('#teacher_table').bootstrapTable('getData')[index];//返回选中行所有数据
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多Bootstrap Table使用方法详解相关文章请关注PHP中文网！
Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AMPython은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.
Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AMPython과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.
C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AMC/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.
JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.
브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.
Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.
Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.
JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AMJavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
WebStorm Mac 버전
유용한 JavaScript 개발 도구
