bootstrap-table表格详解实例

最新推荐文章于 2024-08-17 01:00:00 发布

xinzi11243094

最新推荐文章于 2024-08-17 01:00:00 发布

阅读量2.4k

点赞数

分类专栏： html

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.引入资源部分

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>


<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>

2.HTML部分


<div id="toolbar" class="btn-group">
<button id="btn-add" type="button" class="btn">
<span aria-hidden="true" class="icon icon-plus-sign"></span>新增
</button>
<button id="btn-del" type="button" class="btn">
<span aria-hidden="true" class="icon icon-remove-sign"></span>删除
</button>
</div>


<table id="data-table"></table>

3.JS部分

var $table = $('#data-table');
$(window).resize(function () {
//防止表头与表格不对齐
$table.bootstrapTable('resetView');
});
$(function () {
//使用严格模式
"use strict";
//表格初始化
tableInit();
$table.bootstrapTable('hideLoading');//隐藏加载
})
function tableInit() {
/**
* 初始化Table
*/
//先销毁表格
$table.bootstrapTable('destroy');
//再初始化表格
$table.bootstrapTable({
//请求地址,此处数据为本地加载
//url: "",
//请求方式
method: "POST",
//请求内容类型
contentType: "application/x-www-form-urlencoded",
//数据类型
dataType: "json",
//table高度：如果没有设置，表格自动根据记录条数觉得表格高度
height: '582',
//是否显示行间隔色
striped: true,
//是否启用排序
sortable: true,
//排序方式
sortOrder: "asc",
//是否使用缓存
cache: false,
//每行的唯一标识
uniqueId: "id",
//指定工具栏
toolbar: "#toolbar",
//显示刷新按钮
showRefresh: true,
//切换显示样式
showToggle: true,
//默认显示详细视图
cardView: false,
//是否显示搜索
search: true,
//是否显示分页
pagination: true,
//是否启用点击选中行
clickToSelect: false,
//最少要显示的列数
minimumCountColumns: 2,
//显示隐藏列
showColumns: true,
//cell没有值时显示
undefinedText: '-',
//分页方式：client客户端分页，server服务端分页
sidePagination: "server",
//每页的记录行数
pageSize: 20,
//初始化加载第1页，默认第1页
pageNumber: 1,
//可供选择的每页的行数
pageList: "[10, 20, 50, 80, 100]",
paginationFirstText: "首页",
paginationPreText: "上一页",
paginationNextText: "下一页",
paginationLastText: "末页",
//按钮样式
buttonsClass: 'btn',
//分页器class
iconSize: 'pager',
//查询条件
queryParams: queryParams,
//表头
columns: [{
field: 'state',//id
checkbox: true,//checkbox
align: 'center',//对其方式
valign: 'middle'//对其方式
}, {
title: '用户编号',
field: 'custNo',
align: 'center',
valign: 'middle',
}, {
title: '用户名',
field: 'custName',
align: 'center',
valign: 'middle'
}, {
title: '密码',
field: 'password',
align: 'center',
valign: 'middle'
}, {
title: '加盐',
field: 'salt',
align: 'center',
valign: 'middle'
}, {
title: '标志',
field: 'efftflage',
align: 'center',
valign: 'middle'
}, {
title: '创建时间',
field: 'createTime',
align: 'center',
valign: 'middle'
}, {
title: '修改时间',
field: 'modifyTime',
align: 'center',
valign: 'middle'
}, {
title: '操作',
field: 'operate',
align: 'center',
events: window.operateEvents,
formatter: genderOpt//如需操作行数据,直接添加formatter对应函数名参数分别为value, row, index
}],
onLoadSuccess: function (res) {//可不写
//加载成功时
console.log(res);
}, onLoadError: function (statusCode) {
return "加载失败了"
}, formatLoadingMessage: function () {
//正在加载
return "拼命加载中...";
}, formatNoMatches: function () {
//没有匹配的结果
return '无符合条件的记录';
}
})
}

//行数据转化demo
function genderDel(value, row, index) {
/**
* 替换delete数据为文字
* @param {string} value 选值
* @param {object} row 行数据
* @param {number} index 行索引
* @return {string} 返回状态或"-"
*/
if (value == null || value == undefined) {
return "-";
} else if (value == 1) {
return "已删除";
} else if (value == 0) {
return "正常";
}
}
//return还可以return字符串拼接
function genderOpt() {
/**
* 自定义列内容
*/
return [
'<a class="trbtn-edit" href="javascript:void(0)" title="编辑">',
'<i class="icon icon-pencil"></i>',
'</a> ',
'<a class="trbtn-remove" href="javascript:void(0)" title="删除">',
'<i class="icon icon-trash"></i>',
'</a>'
].join('');
}
//操作事件建议卸载内部,防止第一次点击操作不生效
window.operateEvents = {
/**
* 注册操作按钮事件
*/
'click .trbtn-edit': function (e, value, row, index) {
editData(row);
},
'click .trbtn-remove': function (e, value, row, index) {
delData(row.custNo);
}
};
function queryParams(params) {
/**
* 查询条件与分页数据
* @return {object} 返回参数对象
*/
//排序方式
params.order = "modify_time desc";
//第几页：指定跳转
params.nowPage = this.pageNumber;
//name
params.custName = $("#search-name").val();
//工具栏参数
console.log("查询条件");
console.log(params);
return params;
}

function refresh() {
/**
* 刷新表格数据
*/
$table.bootstrapTable('refresh');

//$table.bootstrapTable('refresh'.{url:""});//刷新时调用接口防止表格无限销毁重铸时出现英文

$("#btn-query").on("click", function () {
/** * 查询 */
refresh();
})
$("#btn-add").on("click", function () {
console.log("新增页面");
});
function editData(row) {//row为表格内一行的数据传值
console.log("修改页面")
}

function delData(strData) {
/**
* 删除单行or多行
* @param {string} strData 单行选中数据
* @param {object} strData 多行中行数组
*/
//多条数据转换
if (typeof strData == "object") {
strData = strData.join();
}
//确认操作
if(confirm('确定要删除用户编号为' + strData + '数据?') {
/**
* callback
* @param {boolean} result：true>= OK, false>= Cancel
*/
if (!result) {
console.log("Cancel");
return;
}
console.log("OK");
console.log("删除数据");
//组织数据-转换
var sendData = {param:strData};
console.log(sendData);
$.ajax({
url: 'user/deleteTest',
method: 'POST',
contentType: "application/x-www-form-urlencoded",
data: sendData,
//阻止深度序列化，向后台传送数组
traditional: true,
async : false,//这里同步，请按实际需求设置
//成功
success: function (msg) {
if (msg.success) {//操作成功
/**
* callback获取回调数据
* @param {object} msg 回调对象
* @param {object} msg.obj 单行选中数据
* @param {object} msg.objects 多行中行数组
*/
alert("删除成功");
console.log(msg);
//刷新表格
refresh();
} else {
alert(msg.message);//操作失败
}
},
//请求错误
error: function () {
alert("请求错误");
}
})
});
}
$("#btn-del").on("click", function () {
/**
* 多行删除
*/
var checkDatas = $table.bootstrapTable('getSelections');
console.log(checkDatas);
if (checkDatas.length < 1) {
alert("请先选择一条或多条数据");
} else {
var uNo = [];
for (var i = 0; i < checkDatas.length; i++) {
uNo.push(checkDatas[i].custNo);
}
console.log(uNo);
delData(uNo);
}
});

xinzi11243094

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录