使用 bootstraptable创建表格
一、初始化
1、HTML编写
- 引人
css和js
<link rel="stylesheet" href="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.css' %}">
<script src="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js' %}"></script>
- 定义表格,设置固定列宽和自动换行
<!--
table-layout: fixed; // 固定列宽，可在columns 设置列宽 width
word-break:break-all; word-wrap:break-all; //自动换行
-->
<table class="table table-hover" id="table-request"
style="table-layout: fixed;
word-break:break-all; word-wrap:break-all;">
</table>
2、使用js初始化列表
$('#table-request').bootstrapTable({
url:'/h/SelectRequest', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: 'queryParams', //传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
smartDisplay:false,
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{
field:'name',
title:'名称',
},{
field:'data',
title:'参数',
},
], //列设置
});
二、参数传递
//请求参数设置
function queryParams(params) {
return {
offset: params.offset, //从数据库第几条记录开始
limit: params.limit, //找多少条
name: $(...).val() //其他自定义参数，从页面获取
}
}
三、通过ajax请求数据
$('#table-request').bootstrapTable({
ajax:function(request){ //使用ajax请求
$.ajax({
type:"GET",
url:'/h/SelectRequest',
contentType:'application/json;charset=utf-8',
dataType:'json',
data:request.data,
success:function (res) {
request.success({
row:res.data,
});
$('#table-request').bootstrapTable('load', res.data);
},
error:function(error){
console.log(error);
}
})
},
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: 'queryParams', //传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
smartDisplay:false,
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{
checkbox: true,
width:60,
},
{
field:'name',
title:'名称',
width:120
},{
field:'url',
title:'请求链接',
},{
field:'method',
title:'请求方式',
width:60,
},{
field:'headers',
title:'请求头',
class:'W120',
},{
field:'data',
title:'请求参数',
},{
field:'action',
title:'操作',
width:100,
events:'operateEvents',
formatter:'operateFormatter', //自定义表格内容，字符串内是方法名称
}
], //列设置
});
- 通过
$.ajax({})获取请求数据 - 在通过load方法渲染数据到table中显示
$('#table-request').bootstrapTable('load', res.data);
-
后台返回的数据格式
四、行内多按钮操作
设置如下
columns: [
{
field:'action',
title:'操作',
width:100,
events:'operateEvents',
formatter:'operateFormatter', //自定义表格内容，字符串内是方法名称
}
]
// 单元格，自定义设置
// 操作按钮
function operateFormatter(value, row, index) {
return [
'<a class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ',
'<a class="remove ml10" href="javascript:void(0)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
].join('');
}
// 行内按钮，点击事件
window.operateEvents = {
'click .edit': function (e, value, row, index) {
alert("edit");
},
'click .remove': function (e, value, row, index) {
alert("remove");
},
};
五、行内样式
在初始化时新增参数：rowStyle
{
...,
rowStyle:'rowStyle',
...,
}
方法如下
//行内样式
function rowStyle(row, index) {
//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.method == "POST") {
strclass = 'success';//还有一个active
}
else if (row.method == "GET") {
strclass = 'info';
}
else {
return {};
}
return { classes: strclass }
}
六、自动列的展示样式
在每一列的配置中新增参数：formatter
{
field:'url',
title:'Url',
align: 'center',
formatter:'urlFormatter'
},
自定义展示内容：
function urlFormatter(value, row, index) {
var regex = /\{\{(.+?)\}\}/g;
var url = row.url || '';
if (url != ''){
var r_l = url.match(regex);
if (r_l != null) {
var size = r_l.length;
for (var i=0; i < size;i++) {
url = url.replace(r_l[i],'<a href="#" style="color: #d55f42">'+r_l[i]+'</a>');
}
}
}
return url;
}
效果如下：
七、手动搜索数据
$('#btn_search').on('click',function () {
var pageSize=$('#table-request').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
var pageNumber=$('#table-request').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
$.ajax({
type:"GET",
url:'/h/SelectRequest',
contentType:'application/json;charset=utf-8',
dataType:'json',
data:{
offset: pageNumber, //页码
limit: pageSize, //每页条数
itemId: itemId,
name: $('#text_search').val() || null,
},
success:function (res) {
var data = res.data;
if (data.total === 0) {
data.total = 1;
}
$('#table-request').bootstrapTable('load', data);
}
})
});
使用：
$('#table-request').bootstrapTable('load', data);
加载数据
八、行内编辑
引入css和js
<link rel="stylesheet" href="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/x-editable/bootstrap3-editable/css/bootstrap-editable.css' %}">
<script src="{% static 'plugins/bootstrap-table/dist/bootstrap-table.js' %}"></script>
<script src="{% static 'plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js' %}"></script>
<script src="{% static 'plugins/x-editable/bootstrap3-editable/js/bootstrap-editable.js' %}"></script>
<script src="{% static 'plugins/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.js' %}"></script>
初始化新增配置：onEditableSave
onEditableSave:function (field, row, oldValue, $el) {
$.ajax({
type: "POST",
url: "/h/EditRequest",
data: row,
dataType: 'JSON',
success: function (data) {
console.log(data)
},
error: function () {
alert('编辑失败');
},
complete: function () {
}
});
},
在列设置中新增：editable:true或自定义
{
field:'name',
title:'Name',
width:120,
editable:{
type: 'text',
title: '名称',
validate: function (v) {
if (!v) return '名称不能为空';
}
},
},
效果:
九、参考资料
JS组件系列——表格组件神器：bootstrap table
JS组件系列——BootstrapTable 行内编辑解决方案：x-editable
