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">&times;</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的使用方法的更多相关文章

  1. bootstrap Table 的使用方法

    然后添加css  找到bootstrap-table.min.css 添加进去 再添加JS Js添加时  按照顺序添加 然后初始化bootstrap-table <script type=&qu ...

  2. Bootstrap table方法，Bootstrap table事件，配置

    调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...

  3. bootstrap table 和 x-editable 使用方法

    最近需要做一些数据表格,有同事推荐EasyUI,但经过比较还是选择了Bootstrap,一款极为强大的表格组件,基于Bootstrap 的 jQuery .本文还将介绍Bootstrap-editab ...

  4. ABP+AdminLTE+Bootstrap Table权限管理系统第六节--abp控制器扩展及json封装以及6种处理时间格式化的方法

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 一,控制器AbpController 说完了Swagger ui 我们再来说一下abp对控制器的处理和json的封 ...

  5. Bootstrap Table使用方法详解

    http://www.jb51.net/article/89573.htm bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专 ...

  6. bootstrap Table API和一些简单使用方法

    官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回”rows”.“”total,这样才能重新赋值 ...

  7. Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table实现的,要求能利用拖动改变列宽,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它 ...

  8. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  9. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

随机推荐

  1. 常用的PHP超全局变量$_SERVER 收集整理

    传送带:https://www.cnblogs.com/rendd/p/6182918.html

  2. python3.6的request

    request实例1: import requests payload = {'key1':'value','key2':'value2'} url = "http://httpbin.or ...

  3. 技巧方法 - CentOS6将Python2.6.6升级到Python2.7.6

    1.首先使用“python -V”命令查看python版本,我们测试主机显示的是2.6.6版,于是下面就着手将python2.6.6升级到Python2.7.6.python -V #查看python ...

  4. excel 快速填充所有非连续空白单元格

    工作中经常会碰到这样的表,需要把空白的单元格填充完成.变成后图.下面就是方法.       工具/原料 EXCEL 方法/步骤   首先选中你要填充的区域,   按“F5"或者 Ctrl + ...

  5. Mac 10.12安装Google浏览器

    说明:先安装旧版本后续再升级,主要是资源难找. 下载: (链接: https://pan.baidu.com/s/1eROfQyY 密码: n6ij)

  6. Thinkphp3.2.X自动生成应用目录

    从3.2.2版本开始,可以支持自动生成默认模块之外的模块目录以及批量生成控制器和模型类. 例如,如果我们需要生成一个Admin模块用于后台应用,在应用入口文件中定义如下: // 绑定Admin模块到当 ...

  7. Hibernate核心开发接口_SessionFactory详解

    SessionFactory: a)  用来产生和管理Session b)通常情况下每个应用只需要一个SessionFactory c)除非要访问多个数据库的情况 d) 关注两个方法即:  openS ...

  8. SSM上传EXCLE到数据库 和 从数据库导出为EXCLE

    SSM上传EXCLE到数据库 和 从数据库导出为EXCLE package com.ABC.controller; import java.io.BufferedInputStream; import ...

  9. Freemarker不显示对象的属性

    Freemarker不显示对象的属性 今天使用Freemarker在springboot项目中通过模板生成一些html文件.但是发现没有显示对象的属性. 找了很长时间,终于发现不显示对象的属性可能是两 ...

  10. springboot-22-自定义starter

    先说下springboot的运行原理 springboot最主要的配置 是 @SpringBootApplication 然后这里面 @EnableAutoCOnfiguration 最为重要, 继续 ...