添加删除-弹框

303 阅读1分钟

pagination: true,//启用分页

pageSize: 1, //分页大小 pageList:[1,2,3],// 分页大小 自定义

showToggle:true,//列表视图/表格视图 切换 showPaginationSwitch:true,//分页开关 是否启用分页 showFullscreen:true,//全屏显示 showRefresh:true,//刷新 仅支持url数据源 search:true,//启用查询 showSearchButton:true,//显示查询按钮 输入框+按钮

clickToSelect:true,//点击这一行选中

showPrint:true,//打印

showExport:true,//导出 clickToSelect:true点击这一行选中

点击“+”,显示弹框内容:

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title text-center">添加文章</h4>
                </div>
                <div class="modal-body">
                    <form action="#" method="POST" class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="title" class="col-sm-2 form-label">标题</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="title">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="content" class="col-sm-2 form-label">正文</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" name="" id="content" cols="30" rows="5"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="top" class="col-sm-2 form-label">置顶</label>
                                <div class="col-sm-10">
                                    <input type="checkbox" class="form-control" style="width: 34px; height: 34px;" id="top">
                                </div>
                            </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">确定</button>
                </div>
            </div>
        </div>
    </div>
    

61BWH}J4YJIN_FDA4%{4LHH.png

添加与删除

                                buttons: function () {
                                    return {
                                        btnAdd: {//添加
                                            icon: 'glyphicon glyphicon-plus',
                                            event: function () {
                                                // alert('添加')
                                                //....
                                                $("#modal-id").modal("show")
                                            },
                                            attributes: {
                                                title: "add",
                                                // "data-toggle":"modal",
                                                // href:'#modal-id',
                                            }
                                        },
                                        btnDel: {//删除
                                            icon: 'glyphicon glyphicon-remove',
                                            event: function () {
                                                //获取所有选中的行对应的绑定数据
                                                var ids = $(".table").bootstrapTable("getSelections");
                                                // console.log(ids);
                                                $.ajax({
                    url: "http://localhost:3007/content",
                    type: "DELETE",
                    data:{_id:ids},
                    success:function(res){
                        if(res.status === 200){
                            load();
                        }
                    }
                })
                                            },
                                            attributes: {
                                                title: "remove"
                                            }
                                        }
                                    }
                                }