使用bootstrap-table简化CRUD

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

2. table 参数说明

         data-toggle="table" data-toolbar="#toolbar" //指定关联的toolbar div iddata-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相关推荐

bootstrap table 复选框获取选中某几行的数据 + 可翻页
前期要点: 1.Set 集合的add,delete方法 2.bootstrap table 事件列表, 全选 :check-all.bs.table 取消全选: uncheck-all.bs ...
ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十三节--RBAC模式及ABP权限管理（附赠福利）
ABP+AdminLTE+Bootstrap Table权限管理系统一期 Github:https://github.com/Jimmey-Jiang/ABP-ASP.NET-Boilerplate- ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
Bootstrap table表格
Bootstrap table 使用类 Class="table" 既可让table美化样式 table 相关的Class 隔行换色 : table-striped ...
vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题
在mian.js导入的包如下:该bootstrap-table-treegrid.js需要去下载,在复制到jquery-treegrid/js/ 1 import $ from 'jquery' 2 ...
bootstrap Table API和一些简单使用方法
官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...
php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】
本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...
bootstrap table 表头与内容不对齐问题解决
bootstrap table 表头与内容不对齐问题解决参考文章: (1)bootstrap table 表头与内容不对齐问题解决 (2)https://www.cnblogs.com/sky-zk ...
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
bootstrap table php,bootstrap table Tooltip
bootstrap table Tooltip怎么用?直接上代码$("#tables").bootstrapTable({ search: true, pagination: tr ...

使用bootstrap-table简化CRUD

使用bootstrap-table简化CRUD相关推荐

最新文章

热门文章