bootstrap-table 实现表格增删改查

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>
相关文章
相关标签/搜索