官方网站：
http://bootstrap-table.wenzhixin.net.cn/
参考文档：http://issues.wenzhixin.net.cn/bootstrap-table/index.html
中文文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
下载bootstrap Table插件所必须的js，地址：https://github.com/wenzhixin/bootstrap-table

在开发项目的时候，发现了一款JS组件系列——表格组件神器
，官方文档也比较简单，总结了一些常遇到的问题

一：实现一个简单的表格和分页

图片.png
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Dashboard | Nadhif - Responsive Admin Template</title>
  7.         <link rel="stylesheet" href="../../../css/bootstrap.min.css">
  8.         <link rel="stylesheet" href="../../../public/css/plugins/bootstrap-table/bootstrap-table.min.css">
  9.         <script src="../../../js/jquery.min.js"></script>
  10.         <script src="../../../js/bootstrap.min.js"></script>
  11.         <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
  12.         <script src="../../../public/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
  13.     </head>
  15.     <body>
  16.         <table id="mytab" class="table table-hover"></table>
  17.         <script>
  18.             $('#mytab').bootstrapTable({
  19.                 url: 'data1.json',
  20.                 queryParams: "queryParams",
  21.                 toolbar: "#toolbar",
  22.                 sidePagination: "true",
  23.                 striped: true, // 是否显示行间隔色
  24.                 //search : "true",
  25.                 uniqueId: "ID",
  26.                 pageSize: "5",
  27.                 pagination: true, // 是否分页
  28.                 sortable: true, // 是否启用排序
  29.                 columns: [{
  30.                         field: 'id',
  31.                         title: '登录名'
  32.                     },
  33.                     {
  34.                         field: 'name',
  35.                         title: '昵称'
  36.                     },
  37.                     {
  38.                         field: 'price',
  39.                         title: '角色'
  40.                     },
  41.                     {
  42.                         field: 'price',
  43.                         title: '操作',
  44.                         width: 120,
  45.                         align: 'center',
  46.                         valign: 'middle',
  47.                         formatter: actionFormatter,
  48.                     },
  50.                 ]
  51.             });
  52.             //操作栏的格式化
  53.             function actionFormatter(value, row, index) {
  54.                 var id = value;
  55.                 var result = "";
  56.                 result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
  57.                 result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
  58.                 result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
  59.                 return result;
  60.             }
  61.         </script>
  62.     </body>
  64. </html>

json数据：

  1.     [
  2.         {
  3.             "id": 0,
  4.             "name": "Item 0",
  5.             "price": "$0"
  6.         },
  7.         {
  8.             "id": 1,
  9.             "name": "Item 1",
  10.             "price": "$1"
  11.         },
  12.         {
  13.             "id": 2,
  14.             "name": "Item 2",
  15.             "price": "$2"
  16.         },
  17.         {
  18.             "id": 3,
  19.             "name": "Item 3",
  20.             "price": "$3"
  21.         },
  22.         {
  23.             "id": 4,
  24.             "name": "Item 4",
  25.             "price": "$4"
  26.         },
  27.         {
  28.             "id": 5,
  29.             "name": "Item 5",
  30.             "price": "$5"
  31.         },
  32.         {
  33.             "id": 6,
  34.             "name": "Item 6",
  35.             "price": "$6"
  36.         },
  37.         {
  38.             "id": 7,
  39.             "name": "Item 7",
  40.             "price": "$7"
  41.         },
  42.         {
  43.             "id": 8,
  44.             "name": "Item 8",
  45.             "price": "$8"
  46.         },
  47.         {
  48.             "id": 9,
  49.             "name": "Item 9",
  50.             "price": "$9"
  51.         },
  52.         {
  53.             "id": 10,
  54.             "name": "Item 10",
  55.             "price": "$10"
  56.         },
  57.         {
  58.             "id": 11,
  59.             "name": "Item 11",
  60.             "price": "$11"
  61.         },
  62.         {
  63.             "id": 12,
  64.             "name": "Item 12",
  65.             "price": "$12"
  66.         },
  67.         {
  68.             "id": 13,
  69.             "name": "Item 13",
  70.             "price": "$13"
  71.         },
  72.         {
  73.             "id": 14,
  74.             "name": "Item 14",
  75.             "price": "$14"
  76.         },
  77.         {
  78.             "id": 15,
  79.             "name": "Item 15",
  80.             "price": "$15"
  81.         },
  82.         {
  83.             "id": 16,
  84.             "name": "Item 16",
  85.             "price": "$16"
  86.         },
  87.         {
  88.             "id": 17,
  89.             "name": "Item 17",
  90.             "price": "$17"
  91.         },
  92.         {
  93.             "id": 18,
  94.             "name": "Item 18",
  95.             "price": "$18"
  96.         },
  97.         {
  98.             "id": 19,
  99.             "name": "Item 19",
  100.             "price": "$19"
  101.         },
  102.         {
  103.             "id": 20,
  104.             "name": "Item 20",
  105.             "price": "$20"
  106.         }
  107.     ]

二：说一说BootstrapTable的属性一览表


  2.             url: '/Home/GetDepartment',         //请求后台的URL（*）
  3.             method: 'get',                      //请求方式（*）
  4.             toolbar: '#toolbar',                //工具按钮用哪个容器
  5.             striped: true,                      //是否显示行间隔色
  6.             cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
  7.             pagination: true,                   //是否显示分页（*）
  8.             sortable: false,                     //是否启用排序
  9.             sortOrder: "asc",                   //排序方式
  10.             queryParams: oTableInit.queryParams,//传递参数（*）
  11.             sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
  12.             pageNumber:1,                       //初始化加载第一页，默认第一页
  13.             pageSize: 10,                       //每页的记录行数（*）
  14.             pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
  15.             search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
  16.             strictSearch: true,
  17.             showColumns: true,                  //是否显示所有的列
  18.             showRefresh: true,                  //是否显示刷新按钮
  19.             minimumCountColumns: 2,             //最少允许的列数
  20.             clickToSelect: true,                //是否启用点击选中行
  21.             height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
  22.             uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
  23.             showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
  24.             cardView: false,                    //是否显示详细视图
  25.             detailView: false,                   //是否显示父子表
  26.             columns: [{
  27. }]

三：bootstrap-table如何设置首行变色，其他行不变色

其实很简单，在代码之中找到首行对应的代码，然后添加属性即可

图片.png
  1. #mytab  thead{background: #5488c4;}

四：添加删除数据之后表格自动刷新加载

  1. $table.bootstrapTable('refresh');

五：如何设置bootstrap-table插件的隔行变色的颜色

图片.png

代码样式如下

  1. <style>
  2. #mytab tr:nth-child(even){
  3. background:#f4f8fb;
  4. }
  5. </style>
  6. 、

BootstrapTable的使用教程的更多相关文章

  1. Boostrap bootstrap-table插件使用教程

    bootstrap table 简介及特性 简介 Bootstrap table 是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序 ...

  2. bootstrap-table教程演示

    Bootstrap Admin 效果展示 Table of contents Create Remove Update Export Tree Create 相关插件 bootstrap-valida ...

  3. 表格插件BootStrap-Table使用教程

    Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件,功能比较完备,能够实现数据异步获取,编辑,排序等一系列功能. 官网https://bootstrap-tab ...

  4. BootstrapTable的简单使用教程

    1.引入必须的几个包 <link th:href="bootstrap/css/bootstrap.css}"/> <link th:href="boo ...

  5. bootstrap-table填坑之旅<一>认识bootstrap-table

    应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大, ...

  6. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  7. bootstrapTable

    一个详细的教程 table参数 bootstrap table使用总结 BootstrapTable使用实例 事件event 事件函数的用法: 方法1 $('#table').bootstrapTab ...

  8. bootstrapTable 学习使用

    Bootstrap离线API Bootstrap Table 离线API <input type="button" id="btn_searcher" v ...

  9. bootstrap table教程--后台数据绑定、特殊列处理、排序

    上一篇文章介绍了基本的使用教程.本节主要介绍Bootstrap的后台数据绑定.特殊列处理及列的排序功能 1.数据绑定 一般做程序设计,很少是使用json文件直接绑定数据.基本上我们都是使用编程语言进行 ...

随机推荐

  1. Win7下IE11点击无反应的解决方法

    平台:win7 sp1 32bit 问题:点击Internet Explorer在开始菜单.快捷栏的图标和安装目录下的程序均没有反应,鼠标在变成漏斗后恢复原状再无反应.但搜狗浏览器和360浏览器下使用 ...

  2. 开发板 Linux驱动视频 驱动是什么

    内存管理单元很重要. linux把设备看成文件,(open,read,write,ioctrl,close)主要写这几个函数. 哈弗结构,取指令和取数据同时进行. arm处理器体系架构以及发展方向 单 ...

  3. app 自动化测试 Appium+python可以运行的代码

    Appium

  4. Android 监听电量的状态

    监控手机电量的变化和充电状态 在BatteryManager中有一个粘性广播,不需要BroadcastReceiver作为接收器,在注册时将传入null IntentFilter filter = n ...

  5. Spring Profiles example--转载

    原文地址:http://www.mkyong.com/spring/spring-profiles-example/ Spring @Profile allow developers to regis ...

  6. 最全Pycharm教程（42）——Pycharm扩展功能之Emacs外部编辑器

    1.主题 介绍怎样将Emacs定义为一个Pycharm外部编辑器. 2.准备工作 (1)Pycharm版本号为2.7或更高 (2)下载了downloadedEmacs并正确安装 3.配置Emacs 打 ...

  7. 小米R2D samba共享配置

    编辑samba配置文件 vi /etc/config/samba 需要注意的是,samba有自己的配置文件 /etc/samba/smb.conf,但是修改这个文件是不生效的,这个配置文件会在重启路由 ...

  8. 嵌入式Linux学习笔记 NAND Flash控制器

    一.NAND Flash介绍和NAND Flash控制器的使用 NAND Flash在嵌入式系统中的作用,相当于PC上的硬盘 常见的Flash有NOR Flash和NAND Flash,NOR Fla ...

  9. tomcat自动URLDecode解码问题（+号变空格）

    最近项目中出现一个问题,就是前段调后端接口,参数带+号,传到后端后+号自动URLDecode成空格了. 1.问题排查 条件:tomcat配置server.xml有URIEncoding="U ...

  10. 9、LCD驱动程序框架

    linux-3.4.2\drivers\video\S3C2410fb.c(内核自带驱动程序) fbmem.c是LCD驱动程序顶层框架文件,是一个通用的文件,在初始化init函数中会注册一个字符设备, ...