bootstrap-table 实现表格增删改查

来源：互联网发布：oracle sql distinct 编辑：程序博客网时间：2024/05/16 07:34
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>
阅读全文
0 0