🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
基本上可以满足,搜索、排序,分页、编辑、勾选、字表等等需求 ## 效果 ![](https://img.kancloud.cn/ec/a2/eca25af800a60fd71b65256a080a0ae9_1924x797.png) ## 源码 ``` <!doctype html> <html lang="en"> <head> <!--Required meta tags--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title> Hello,Bootstrap Table! </title> <!--由于bootstrap4是没有glyphicons图标的,所以去找到bootstrap3.3.7然后将里面图标相关的内容单独拎出来用,因为bootstrap-editable需要这个--> <link rel="stylesheet" href="static/bootsrap3.3.7-glyphicons/css/bootstrap-glyphicons.css"> <link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"> <script src="static/jQuery3.3.1/jquery-3.3.1.min.js"> </script> <!--<script src="static/popper1.16.0/popper.min.js"></script>--> <link rel="stylesheet" href="static/bootstrap4.4.1/bootstrap.min.css"> <script src="static/bootstrap4.4.1/bootstrap.min.js"> </script> <link rel="stylesheet" href="static/bootstrap-table/bootstrap-table-master/dist/bootstrap-table.css"> <script src="static/bootstrap-table/bootstrap-table-master/dist/bootstrap-table.js"> </script> <script src="static/bootstrap-table/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.js"> </script> <!--实现表格编辑--> <link href="static/bootstrap3-editable-1.5.1/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" /> <script src="static/bootstrap3-editable-1.5.1/bootstrap3-editable/js/bootstrap-editable.js"> </script> <script src="static/bootstrap-table/bootstrap-table-master/dist/extensions/editable/bootstrap-table-editable.js"> </script> <style> .older{background-color:rgba(255,0,0,0.1)} </style> </head> <body> <button class="btn btn-success btn-sm" onclick="getSeled()"> 获得选中项 </button> <table id="table_1"> </table> <script> $(function() { $('#table_1').bootstrapTable({ url: "server.php", idField: "id", sidePagination: 'server', method: 'get', pagination: true, search: true, sortable: true, pageNumber: 1, pageSize: 2, pageList: [2, 4], showColumns: true, showRefresh: true, minimumCountColumns: 2, showToggle: true, cardView: false, editable: true, detailView: true, onEditableShown: function(field, row, $el, editable) { console.log("onEditableShown", row) }, onEditableHidden: function(field, row, $el, reason) { console.log("onEditableHidden", row) }, onEditableSave: function(field, row, oldValue, $el) { console.log("onEditableSave", row) }, onClickRow: function(row, tr) {}, onClickCell: function(field, value, row, $element) {}, onDblClickCell: function(field, value, row, $element) {}, onExpandRow: function(index, row, $detail) { var cur_table = $detail.html('<table></table>').find('table'); $(cur_table).bootstrapTable({ url: 'server.php', columns: [{ field: 'name', title: '姓名', sortable: true, }] }) }, rowStyle: function(row, index) { strclass = ''; if (row.age > 80) strclass = 'older'; return { classes: strclass } }, queryParams: function(params) { params.status = '已支付'; return params }, columns: [{ checkbox: true }, { title: '#', align: "center", width: 40, formatter: function(value, row, index) { return index + 1 } }, { field: 'name', title: '姓名', sortable: true, }, { field: 'age', title: '年龄', sortable: true, editable: { type: 'select', source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, { value: 3, text: "行政部" }], mode: "inline", url: "server.php", success: function(res) { console.log("success", res) }, validate: function(v) { if (isNaN(v)) { return '阈值必须为数字' } if (!v) { return '阈值不能为空' } } } }, { field: 'sex', title: '性别', }, { title: "操作", formatter: function(value, row, index) { return '<button class="btn btn-info btn-sm detail">查看更多</button>' }, events: { 'click .detail': function(e, value, row, index) { console.log(row) } } }] }) }); function getSeled() { var data = $("#table_1").bootstrapTable('getSelections'); console.log("getSeled", data) } </script> </body> </html> ``` 链接:https://pan.baidu.com/s/1JO-UEDPH5aUy8DHpi39yqw 提取码:05jd