使用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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程