bootstrap-table 實現表格增刪改查
阿新 • • 發佈：2019-02-13
bootstrap、bootstrap-table官網：http://bootstrap-table.wenzhixin.net.cn/documentation/
相關cs js 引用dns地址： http://www.bootcdn.cn/bootstrap/ 下載到本地載入速度會很快
最終效果： 分頁、增刪改查，排序因為用不上就沒加
不足： 查了一堆資料，終於從前端小白，搗鼓出來了，但點選編輯想實現的是直接表格行內可編輯化，焦點離開後自動儲存，有空再戰
後端還有提供增刪改查介面
<!DOCTYPE html> <%@ page language="java" pageEncoding="utf-8" %> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <html> <head> <base href="<%=basePath%>"> <title>apollo-platform</title> <meta charset="utf-8"> <link rel="stylesheet" href="/bootstrap-table-examples-master/assets/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/bootstrap-table-examples-master/assets/bootstrap-table/bootstrap-table.css"> <style> .update { color: #333; margin-right: 5px; } .remove { color: red; margin-left: 5px; } .alert { padding: 0 14px; margin-bottom: 0; display: inline-block; } </style> <script src="/bootstrap-table-examples-master/assets/jquery.min.js"></script> <script src="/bootstrap-table-examples-master/assets/bootstrap/js/bootstrap.min.js"></script> <script src="/bootstrap-table-examples-master/assets/bootstrap-table/bootstrap-table.js"></script> <%--<script src="/bootstrap-table-examples-master/ga.js"/>--%> </head> <body> <div class="container"> <h1>平臺管理</h1> <p class="toolbar"> <a class="create btn btn-default" href="javascript:">Create Item</a> <span class="alert"></span> </p> <table id="table" data-show-refresh="true" data-show-columns="true" data-search="true" data-query-params="queryParams" data-toolbar=".toolbar"> <thead> <tr> <th data-field="desc">平臺名</th> <th data-field="channel">id</th> <th data-field="appcode">appcode</th> <th data-field="cliientType">cliientType</th> <th data-field="responseType">responseType</th> <th data-field="dmpType">dmpType</th> <th data-field="idea">idea</th> <th data-field="idea2">idea2</th> <th data-field="state">state</th> <th data-field="action" data-align="center" data-formatter="actionFormatter" data-events="actionEvents">Action </th> </tr> </thead> </table> </div> <div id="modal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title"></h4> </div> <div class="modal-body"> <div class="input-group"> <span class="input-group-addon">desc</span> <input class="form-control" type="text" name="desc" id="desc"> </div> <div class="input-group"> <span class="input-group-addon">channel</span> <input class="form-control" type="number" name="channel" id="channel"> </div> <div class="input-group"> <span class="input-group-addon">appcode</span> <input class="form-control" type="text" name="appcode" id="appcode"> </div> <div class="input-group"> <span class="input-group-addon">cliientType</span> <input class="form-control" type="text" name="cliientType" id="cliientType"> </div> <div class="input-group"> <span class="input-group-addon">responseType</span> <input class="form-control" type="text" name="responseType" id="responseType"> </div> <div class="input-group"> <span class="input-group-addon">dmpType</span> <input class="form-control" type="text" name="dmpType" id="dmpType"> </div> <div class="input-group"> <span class="input-group-addon">idea</span> <input class="form-control" type="text" name="idea" id="idea"> </div> <div class="input-group"> <span class="input-group-addon">idea2</span> <input class="form-control" type="text" name="idea2" id="idea2"> </div> <div class="input-group"> <span class="input-group-addon">state</span> <input class="form-control" type="text" name="state" id="state"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary submit">Submit</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script> var $table = $('#table').bootstrapTable({ url: "platform/getList", toolbar: '#toolbar', //工具按鈕用哪個容器 //striped: true, //是否顯示行間隔色 cache: false, //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*） pagination: true, //是否顯示分頁 sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 //queryParams: postQueryParams,//傳遞引數（*） //sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） pageSize: 10, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） strictSearch: true, // height: table_h, //行高，如果沒有設定height屬性，表格自動根據記錄條數覺得表格高度,設定了行高後編輯時標頭寬度不會隨著下面的行改變，且顏色也不會改變？？？？ uniqueId: "id", //每一行的唯一標識，一般為主鍵列 cardView: false, //是否顯示詳細檢視 detailView: false, //是否顯示父子表 paginationHAlign: "left", singleSelect: true, search: true, //是否顯示錶格搜尋，此搜尋是客戶端搜尋，不會進服務端 //strictSearch: true, showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示重新整理按鈕 clickToSelect: true, //是否啟用點選選中行 paginationPreText: "<<", paginationNextText: ">>" }), $modal = $('#modal').modal({show: false}), $alert = $('.alert').hide(); $(function () { // create event $('.create').click(function () { showModal($(this).text()); }); $modal.find('.submit').click(function () { var row = {}; $modal.find('input[name]').each(function () { row[$(this).attr('name')] = $(this).val(); }); $.ajax({ // url: API_URL + ($modal.data('id') || ''), url: "platform/add", type: "post", // type: $modal.data('id') ? 'put' : 'post', contentType: 'application/json', data: JSON.stringify(row), success: function () { $modal.modal('hide'); $table.bootstrapTable('refresh'); showAlert(($modal.data('id') ? 'Update' : 'Create') + ' item successful!', 'success'); }, error: function () { $modal.modal('hide'); showAlert(($modal.data('id') ? 'Update' : 'Create') + ' item error!', 'danger'); } }); }); }); function queryParams(params) { return {}; } function actionFormatter(value) { return [ '<a class="update" href="javascript:" title="Update Item"><i class="glyphicon glyphicon-edit"></i></a>', '<a class="remove" href="javascript:" title="Delete Item"><i class="glyphicon glyphicon-remove-circle"></i></a>', ].join(''); } // update and delete events window.actionEvents = { 'click .update': function (e, value, row) { showModal($(this).attr('title'), row); }, 'click .remove': function (e, value, row) { if (confirm('Are you sure to delete this item?')) { $.ajax({ url: "platform/del?appcode=" + row.code, type: 'delete', success: function () { $table.bootstrapTable('refresh'); showAlert('Delete item successful!', 'success'); }, error: function () { showAlert('Delete item error!', 'danger'); } }) } } }; function showModal(title, row) { row = row || { id: '', state: 0 }; // default row value $modal.data('id', row.code); $modal.find('.modal-title').text(title); for (var name in row) { $modal.find('input[name="' + name + '"]').val(row[name]); } $modal.modal('show'); } function showAlert(title, type) { $alert.attr('class', 'alert alert-' + type || 'success') .html('<i class="glyphicon glyphicon-check"></i> ' + title).show(); setTimeout(function () { $alert.hide(); }, 3000); } </script> </body> </html>