按钮的作用

117 阅读1分钟
<!-- 顶部导航 -->

<div class="container">
    <div class="row">
        <table class="table">
        </table>
    </div>
</div>
<script src='./js/jquery.min.js'></script>

<script src="./js/tableExport.min.js"></script>
<script src="./js/jspdf.min.js"></script>
<script src="./js/jspdf.plugin.autotable.js"></script>

<script src='./js/bootstrap.min.js'></script>
<script src="./js/bootstrap-table.min.js"></script>
<script src="./js/bootstrap-table-print.min.js"></script>

<script src="./js/bootstrap-table-export.min.js"></script>

<script>
    $(function () {
        load();

        $(".table").on("click",".glyphicon-remove",function(){
            var id=$(this).parent().attr("data-id");
            // console.log(id);
            $.ajax({
                url: "http://localhost:3000/content",
                type: "DELETE",
                data:{_id:id},
                success:function(res){
                    if (res.status === 200) {
                        load();
                    }
                }
            })
        })

        function load() {
            $.ajax({
                url: "http://localhost:3000/content",
                type: "GET",
                success: function (res) {
                    if (res.status === 200) {
                        $('.table').bootstrapTable('destroy').bootstrapTable({
                            data: res.data,//属性名称
                            //url:""  "请求数据源"

                            pagination: true,//启用分页
                            pageSize: 3,//分页大小
                            //PageList:[5,10,20]

                            showToggle: "true",//切换列表
                            showPaginationSwitch: "true",//分页开关
                            showFullscreen: "true",//全屏
                            // showRefresh:"true",//刷新,仅支持url数据源
                            search: "true",//查询工具条
                            showSearchButton: true,//显示查询按钮

                            showPrint: "true",//打印按钮

                            showExport: "true",//导出按钮

                            columns: [{//列
                                field: '_id',//数据绑定的属性
                                title: '编号'//
                            }, {
                                field: 'title',
                                title: '标题'
                            }, {
                                field: 'content',
                                title: '内容'
                            }, {
                                field: 'top',
                                title: '是否置顶',
                                formatter:function(value,data){
                                    //value 当前列的值
                                    //data 当前行的数据
                                    return value?"是":"否";
                                }
                            },{
                                title:"操作",
                                formatter:function(value,data){
                                    return `<a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-edit text-primary"></span></a>
                                            <a href="#" data-id="${data._id}"><span class="glyphicon glyphicon-remove text-danger"></span></a>`;
                                }
                            }],

                            //自定义按钮集合
                            buttons: function () {
                                return {
                                    btnAdd: {
                                        icon: 'glyphicon glyphicon-plus',
                                        event: function () {
                                            alert('添加')
                                        },
                                        attributes: {
                                            title: "add"
                                        }
                                    },
                                    btnDel: {
                                        icon: 'glyphicon glyphicon-remove',
                                        event: function () {
                                            alert('删除')
                                        },
                                        attributes: {
                                            title: "remove"
                                        }
                                    }
                                }
                            }


                        })

                    }
                }
            })
        }
    })

</script>