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. vim中常用的命令

    1.光标的命令 gg 移到第一行位置 G 移到最后一行 o       行首 $       行末 nk 向上移动n行 nj 向下移动n行 nh 向左移动n列 nl 向右移动n列 ctrl+f     ...

  2. pycharm连接数据库出现时区jdbc问题

    unrecognized or represents more than one time zone. You must configure either the server or JDBC dri ...

  3. 我把双系统的win10抹除了现在开机只按option还是会出现双系统选择，怎么把那个win10给取消了或删除掉

    找到解决方法了,按步骤来吧,准备:[打开Finder如果你在侧边设备一栏里看不到 Macintosh HD 就打开Finder设置>边栏>勾选硬盘,如果能看到请无视这一行]1. 打开终端执 ...

  4. IT人生的价值和意义 感觉真的有了

     为了做新闻APP,我居然短短一个月利用业余时间做了: 一个通用新闻采集器. 一个新闻后台审核网站. 一个通用采集器下载网站. 一个新闻微网站. 一个新闻APP, 而且还给新闻微网站和新闻 APP练就 ...

  5. (转)Linux下同步工具inotify+rsync使用详解

    原文:https://segmentfault.com/a/1190000002427568 1. rsync 1.1 什么是rsync rsync是一个远程数据同步工具,可通过LAN/WAN快速同步 ...

  6. IDE神器intellij idea的基本使用 (转载)

    一.关于新建工程,导入工程,配置jdk,tomcat这里不做过多的讲述,必定网络上关于此类配置一堆一堆的. 二.编码快捷键(比较常用的快捷键)该套快捷键选择的是:Mac OS X 10.5+ 1. a ...

  7. [问题解决]Fresco设置圆角效果不生效问题探究

    [问题解决]Fresco设置圆角效果不生效问题探究 /** * Created by diql on 2017/2/21 11:07:04. */ 问题 在View中设置: fresco:rounde ...

  8. ECharts概念学习系列之ECharts的下载和安装（图文详解）

    不多说,直接上干货! http://echarts.baidu.com/download.html 前言 如果你想要用较少的代码实现比较酷炫的数据统计表,echarts是值得你考虑的一种实现方式.官网 ...

  9. jquery validate（转）

    转自:http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 官网地址:http://bassistance.de/jquery-plugins/jq ...

  10. iOS选择相片优化

    1.问题 在ios中有时需要选择本地图片或者拍照,有时候选择相片的时候会有多选和单选,所以需要首先封装相册选择,在之前的博客中也有写到IOS多选单选相册图片.这个只是对相册中选择图片的封装.我们在ap ...