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. iOS学习笔记(6)——翻译苹果文档About Windows and Views

    About Windows and Views 关于窗口和视图 In iOS, you use windows and views to present your application’s cont ...

  2. jenkins+appium android app自动化测试

    jenkins安装 pytest+jenkins安装+allure报告 新建任务 其他默认,保存 立即构建 test_login.py from src.pages import login_page ...

  3. Mac 10.12打开任何来源选项

    在终端中输入: sudo spctl --master-disable 然后输入密码即可.最终会出现如下图所示:

  4. MySQL 重命名数据库

    首先创建目标库 create database trgdb; 获取所有源库的表名 use information_schema; select table_name from TABLES where ...

  5. AngularJS Eclipse Plugin

    本文介绍如何安装和配置 AngularJS Eclipse.AngularJS Eclipse 插件是基于强大的 JavaScript 推断引擎(javascript inference engine ...

  6. eclipse自定义代码注释

    效果如下: 自定义注释的方法:

  7. 【Qt开发】常用控件--QLineEdit

    QLineEdit是单行文本编辑控件.比如用户名,密码等输入框可以使用该控件. 所属头文件<QLineEdit> 常用方法 1.void setText(const QString &am ...

  8. springboot-2-ioc

    在spring环境下, ioc(控制反转 和 DI (依赖注入) 是等效的, 主要体现一种组合的松耦合思想. spring Ioc容器负责创建Bean, 并将Bean注入到所需的Bean中, 有xml ...

  9. c之指针与数组（1）

    1.指针与地址 一元运算符&可用于取一个对象的地址.例如:int i=1;&i就是计算机地址. 一元运算符*是间接寻址或者间接引用运算符.例如: int x=1,y:int ip*: ...

  10. [PY3]——内置数据结构(9)——线性结构与切片/命名切片slice()

    线性结构的总结 列表list  元组tuple  字符串str  bytes  bytearray的共同点: 都是顺序存储.顺序访问的: 都是可迭代对象: 都可以通过索引访问 线性结构的特征: 可迭代 ...