侧边栏壁纸
博主头像
三生石博主等级

梦想还是有的,就算做咸鱼,也要做最咸的。|

  • 累计撰写 31 篇文章
  • 累计创建 55 个标签
  • 累计收到 7 条评论

BootstrapTable使用总结

三生石
2021-03-04 / 1 评论 / 0 点赞 / 62 阅读 / 7,207 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

BootstrapTable总结


## bootstrap table 方法
//获取对象
var $table = $('#table');
//选中第二行数据
$table.bootstrapTable('check', 1);

方法列表

方法名称说明
refresh刷新表格,会重新发送服务端请求
getSelections获取选中行数据
checkAll全选、反选uncheckAll
refreshOptions刷新配置和refresh不一样,此选项只刷新配置而不会发送请求
insertRow插入行数据
updateRow更新行数据
remove删除行

分页设置

分页设置不能处理跨域请求

参数名称说明
order排序方式asc需要你服务器按顺序排序,desc倒序排序
offset起始行,比如你数据库有100条数据,offset等于10表示你服务器需要从第10条数据返回结果
limit每次读取多少条数据
search用户在输入框搜索的关键词
queryParams分页时你可以传入你的自定义参数,例如你想每次往服务器请求时带action="getlist"参数function(params)

引入链接

    <!--jquery-->
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <!--bootstrap-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!--fontawesome-->
    <script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script>
    <!--bootstrap-table-->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
    <!--bootstrap-table-lanuage-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
    <!--bootstrap-table-export-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>
    <!--在客户端保存生成的导出文件-->
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <!--以XLSX(Excel 2007+ XML格式)格式导出表(SheetJS)-->
    <script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script>
    <!--以PNG格式导出表格-->
    <!--对于IE支持包括 html2canvas 之前的 es6-promise-->
    <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <!--将表导出为PDF文件-->
<%--   todo 不可用  --%>
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
<%--  todo  不可用  --%>
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
    <!--无论期望的格式如何,最后都包含 tableexport.jquery.plugin(不是tableexport)-->
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>

html代码:

<div id="toolbar">
		<select class="form-control">
			<option value="">Export Basic</option>
			<option value="all">Export All</option>
			<option value="selected">Export Selected</option>
		</select>
	</div>
	<button type="button" onclick="exportData()" class='btn btn-mini btn-info'>导出</button>
	<table id="table1" data-locale="zh-CN"></table>
</div>

javascript代码:

$(function () {

	$('#table1').bootstrapTable({
		url: '/user/queryuser',         //请求后台的URL(*)
		method:"get",   				// 请求方式(*)
		totalField:"num",				//总数:后端传的参数,用这个参数可以更改
		dataField:"list",				//总数据名:同上一样。
		// totalField 默认 total,dataField 默认 rows,
		classes: "table table-bordered table-striped", //表格样式
		toolbar:"#toolbar",				//工具按鈕用哪個容器
		pagination: true,                   //是否显示分页(*)
		sidePagination: "client",           //分页方式:client客户端分页,server服务端分页(*)
		pageNumber:1,                       //初始化加载第一页,默认第一页
		pageSize: 5,                       //每页的记录行数(*)
		pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
		showRefresh: true,                  //是否显示刷新按钮
		search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,
		searchOnEnterKey:false,             //******回车后执行搜索****//
		showColumns: true,                  //是否显示所有的列
		clickToSelect: true,                //是否启用点击选中行
		singleSelect:"true",			//是否启用单选按钮
		uniqueId: "userCode",                     //每一行的唯一标识,一般为主键列
		showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
		showFullscreen:true,				// 是否全屏显示
		// cardView: true,                    //是否显示详细视图
		// locale:"zh",							设置语言
		//showHeader: true,            是否显示头部
		showExport: true,//工具栏上显示导出按钮
		exportDataType: $(this).val(),//显示导出范围
		exportTypes: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],//导出格式
		exportOptions: {//导出设置
			fileName: 'TableUser',//下载文件名称
		},
		dataType:"text", //服务器返回了txt字符串
		responseHandler:function(res) {
			return JSON.parse(res);//把字符串转换成JSON
		},
		columns: [{

			checkbox:true,
			align:"center",
		},{
			title: '排序',//标题  可不加
			align: "center",
			formatter: function (value, row, index) {
				return index + 1;
			}
		},{
			field: 'userName',
			title: '姓名',
			align:"center",
		}, {
			field: 'userCode',
			title: '用户名',
			align:"center",
		}, {
			field: 'gender',
			title: '性别',
			align:"center",
			formatter:function (value,row,index) {
				if (value == 1){
					return "男"
				}else{
					return "女"
				}
			}

		}, {
			field: 'birthday',
			title: '出生日期',
			align:"center",
			//——修改——获取日期列的值进行转换
			formatter: function (value, row, index) {
				return changeDateFormat(value)
			},
			sortable: true, //可以根据出生日期排序
		},{
			field:"userCode",
			title: "操作",
			width:"210",
			align:"center",
			valign:"middle",
			formatter:actionFormatter,
		}]
	});
});

//操作栏的格式化
function actionFormatter(value) {
	var result = "";
	var id = value+"";
	result += "<a onclick=\"query('"+value+"')\" href='javascript:;' class='btn btn-xs green'  title='查看'><span class='glyphicon glyphicon-search'>查看</span></a>";
	result += "<a onclick=\"upData('"+value+"')\" href='javascript:;' class='btn btn-xs blue' title='编辑'><span class='glyphicon glyphicon-pencil' data-target='#upData'>编辑</span></a>";
	result += "<a onclick=\"del('"+value+"')\" href='javascript:;' class='btn btn-xs red' title='删除'><span class='glyphicon glyphicon-remove'>删除</span></a>";
	return result;
}
function query(value){
	console.log("数据id为"+value+"正在查看信息")
}
function upData(value){
	console.log("数据id为"+value+"正在编辑信息")
}
function del(value){
	console.log("数据id为"+value+"正在删除信息")
}

//转换日期格式(时间戳转换为datetime格式)
function changeDateFormat(cellval) {
	var dateVal = cellval + "";
	if (cellval != null) {
		var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
		var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
		var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

		var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
		var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
		var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

		return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
	}
}

// 自定义按钮导出数据
function exportData(){
	$('#table').tableExport({
		type: 'excel',
		exportDataType: "all",
		ignoreColumn: [0],//忽略某一列的索引
		fileName: 'Tablexxx',//下载文件名称
		onCellHtmlData: function (cell, row, col, data){//处理导出内容,自定义某一行、某一列、某个单元格的内容
			console.info(data);
			return data;
		},
	});
}

0

评论区