使用bootstrap-table简化CRUD

日期时间组件

https://github.com/pingcheng/bootstrap4-datetimepicker
Bootstrap 4 可用的日期时间组件, 已验证.

使用时, 先替换图标组件到 font-awesome 5

$.extend(true, $.fn.datetimepicker.defaults, {
  icons: {
    time: 'far fa-clock',
    date: 'far fa-calendar',
    up: 'fas fa-arrow-up',
    down: 'fas fa-arrow-down',
    previous: 'fas fa-chevron-left',
    next: 'fas fa-chevron-right',
    today: 'fas fa-calendar-check',
    clear: 'far fa-trash-alt',
    close: 'far fa-times-circle'
  }
});

然后就可以作用于目标元素上了, 日期格式使用的是 moment.js

$('#createdAfter').datetimepicker({
  format: 'YYYY-MM-DD HH:mm'
});
$('#createdBefore').datetimepicker({
  format: 'YYYY-MM-DD HH:mm'
});

Table 使用

引入bootstrap-table资源包, 页首引用css, 页脚引用js
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" // 数据请求地址

th参数说明

data-field="createdAt" // 显示时使用的字段
data-sort-field="0" // 远程请求时使用的sort参数值
data-sortable="true" // 是否允许排序

行点击事件

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>

posted on 2015-09-22 15:36 Milton 阅读(5797) 评论(0) 编辑收藏举报

刷新页面返回顶部

Milton

使用bootstrap-table简化CRUD

日期时间组件

Table 使用

导航

公告