BootStrap의 bootstrap-table 사용 요약
本篇文章就给大家介绍带来BootStrap之bootstrap-table使用总结 。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。如果大家想要学习和获取更多的bootstrap相关视频教程也可以访问：bootstrap教程！
一、下载：
https://github.com/wenzhixin/bootstrap-table
二、文档：
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
三、引用：
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script> <script src="bootstrap-table-zh-CN.js"></script>
注意：最后一个是一些提醒文字，如果有引用这个js则会以中文提示，如果没有则以英文提示。
四、基本用法：
html里：
<table id="table"></table>
js里：
$('#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'
}]
});这个data也可以换成url：
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});注意：url和data的区别是：url是异步请求远程数据；data是直接把数据赋值给他。在主表和子表都一样可以这样使用。
五、引入fonts：
一些图标需要用到bootstrap里面的文件，要从下载的bootstrap包里面拷贝过来放到对应的目录（看错误提醒）。
但是只放进去是访问不了的，因为他不是普通的文件，所以要设置。
进入iis管理器，找到“MIME类型”，双击进去，在右边菜单点击“添加”，分别添加以下类型：
.woff application/x-font-woff .woff2 application/x-font-woff
再刷新页面就可以加载fonts里面这些文件了。
六、定制组件
(function () {
function init(table,url,params,titles,hasCheckbox,toolbar) {
$(table).bootstrapTable({
url: url, //请求后台的URL（*）
method: 'post', //请求方式（*）
toolbar: toolbar, //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: queryParams, //传递参数（*），这里应该返回一个object，即形如{param1:val1,param2:val2}
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 20, //每页的记录行数（*）
pageList: [20, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: createCols(params,titles,hasCheckbox),
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
}
function createCols(params,titles,hasCheckbox) {
if(params.length!=titles.length)
return null;
var arr = [];
if(hasCheckbox)
{
var objc = {};
objc.checkbox = true;
arr.push(objc);
}
for(var i = 0;i<params.length;i++)
{
var obj = {};
obj.field = params[i];
obj.title = titles[i];
arr.push(obj);
}
return arr;
}
//可发送给服务端的参数：limit->pageSize,offset->pageNumber,search->searchText,sort->sortName(字段),order->sortOrder('asc'或'desc')
function queryParams(params) {
return { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset //页码
//name: $("#txt_name").val()//关键字查询
};
}
// 传'#table'
createBootstrapTable = function (table,url,params,titles,hasCheckbox,toolbar) {
init(table,url,params,titles,hasCheckbox,toolbar);
}
})();1、调用：
createBootstrapTable('#table','',['id','name','price'],['Item ID','Item Name!','Item Price!'],true,'#toolbar');2、模块：
注意，这些只要添加上一行代码就会自动显示的：
pagination 显示分页 search 搜索功能 showColumns 控制显示哪些列的按钮 showRefresh 刷新按钮 showToggle 详细视图和列表视图切换按钮
但是这个不会：
toolbar
这个toolbar会关联到我们填的一个元素，但是他并不会自动创建所有菜单，而是我们要创建好菜单，他只不过把这个菜单放到合适的位置，实现这些菜单的功能还需要我们自己去做。toolbar如下：
<p id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <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> </p>
3、sidePagination
这个是选择服务端或者客户端分页，客户端则填'client'，服务端则填'server'，他们的数据结构是不同的。
这是客户端分页的数据结构：
[
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
}
]这是服务端分页的数据结构：
{
"total": 200,
"rows": [
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
}
]
}这是因为客户端来分页的话，他直接根据数据总量进行判断要分成多少页，而服务端的话就需要返回一个total给他，因为服务端返回给的数据是一个片段，他没办法根据这个片段来计算多少页。
注意：这里可以看到，服务端分页和客户端分页数据结构的层次是不同的。他接受哪种数据结构，取决于是否加这个参数：
sidePagination:'server'
特别是做子表的时候，因为觉得没有做分页的必要，就没了这句话，结果就是数据过去了死活不显示，排查很久才发现是这个问题。
4、参数上传
我们知道，当我们对table设置一个url的时候，他不仅是请求这个url，他还会带一些参数上来，他到底带来了什么参数？
我们来一个最简单的测试一下：
$('#table').bootstrapTable({
striped: true,
pagination:true,
sidePagination:'server',
url:'/xx/yy',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
});
这里我们简单的初始化了一个bootstrap-table，数据来源我们指定了url，有个参数叫method，默认是'get'，也可以设为'post'，如果实际上线最好设为'post'，但是这里我们就用默认的好了，可以直接在浏览器的控制台看到他请求的参数。
我们可以看到带了一些参数上来
(1)order=asc表示排序是升序排序，这个我们可以在参数里面设置：sortOrder: "asc/desc"(两种选一种)
(2)offset=0表示从数据从哪个row开始，简单的说从第几行数据开始
(3)limit=10表示选取多少个数据，也就是一页有多少条数据
2,3跟参数pageNumber和pageSize是紧密关联的。
pageSize对应的就是limit，因此改变pageSize就改变了limit；
pageNumber结合pageSize可以算出offset。
比如pageNumber=1,pageSize=30，那么offset=0，limit=30；
比如pageNumber=2,pageSize=30，那么offset=30，limit=30。
他不传第几页上来，而是传从第几行开始，选取多少行，这样一个数据。
注意：pageNumber从1开始而非从0开始，但是offset是从0开始的。
如果我尝试设置pageNumber:0,pageSize:30我们会发现offset=-30,limit=30，这是不对的。
5、参数的查看、修改
那么我们可以直接查看这些参数以及修改吗？答案是可以的。
有个原始参数就是用来配置这个：
queryParams:testQParams
创建函数：
function testQParams(params) {
alert('params.limit='+params.limit+' params.offset='+params.offset);//我们可以这样查看这些要上传的参数
}我们当然可以修改或者添加参数：
function testQParams(params) {
return {
limit:params.limit,
offset:params.offset,
order:params.order,
abc:123,
def:456
}
}有几点要注意：
1、我们当然可以修改limit、offset这些参数，但是不建议在这里改，我们可以用上面这种方式还给他赋值；
2、虽然没有改动他，我们也不要丢了，如果在这里没写参数就丢了，传递的参数会以这里的为准；
3、我们可以增加新的参数。
七、显示图片
字段通常是一个地址，那么我们要显示图片应该使用formatter：
{
field: 'thumb_img',
title: '主图',
align: 'center',
formatter:function (value,row,index) {
return '<img src='+value+' width=50 class="img-rounded" >';
}
}可以直接定义宽度，图片会自动进行缩放。
八、行内编辑功能
<1>bootstrap-editable
需要一个bootstrap插件叫做bootstrap-editable，现在改名叫做x-editable了，可以适用不同的框架。
地址：https://github.com/vitalets/x-editable
下载下来之后，找到dist/bootstrap3-editable里面的3个文件夹css,js,img都拷贝到我们的网站目录下。
<2>bootstrap-table-editable
这是一个bootstrap-table的插件（插件的插件），这个插件呢就在我们下载的bootstrap-table包里，路径是dist/extensions/editable
把他拷到我们的对应目录下即可
<3>引入
<link href="<?php echo '/static/bootstrap/extensions/editable/css/bootstrap-editable.css'; ?>" rel="stylesheet"> <script src="<?php echo '/static/bootstrap/extensions/editable/js/bootstrap-editable.js'; ?>"></script> <script src="<?php echo '/static/bootstrap-table/extensions/editable/bootstrap-table-editable.js'; ?>"></script>
注意他们跟jquery、bootstrap、bootstrap-table的依赖关系，所以要放在他们的后面。
<4>使用1：
在列定义里面加上editable:true，比如：
field:'addr', title:'地址', editable:true,
就会变成可编辑状态了
<5>使用2：
编辑完成我们要添加一个回调
在bootstrapTable顶级的属性定义里面，添加一个回调函数：
onEditableSave:function (field,row,oldValue,$el) {
//alert('保存addr='+row.addr+' id='+row.itemid);
}
这里我们可以看到当编辑完保存的时候就会调用到这个函数，在row里面有所有当前行的信息，那么我们可以通过把这个信息用ajax传递到服务器保存起来。
编辑功能完成。
<6>保存验证+ajax保存确认+取消保存
我们在实际开发当中，经常需要这样的功能：
(1)验证用户的输入是否正确；
(2)如果用户输入不正确，就不要在页面上显示了，直接显示保存不了；
(3)如果用户输入正确，通过ajax请求保存到后台；
(4)如果保存到后台失败，应该返回前端失败的消息，前端的内容回退到保存前的状态；
(5)如果保存成功，前端也做相应的显示样式调整及状态确定。
在上面“使用1”及“使用2”当中，当点击保存的时候，在save函数里验证不起作用，你再验证他也保存进去了。所以验证另有地方。
应该这样做：
(1)把editable:true改为：
validate:function (value) {
value = $.trim(value);
if (!value)
{
return '必须填入一个网址，不能放空！';
}
if (!checkUrl(value))
{
return '输入的不是一个合法的网址！';
}
}另外，在这个函数里，要取的row数据可以这样：
var data = $('#table').bootstrapTable('getData');
var index = $(this).parents('tr').data('index');
console.log(data[index]);这是因为这个$(this)可以指向这个当前单元格
这样输入就有验证功能，return一个字符串他会自动不保存进去，而显示这个字符串的提示。
注意，验证的保存规则：
如果return ''; 则会保存空字符串；
如果return 'xxx'; 则不会保存这个字符串，而是作为提示显示出来；
如果不return，则按照原value保存。
(2)把onEditableSave改为：
onEditableSave:function (field,row,oldValue,$el) {
// 测试证明oldValue取到的是undefined
$.post('xxx/yyy')
.done(function (result) {
//在这里解析result
if(保存成功)
{
// 页面提示保存成功
}else
{
// 页面提示保存失败
// buy_addr_bak这个字段是从服务端传过来与buy_addr等值的一个字段，就是为了在必要的时候恢复数据
$el.text(row.buy_addr_bak);
}
// 不管保存成功还是失败，已经不是编辑状态，把加粗去掉
$el.removeClass('editable-unsaved');
});
}另外，在这个函数里，如果要取到row数据可以这样（虽然这里没有必要，参数里已经有了）：
var data = $('#table').bootstrapTable('getData');
var index = $el.parent().parents('tr').data('index');//注意这里一个是parent,一个是parents
console.log(data[index]);九、自动换行
在给table加上样式：
style="word-break:break-all; word-wrap:break-all;"
十、父子表
功能：点击行首的加号，下拉展开一个子表
<1>在父表的属性里添加
detailView:true
<2>添加回调函数
onExpandRow:function (index,row,$detail) {
initSubTable(index,row,$detail);
}当点击行首的加号，将会触发这个回调函数，这个回调函数会再去调用执行函数。
<3>执行函数
function initSubTable(index,row,$detail) {
var parentid = row.MENU_ID;
var cur_table = $detail.html('<table></table>').find('table');//注意这个'table'不是一个id，他在任何情况下不需要改变
$(cur_table).bootstrapTable({
url:'',
method:'post',
queryParams:{strParentID:parentid},
ajaxOptions:{strParentID:parentid},
clickToSelect:true,
detailView:true,
uniqueId:"MENU_ID",
pageSize:10,
pageList:[10,25],
columns:[
{
filed:'from',
title:'from'
},
{
field:'url',
title:'url'
},
{
field:'to',
title:'to'
}
],
onExpandRow:function (index,row,$Subdetail) {
initSubTable(index,row,$Subdetail);
}
});
}注意，这里做了一个递归，即子表里面还可以展开孙表，我们也可以不需要，去掉就可以了。
十一、刷新功能
$('#table_search').bootstrapTable(
"refresh",
{
url:"/japp/autobuy/ajaxorder/search"
}
);总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
위 내용은 BootStrap의 bootstrap-table 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
부트 스트랩 검색 창을 얻는 방법
Apr 07, 2025 pm 03:33 PM
부트 스트랩을 사용하여 검색 표시 줄의 값을 얻는 방법 : 검색 표시 줄의 ID 또는 이름을 결정하십시오. JavaScript를 사용하여 DOM 요소를 얻으십시오. 요소의 값을 가져옵니다. 필요한 작업을 수행하십시오.
부트 스트랩의 수직 중심을 수행하는 방법
Apr 07, 2025 pm 03:21 PM
부트 스트랩을 사용하여 수직 센터링을 구현하여 : Flexbox Method : D-Flex, 정당화 컨텐츠 중심 및 정렬 중심 센터 클래스를 사용하여 Flexbox 컨테이너에 요소를 배치하십시오. Align-Items-Center 클래스 방법 : Flexbox를 지원하지 않는 브라우저의 경우 상위 요소의 높이가 정의 된 경우 Align-Items 중심 클래스를 사용하십시오.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
부트 스트랩에 분할 라인을 작성하는 방법
Apr 07, 2025 pm 03:12 PM
부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.
부트 스트랩을위한 프레임 워크를 설정하는 방법
Apr 07, 2025 pm 03:27 PM
부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
