数据的删除和添加

添加框：

        <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">添加文章</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 control-label">标题</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="title">
                            </div>
                        </div>   
                        <div class="from-group">
                            <label for="content" class="col-sm-2 control-label">正文</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="content" cols="30" rows="5"></textarea>
                            </div>
                        </div> 

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

删除和添加代码：

                                buttons:function(){
                                    return{
                                        btnAdd:{
                                        icon: 'glyphicon glyphicon-plus',
                                        event:function() {//添加
                                            // 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"
                                            }
                                        }
                                }
                                }

点击后执行的代码：

                var title=$(this).closest(".modal-content").find("#title").val();
                var content=$("#content").val();
                var top=$("#top").val()==="on";

                $.ajax({
                    url: "http://localhost:3007/content",
                    type: "POST",
                    // data:{title:title,content:content,top:top},可以简写成下面那个 前提是相同
                    data:{title,content,top},
                    success:function(res){
                        console.log(res);
                        if(res.status === 200){
                            $("#modal-id").modal("hide")
                            load();
                        }
                    }
                })

            })

删除效果：

实现点击复选框可以同时删除多个数据 添加效果： 实现点击加号输入内容后点击确定，添加的内容显示在页面的表格中

添加内容后的表格：