bootstrap Table的使用方法
1.官网
url:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 文档包含了表格属性、列属性、事件、方法等等.
2.引入库
只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用默认有写data-toggle=”table”,data-toggle应该知道吧，常用的有”tooltip、popover等等”，这边就不说了.
3.定义住表单
<!-- 主表单 -->
<table id="datatable"></table>
<!-- /主表单 -->
3.表格的增删改查(功能很完整)
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="@{import} :: head"></head>
<style type="text/css">
#select-form{
width: 100%;
height: 50px;
border: 1px #ddd solid;
padding: 5px;
min-width: 600px;
}
#select-form label{
width: 250px;
height: 40px;
padding: 6px;
}
#select-form label input{
width: 200px;
height: 30px;
outline: none;
font-size: 12px;
text-indent: 20px;
font-weight: normal;
border-radius: 3px;
border: none;
border: 1px #ddd solid;
}
#select-form button{
outline: none;
cursor: pointer;
}
</style>
<body> <!-- nav -->
<section th:include="@{import} :: nav"></section> <!-- container start -->
<div class="wrapper">
<div class="container-fluid" id="main-container">
<div class="row">
<!-- section of left menu -->
<div class="col-md-1 col-sm-12" th:include="@{import} :: leftMenu"></div>
<!-- /section of left menu --> <!-- section of main 主表单区域 -->
<section class="col-md-11 col-sm-12 box">
<!-- 用于显示警告信息 -->
<div id="alert"></div> <!-- 表单按钮 -->
<div id="toolbar" class="btn-group btn-group-sm">
<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" disabled="true">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default" disabled="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<!-- /表单按钮 -->
<!--搜索框-->
<div id="select-form">
<label class="control-label">
<span>名称：</span><input type="text" class="select-name" placeholder="请输入用户名称"/>
</label>
<label class="control-label">
<span>描述：</span><input type="text" class="select-description" placeholder="请输入描述"/>
</label>
<button class="btn btn-default btn-sm btn-search bt">搜索</button>
</div>
<!--/搜索框-->
<!-- 主表单 -->
<table id="datatable"></table>
<!-- /主表单 --> <!-- 新增/编辑 表单 -->
<div class="modal fade" id="datatable-editor" tabindex="-1" role="dialog" aria-labelledby="datatable-editor">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">编辑表单</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form">
<input type="hidden" name="id" id="id" />
<input type="hidden" name="_method" id="_method" />
<div class="form-group">
<label for="name" class="col-md-2 control-label">名称</label>
<div class="col-md-10">
<input type="text" name="name" id="name" class="form-control" placeholder="名称">
</div>
</div>
<div class="form-group">
<label for="description" class="col-md-2 control-label">描述</label>
<div class="col-md-10">
<input type="text" name="description" id="description" class="form-control" placeholder="描述">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btn-ok" class="btn btn-primary pt-close">保存</button>
<button type="button" id="btn-cancel" class="btn btn-default pt-close" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- /新增/编辑 表单 --> <!-- 删除确认 -->
<div class="modal fade" id="datatable-confirm" tabindex="-1" role="dialog" aria-labelledby="datatable-confirm">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">删除确认</h4>
</div>
<div class="modal-body">
<p>确认删除以下数据,此操作不可恢复?</p>
<ul class="list-group" id="delete-list"></ul>
</div>
<div class="modal-footer">
<button type="button" id="btn-ok" class="btn btn-primary pt-close">确认</button>
<button type="button" id="btn-cancel" class="btn btn-default pt-close" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- /删除确认 -->
</section>
<!-- /section of main -->
</div>
</div>
</div>
<!--/.container end--> <script th:inline="javascript">
$(document).ready(function() {
var tableEditor = $("#datatable-editor");
var URL = {
insert : {url : "/system/role/roles" , method : "POST"},
update : {url : "/system/role/roles" , method : "PUT"},
"delete" : {url : "/system/role/roles/batch" , method : "DELETE"}
} var getEditorInsert = function() {
tableEditor.find("#_method").val(URL.insert.method);
var url = URL.insert.url;
return {editor : tableEditor, url : url};
} var getEditorUpdate = function(id) {
tableEditor.find("#_method").val(URL.update.method);
var url = URL.update.url + "/" + id;
return {editor : tableEditor, url : url};
} var getEditorDelete = function() {
var url = URL["delete"].url;
return {editor : tableEditor, url : url , method: URL["delete"].method};
} /* 表格操作 */
// 根据选中项目数切换按钮点击状态
var changeToolbarStatus = function(row,tr) {
var select = $('#datatable').bootstrapTable('getSelections');
$("#toolbar").find("#btn_edit").attr("disabled",select.length != 1);
$("#toolbar").find("#btn_delete").attr("disabled",select.length == 0);
}
// 表格属性
var initTable = function() {
$('#datatable').bootstrapTable({
showColumns: true,
toolbar: "#toolbar",
iconSize: "sm",
idField : "id",
clickToSelect: true, url: "roles",
contentType: "application/x-www-form-urlencoded",
dataField : "rows",
queryParams: function(params) {
params["std.offset"] = params.offset;
params["std.limit"] = params.limit;
return params;
}, sidePagination: "server",
pagination: true,
pageNumer: 1,
pageSize: 20,
pageList: [20,50,100], columns:[
{
title:'',
field:'_select',
checkbox:true,
align:'center'
},
{
title: "ID",
field: "id",
visible: false
},
{
title: "名称",
field: "name"
},
{
title: "描述",
field: "description"
}
], onCheck: changeToolbarStatus,
onUncheck: changeToolbarStatus
});
}
initTable(); // ajax提交数据后的操作
var onSubmitOver = function(data) {
if(data.success)
$("#datatable").bootstrapTable("refresh");
else {
var html = '<div class="alert alert-warning alert-dismissible fade in" role="alert">';
html += '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>';
html += '<p>' + data.errorMsg + '</p>';
html += '</div>';
$("#alert").append(html);
}
} // 用于打开编辑表单
var openEditor = function(editor,onBeforeOpen) {
return new Promise(function(resolve,reject) {
if(onBeforeOpen)
onBeforeOpen(editor.editor.find("form")); editor.editor.modal('show');
editor.editor.find("input[type=text]:first")[0].focus(); editor.editor.find("#btn-ok").on("click",function() {
var data = editor.editor.find("form").serializeArray();
resolve(data);
editor.editor.modal("hide");
});
editor.editor.find("#btn-cancel").on("click",function() {
reject();
}); });
}
// 用于对第一个输入框聚焦
tableEditor.on("shown.bs.modal",function() {
tableEditor.find("input[type=text]:first")[0].focus();
});
// 关闭时清除form内容
tableEditor.on("hidden.bs.modal",function() {
tableEditor.find(":input").not(':button,:submit,:reset').val("");
}); // 打开新增表单
$("#toolbar").find("#btn_add").on("click",function() {
var editor = getEditorInsert();
openEditor(editor).then(function(data) {
var submitParam = {};
for(idx in data) {
var item = data[idx];
if(item.name != "id") {
submitParam[item.name] = item.value;
}
}
$.post(editor.url,submitParam,onSubmitOver,'json');
});
}); // 打开编辑表单
$("#toolbar").find("#btn_edit").on("click",function() {
var select = $('#datatable').bootstrapTable('getSelections');
var line = select[0]; var beforeOpen = function(form) {
$.each(line,function(key,value) {
form.find("#" + key).val(value);
});
}
var editor = getEditorUpdate(line.id);
openEditor(editor,beforeOpen).then(function(data) {
var submitParam = {};
for(idx in data) {
var item = data[idx];
submitParam[item.name] = item.value; }
//console.info(submitParam)
$.post(editor.url,submitParam,onSubmitOver,'json');
});
}); // 删除确认
var deleteConfirm = function() {
return new Promise(function(resolve,reject) {
var select = $('#datatable').bootstrapTable('getSelections');
if(select.length == 0) {
reject();
return;
} $("#datatable-confirm").find("#btn-ok").on("click",function() {
resolve(select);
$("#datatable-confirm").modal("hide");
});
$("#datatable-confirm").find("#btn-cancel").on("click",function() {
reject();
});
$("#datatable-confirm").modal("show");
});
}
// 删除按钮点击
$("#toolbar").find("#btn_delete").on("click",function() {
var editor = getEditorDelete();
deleteConfirm().then(function(select) {
var ids = [];
$.each(select,function(idx,item) {
ids.push(item.id);
}); $.post(editor.url,{"_method":editor.method,ids:ids},onSubmitOver,'json');
});
});
// 查询用户
var oInp=document.querySelector('.select-name');
var oSet=document.querySelector('.select-description');
var searchName=null,searchDes=null;
var str='';
var arrDate=[];
function getName(){
searchName = oInp.value;
}
function getDes(){
searchDes = oSet.value;
}
oInp.oninput = getName;
oSet.oninput = getDes;
$('#select-form').find('.btn-search').on('click',function(){
//按name和description检索
if(searchName!= null && searchDes!= null){
$.ajax({
async: false,
type: "get",
url:'http://*.*.*.*:8090/system/role/roles',
contentType : "application/x-www-form-urlencoded; charset=utf-8",
data:{
name:searchName,
description:searchDes
},
success: function (res) {
$('#datatable').bootstrapTable('removeAll') //删除表格数据
$('#datatable').bootstrapTable('append', res.rows) //新增表格数据
},
error: function (err) {
console.log('服务器有误'+err)
}
})
//按name搜索
}else if(searchName != '' && searchDes == null){
$.ajax({
async: false,
type: "get",
url:'http://*.*.*.*:8090/system/role/roles',
contentType : "application/x-www-form-urlencoded; charset=utf-8",
data:{
name:searchName
},
success: function (res) {
$('#datatable').bootstrapTable('removeAll') //删除表格数据
$('#datatable').bootstrapTable('append', res.rows) //新增表格数据
},
error: function (err) {
console.log('服务器有误'+err)
}
})
}else if(searchName == null && searchDes != ''){
$.ajax({
async: false,
type: "get",
url:'http://*.*.*.*:8090/system/role/roles',
contentType : "application/x-www-form-urlencoded; charset=utf-8",
data:{
description:searchDes
},
success: function (res) {
$('#datatable').bootstrapTable('removeAll') //删除所有表格数据
$('#datatable').bootstrapTable('append', res.rows) //新增表格数据
},
error: function (err) {
console.log('服务器有误'+err)
}
})
}
})
});
</script>
<!-- footer -->
<div th:include="@{import} :: footer"></div>
</body>
</html>
4.中文文档
https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1(网站转载)
5.效果图
刚想贴图，发现服务器炸了······下次再贴 看这个的时候对着文档一起看。
bootstrap Table的使用方法的更多相关文章
- bootstrap Table 的使用方法
然后添加css 找到bootstrap-table.min.css 添加进去 再添加JS Js添加时 按照顺序添加 然后初始化bootstrap-table <script type=&qu ...
- Bootstrap table方法，Bootstrap table事件，配置
调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...
- bootstrap table 和 x-editable 使用方法
最近需要做一些数据表格,有同事推荐EasyUI,但经过比较还是选择了Bootstrap,一款极为强大的表格组件,基于Bootstrap 的 jQuery .本文还将介绍Bootstrap-editab ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第六节--abp控制器扩展及json封装以及6种处理时间格式化的方法
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 一,控制器AbpController 说完了Swagger ui 我们再来说一下abp对控制器的处理和json的封 ...
- Bootstrap Table使用方法详解
http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...
- bootstrap Table API和一些简单使用方法
官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回”rows”.“”total,这样才能重新赋值 ...
- Bootstrap Table列宽拖动的方法
在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
随机推荐
- docker微服务部署之：四、安装docker、docker中安装mysql和jdk1.8、手动构建镜像、部署项目
docker微服务部署之:三,搭建Zuul微服务项目 1.Centos7安装Docker 详见:Centos7安装Docker 2.Docker中安装jdk1.8 详见:使用Docker构建jdk1. ...
- leetcode-217-Contains Duplicate（使用排序来判断整个数组有没有重复元素）
题目描述: Given an array of integers, find if the array contains any duplicates. Your function should re ...
- 嵌入式C语言自我修养 05：零长度数组
5.1 什么是零长度数组 顾名思义,零长度数组就是长度为0的数组. ANSI C 标准规定:定义一个数组时,数组的长度必须是一个常数,即数组的长度在编译的时候是确定的.在ANSI C 中定义一个数组的 ...
- 课堂练习：ex 4-20
一.习题要求 • 定义一个复数类Complex. • 有相加,输出,模计算函数. • 模计算要求结果保存在第一个复数中. 二.习题内容 //complex.h # ifndef COMPLEX_H # ...
- Python抓取远程文件获取真实文件名
用urllib下载远程文件并转存到hdfs服务器,在下载时,下载地址中不一定包含文件名,需要从连接信息中获取. 1 file_url = request.form.get('file_url') 2 ...
- 剑指offer——面试题32.1：分行从上到下打印二叉树
void BFSLayer(BinaryTreeNode* pRoot) { if(pRoot==nullptr) return; queue<BinaryTreeNode*> pNode ...
- PHP之string
string addcslashes() Quote string with slashes in a C style 以 C 语言风格使用反斜线转义字符串中的字符 addslashes() Quot ...
- 2-8 js基础 jsonp封装
'use strict'; function jsonp(json){ json = json||{} if(!json.url)return; json.data=json.data||{}; js ...
- logstash 启动报找不主类或无法加载 java
logstash 启动报无法找到主类解决方案 Zparkle 关注 2018.03.08 22:04* 字数 2051 阅读 1评论 0喜欢 0 当logstash启动时,首先要注意正确配置java ...
- 什么是SharePoint?
在聊SharePoint开发之前,有必要说下什么是SharePoint. 在我工作的过程中,经常遇到客户对SharePoint不太了解的情况.有客户说,SharePoint太烂了,DropBox能做到 ...