Bootarp-table添加删除

添加

前端：

HTML

<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="form-group">
                            <label for="content" class="col-sm-2 control-label">正文</label>
                            <div class="col-sm-10">
                                <textarea cols="30" rows="5" id="content" class="form-contron"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="content" class="col-sm-2 control-label">置顶</label>
                            <div class="col-sm-10">
                                <input type="checkbox" class="form-control" id="top" style="width: 20px;height: 20px;">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">确定</button>
                        </div>

                    </form>
                    

js

$("#modal-id").on("click", ".btn-primary", function () {
                var title = $(this).closest(".modal-content").find("#title").val();
                var content = $("#content").val();
                var top = $("#top").prop("checked");
                // console.log(top);
                $.ajax({
                    url: "http://localhost:3000/content",
                    type: "POST",
                    data: { title: title, content: content, top: top },
                    success: function (res) {
                        if (res.status === 200) {
                            load();
                        }
                    }
                })
            })

点击确定按钮，获得文本框的val()与复选框的checked属性，使用$.ajax将对应数据传入到后端的post中，成功后刷新。

后端:

    router.post("/content", async (ctx) => {//添加
        try {
            const data = await contentModel.create(ctx.request.body);
            return success(ctx, data);
        } catch (error) {
            return fail(ctx, error);
        }
    })

后端接收数据并刷新页面

删除

前端

js

            btnDel: {
                                            icon: 'glyphicon glyphicon-remove',
                                            event: function () {
                                                //选区所有选中行对应的绑定数据
                                                var ids = $(".table").bootstrapTable("getSelections");
                                                // console.log(ids);
                                                if (ids.length !== 0) {
                                                    $.ajax({
                                                        url: "http://localhost:3000/content",
                                                        type: "DELETE",
                                                        data: { _id: ids },
                                                        success: function (res) {
                                                            console.log(res);
                                                            if (res.status === 200) {
                                                                load();
                                                            }
                                                        }
                                                    })
                                                }
                                            },

点击按钮选取.table内的所有选中旱行对应的绑定数据，选中数据总数不为0时，使用$.ajax将数据以数组的形式传入后端中

后端

    router.delete("/content", async (ctx) => {//删除
        try {
            var _id=ctx.request.body._id;
            let data=[];
            if(_id instanceof Array){
                data= await contentModel.deleteMany({_id:{$in:_id}});
            }else{
                data= await contentModel.deleteOne({_id:_id});
            }
            return success(ctx, data);
        } catch (error) {
            return fail(ctx, error);
        }
    })

后端执行删除操作，其中deleteOne只能删除一条，而deleteMany能将以数组形式传入到其中的数据全部删除。