前端（一）bootstrap-table

最新推荐文章于 2022-04-05 18:21:33 发布
庄舟
最新推荐文章于 2022-04-05 18:21:33 发布
阅读量269
点赞数
分类专栏：前端
本文链接：https://blog.csdn.net/JonWu0102/article/details/86071614
版权
前端专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!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>API接口</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!--<link rel="stylesheet" href="../css/bootstrap-3.3.7.min.css">-->
    <link rel="stylesheet" href="../css/bootstrap-3.3.7.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table-1.12.1.min.css">
</head>
<body>
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="wendang1.html">文档1</a></li>
    <li role="presentation"><a href="wendang2.html">文档2</a></li>
</ul>
<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1" for="txt_search_root_keyword">关键字</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="txt_search_root_keyword">
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:100px" id="btn-query" class="btn btn-primary">查询
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <table id="data-table" data-toggle="data-table">
    </table>

    <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label id="lb_id" hidden="hidden"></label>
                            <label for="txt_root">名字</label>
                            <input class="form-control" id="txt_root" disabled="disabled">
                        </div>
                        <div class="form-group">
                            <label for="txt_summary">简要</label>
                            <input class="form-control" id="txt_summary">
                        </div>
                        <div class="form-group">
                            <label for="txt_remark">备注</label>
                            <input class="form-control" id="txt_remark">
                        </div>
                        <div class="form-group">
                            <label for="drop_valid">有效</label>
                            <select class="form-control" id="drop_valid">
                                <option>T</option>
                                <option>F</option>
                            </select>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="btn-save">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="myModalExample" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body" id="idViewExample">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../js/common/jquery-3.3.1.min.js"></script>
<script src="../js/common/bootstrap-3.3.7.min.js"></script>
<script src="../js/common/bootstrap-table-1.12.1.min.js"></script>
<script src="../js/common/bootstrap-table-zh-CN-1.12.1.min.js"></script>

<script type="text/javascript">
    var $table = $('#data-table');

    $(window).resize(function () {
        //防止表头与表格不对齐
        $table.bootstrapTable('resetView');
    });

    $(function () {
        //使用严格模式
        "use strict";
        //表格初始化
        tableInit();
        $table.bootstrapTable('hideLoading');//隐藏加载
    })

    var queryUrl = '/doc/getApiDoc'

    function tableInit() {
        /**
         * 初始化Table
         */
        //先销毁表格
        $table.bootstrapTable('destroy');
        //再初始化表格
        $table.bootstrapTable({
            //请求地址,此处数据为本地加载
            url: queryUrl,
            //请求方式
            method: "POST",
            //请求内容类型
            contentType: "application/x-www-form-urlencoded",
            //数据类型
            dataType: "json",
            //table高度：如果没有设置，表格自动根据记录条数觉得表格高度
            // height: '582',
            //是否显示行间隔色
            striped: true,
            //是否启用排序
            sortable: true,
            //排序方式
            sortOrder: "asc",
            //是否使用缓存
            cache: false,
            //每行的唯一标识
            uniqueId: "id",
            //指定工具栏
            toolbar: "#toolbar",
            //显示刷新按钮
            showRefresh: true,
            //切换显示样式
            showToggle: true,
            //默认显示详细视图
            cardView: false,
            //是否显示搜索
            search: true,
            //是否显示分页
            pagination: true,
            //是否启用点击选中行
            clickToSelect: true,
            //最少要显示的列数
            minimumCountColumns: 2,
            //显示隐藏列
            showColumns: true,
            //cell没有值时显示
            undefinedText: '-',
            //分页方式：client客户端分页，server服务端分页
            sidePagination: "server",
            //每页的记录行数
            pageSize: 50,
            //初始化加载第1页，默认第1页
            pageNumber: 1,
            //可供选择的每页的行数
            pageList: "[20, 50, 100, 500, 1000]",
            paginationFirstText: "首页",
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            paginationLastText: "末页",
            //按钮样式
            buttonsClass: 'btn',
            //分页器class
            iconSize: 'pager',
            //查询条件
            queryParams: queryParams,
            //表头
            columns: [
                {
                    field: 'root',
                    title: '接口',
                    sortable: true
                },
                {
                    field: 'summary',
                    title: '简要',
                    sortable: true
                },
                {
                    field: 'remark',
                    title: '备注'
                },
                {
                    field: 'example',
                    title: '样例',
                    align: 'center',
                    events: window.operateEvents,
                    formatter: addViewFunction
                },
                {
                    field: 'createTime',
                    title: 'createTime',
                    sortable: true,
                    formatter: utcDateFormatter
                },
                {
                    field: 'updateTime',
                    title: 'updateTime',
                    sortable: true,
                    formatter: utcDateFormatter
                },
                {
                    field: 'valid',
                    title: '有效'
                },
                {
                    title: '操作',
                    field: 'id',
                    align: 'center',
                    events: window.operateEvents,
                    formatter: addEidtFunction
                }],
            onLoadSuccess: function (res) {//可不写
                //加载成功时
                console.log(res);
            }, onLoadError: function (statusCode) {
                return "加载失败"
            }, formatLoadingMessage: function () {
                //正在加载
                return "加载中...";
            }, formatNoMatches: function () {
                //没有匹配的结果
                return '无符合条件的记录';
            }
        })
    }

    //操作事件建议卸载内部,防止第一次点击操作不生效
    window.operateEvents = {
        /**
         * 注册操作按钮事件
         */
        'click #TableBtnView': function (e, value, row, index) {
            $("#idViewExample").text(row.example);
        },
        'click #TableBtnEidt': function (e, value, row, index) {
            $("#lb_id").val(row.id);
            $("#txt_root").val(row.root);
            $("#txt_summary").val(row.summary);
            $("#txt_description").val(row.description);
        }
    };

    function addViewFunction(value, row, index) {
        return '<a id="TableBtnView" href="javascript:void(0)" data-toggle="modal" data-target="#myModalExample">查看</a>';
    }

    function addEidtFunction(value, row, index) {
        return '<a id="TableBtnEidt" href="javascript:void(0)" data-toggle="modal" data-target="#myModal">编辑</a>';

    }

    //得到查询的参数
    function queryParams(params) {
        /**
         * 查询条件与分页数据
         * @return {object} 返回参数对象
         */
        params.pageNum = this.pageNumber;
        params.search = params.search
        if (params.search == "" || params.search == null) {
            params.search = $("#txt_search_root_keyword").val();
        }

        return params;
    }

    function refresh() {
        /**
         * 刷新表格数据
         */
        $table.bootstrapTable('refresh');

    }

    $("#btn-query").on("click", function () {
        /** * 查询 */
        refresh();
    })

    $("#btn-save").on("click", function () {
        var data = {};
        data.id = $("#lb_id").val();
        data.root = $("#txt_root").val();
        data.summary = $("#txt_summary").val();
        data.remark = $("#txt_remark").val();
        data.valid = $("#drop_valid").val();
        var saveUrl = '/doc/saveApiDoc';
        $.ajax({
            url: saveUrl,
            type: "post",
            dateType: "json",
            contentType: "application/json",
            data: JSON.stringify(data),
            success: function (msg) {
                alert("保存成功");
                $('#myModal').modal('hide');
                refresh();
            },
            //请求错误
            error: function () {
                alert("保存失败");
            }
        })
    })

    function utcDateFormatter(value, row, index) {
        if (!value) {
            return '-';
        }

        function formatFunc(str) {    //格式化显示
            return str > 9 ? str : '0' + str
        }

        var date2 = new Date(value);     //这步是关键
        var year = date2.getFullYear();
        var mon = formatFunc(date2.getMonth() + 1);
        var day = formatFunc(date2.getDate());
        var hour = date2.getHours();
        hour = formatFunc(hour);
        var min = formatFunc(date2.getMinutes());
        var dateStr = year + '-' + mon + '-' + day + ' ' + hour + ':' + min;
        return dateStr;
    }

</script>
</html>