1. 引入bootstrap-table资源包, 页首引用css, 页脚引用js

2. table 参数说明

         data-toggle="table"

         data-toolbar="#toolbar" //指定关联的toolbar div id

         data-show-refresh="true"

         data-show-toggle="true"

         data-show-columns="true"

         data-query-params="queryParams" // 对于toolbar中的input, 需要在这里加入参数

         data-sort-name="name" //与th中的 data-field匹配, 默认以哪一个排列

         data-sort-field="1" // 远程请求时, 实际用的sort参数值

         data-sort-order="desc" // 默认的排序

         data-side-pagination="server"

         data-pagination="true"

         data-query-params-type="limit" //使用简化分页排序参数

         data-page-list="[5, 10, 20, 50, 100, 200]"

         data-url="/admin/sys/adminuser/data/list.html" // 数据请求地址

3. th参数说明

data-field="createdAt" // 显示时使用的字段

data-sort-field="0" // 远程请求时使用的sort参数值

data-sortable="true" // 是否允许排序

4. 行点击事件

    window.op_events = {

      'click .op_remove': function (event, value, row, index) {

        alert('You click like action, row: ' + JSON.stringify(row));

        $table.bootstrapTable('refresh');

      }

    };

完整页面代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

  <title></title>

  <!-- Bootstrap -->

  <link href="/admin/res/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <link href="/admin/res/bootstrap-notify/css/bootstrap-notify.css" rel="stylesheet">

  <link rel="stylesheet" href="/admin/res/bootstrap-table/bootstrap-table.min.css" type="text/css" media="screen, projection">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

  <!-- WARNING: Respond.js doesn't work if you view the page via utilities:// -->

  <!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  <![endif]-->

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

  <script src="/admin/res/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>  <!-- Static navbar -->

  <nav class="navbar navbar-default navbar-static-top">

    <div class="container">

      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"

                aria-expanded="false" aria-controls="navbar">

          <span class="sr-only">Toggle navigation</span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

        </button>

        <a class="navbar-brand" href="/admin">FTChinese 财富</a>

      </div>

      <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav">

          <li class="dropdown">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">资产<span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="/admin/asset/debt/">债权</a></li><li><a href="/admin/asset/fund/">基金</a></li><li><a href="/admin/asset/product/">产品</a></li>

            </ul>

          </li>

          <li class="dropdown">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">投资<span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="/admin/invest/user">用户</a></li>

            </ul>

          </li>

          <li class="dropdown active">

            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统<span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="/admin/sys/adminuser/">用户</a></li><li><a href="/admin/sys/config/">配置</a></li><li><a href="/admin/sys/menu/">菜单</a></li><li><a href="/admin/sys/auth/">权限</a></li><li><a href="/admin/sys/role/">角色</a></li>

            </ul>

          </li>

                  </ul>

        <ul class="nav navbar-nav navbar-right">

          <li><a href="/admin/logout.html">[Admin]退出</a></li>

        </ul>

      </div>

      <!--/.nav-collapse -->

    </div>

  </nav>

<style>

  .w70 {width: 70px !important;}

</style>

<div class="container">

  <h1>管理员</h1>

  <div id="toolbar">

    <div class="form-inline" role="form">

      <div class="form-group">

        <input name="name" class="form-control" type="text" placeholder="Search">

      </div>

      <button id="ok" type="submit" class="btn btn-default">OK</button>

    </div>

  </div>

  <table id="table"

         data-toggle="table"

         data-toolbar="#toolbar"

         data-show-refresh="true"

         data-show-toggle="true"

         data-show-columns="true"

         data-query-params="queryParams"

         data-sort-name="name"

         data-sort-field="1"

         data-sort-order="desc"

         data-side-pagination="server"

         data-pagination="true"

         data-query-params-type="limit"

         data-page-list="[5, 10, 20, 50, 100, 200]"

         data-url="/admin/sys/adminuser/data/list.html">

    <thead>

    <tr>

      <th data-field="name" data-sort-field="1" data-sortable="true">用户名</th>

      <th data-field="email">Email</th>

      <th data-field="role">角色</th>

      <th data-field="createdAt" data-sort-field="0" data-sortable="true">创建时间</th>

      <th data-field="id" data-formatter="op_formatter" data-events="op_events">操作</th>

    </tr>

    </thead>

  </table>

  <script>

    var $table = $('#table');

    $('#ok').click(function () {

      $table.bootstrapTable('refresh');

    });

    function queryParams(params) {

      $('#toolbar').find('input[name]').each(function () {

        params[$(this).attr('name')] = $(this).val();

      });

      return params;

    }

    function op_formatter(value, row) {

      return [

        '<a href="/admin/sys/adminuser/edit.html?id=',

        row.id,

        '">编辑</a> ',

        '<a class="op_remove" href="javascript:void(0)" title="Remove">',

        '删除',

        '</a>  '

      ].join('');

    }

    function getHeight() {

      return $(window).height() - $('h1').outerHeight(true) - 70;

    }

    window.op_events = {

      'click .op_remove': function (event, value, row, index) {

        alert('You click like action, row: ' + JSON.stringify(row));

        $table.bootstrapTable('refresh');

      }

    };

    $(window).resize(function () {

      $table.bootstrapTable('resetView', {

        height: getHeight()

      });

    });

    $(function () {

      $table.bootstrapTable('resetView', {

        height: getHeight()

      });

    });

  </script>

</div>

  <div class='notifications bottom-right' id='bs-notify'></div>

  <!-- Include all compiled plugins (below), or include individual files as needed -->

  <script src="/admin/res/bootstrap/js/bootstrap.min.js"></script>

  <script src="/admin/res/bootstrap-notify/js/bootstrap-notify.js"></script>

  <script src="/admin/res/bootstrap-table/bootstrap-table.js"></script>

</body>

</html>

使用bootstrap-table简化CRUD的更多相关文章

  1. ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--bootstrap table之用户管理列表

    这张开始bootstrap table,引入项目有两种方法,一种是直接去官网下载 地址:http://bootstrap-table.wenzhixin.net.cn/ 另一种是Nuget引入. 然后 ...

  2. ABP+AdminLTE+Bootstrap Table权限管理系统第十一节--Bootstrap Table用户管理列表以及Module Zero之用户管理

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 用户实体 用户实体代表应用的一个用户,它派生自AbpUser类,如下所示: public class User : ...

  3. ABP+AdminLTE+Bootstrap Table权限管理系统第六节--abp控制器扩展及json封装

    一,控制器AbpController 说完了Swagger ui 我们再来说一下abp对控制器的处理和json的封装. 首先我们定义一个控制器,在新增控制器的时候,控制器会自动继承自AbpContro ...

  4. ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及abp封装的Javascript函数库

    经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这里算是前面几节的一个初次试水. 首先我们数据库已经有的相应的数据. 模型和DTO已经建好,所以我们直接在服务 ...

  5. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十三节--RBAC模式及ABP权限管理（附送福利）

    ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...

  6. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十六节--SignalR与ABP框架Abp.Web.SignalR及扩展

    SignalR简介 SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...

  7. ABP+AdminLTE+Bootstrap Table权限管理系统第七节--登录逻辑及几种abp封装的Javascript函数库

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期         简介 经过前几节,我们已经解决数据库,模型,DTO,控制器和注入等问题.那么再来看一下登录逻辑.这 ...

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

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

  9. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  10. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

随机推荐

  1. sqlite 增删改查

    PersonDao1.java package mm.shandong.com.testsqlsqllite.dao; import android.content.Context; import a ...

  2. UWP开发中两种网络图片缓存方法

    通常情况下,我们的程序需要从服务器读取图片,但如果需要不止一次读取某一张图片的话,就需要做本地缓存了,这样既为用户省一点流量,又能显得你的APP很快. 假如你已经知道了某一张图片的地址,那么第一件事就 ...

  3. IOS客户端Coding项目记录导航

    IOS客户端Coding项目记录(一) a:UITextField设置出现清除按键 b:绘画一条下划线  表格一些设置 c:可以定义表头跟底部视图(代码接上面) d:隐藏本页的导航栏 e:UIEdge ...

  4. MonoDevelop编辑器中文乱码解决

    说解决乱码分几步,总共分三部! 1. Tools -> Options 2. 3.点击Font->点击TextEditor会出现下边选框,选取喜欢风格并且不乱码即可.

  5. 转：查看sql语句执行时间/测试sql语句性能

    原文出处:http://www.cnblogs.com/qanholas/archive/2011/05/06/2038543.html 写程序的人,往往需要分析所写的SQL语句是否已经优化过了,服务 ...

  6. Spring为某个属性注入值或为某个方法的返回值

    项目中用到需要初始化一些数据,Spring提供了filed的值注入和method的返回值注入. 一.Field值的注入 filed值注入需要使用org.springframework.beans.fa ...

  7. db2+python+sqlchemy环境的搭建

    记录了通过sqlalchemy 管理db2数据库的环境搭建 1.db2数据库安装配置 利用winscp复制iso文件到/mnt/IBM_db2 目录下 IBM_db2为自己创建 重命名 mv IBM\ ...

  8. Java中的基本数据类型

    什么是基本数据类型 就是我们在编程的时候经常需要用到的数据类型,如整型,浮点型等,把这些数据类型专门拿出来特殊对待,并想象成所谓的“基本类型”. Java中有哪些基本数据类型

  9. knockoutjs with绑定导致unobtrusive validation失效的问题

    如果最初的时候with绑定的对象是空的,那么with绑定内部的unobtrusive validation规则在提交的时候无法生效,无法进行验证. 解决办法: 在提交的时候(或者with绑定的对象非空 ...

  10. android + red5 + rtmp

    背景:在已有的red5服务器环境下实现android客户端的视频直播 要实现客户端视频直播就先先对服务器端有所了解 Red5流媒体服务器是Adboe的产品,免费并且是开源的,与Flash搭配的时候可谓 ...