前言

在 table 表格每一项后面添加操作按钮：修改/删除

希望实现效果：
1、点表格后面的修改按钮，能修改对应行的数据
2、点表格后面的删除按钮，删除对应的行

操作栏

先定义操作栏按钮

// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>
    var url = '/teacher/info';
    var columns = [
        {
            checkbox: true,
            visible: true                  //是否显示复选框
        },
        {
            field: 'id',
            title: 'ID'

        }, {
            field: 'name',
            title: '姓名'
        }, {
            field: 'age',
            title: '年龄',
            sortable: true
        },
         {
            field: 'tel',
            title: '电话'
        },
         {
             field:'operate',
             title: '操作',
             width: 120,
             align: 'center',
             valign: 'middle',
             formatter: actionFormatter
         }
    ];
    $("#table").bootstrapTable({
        toolbar: '#toolbar',                //自定义工具按钮
        url: url,                           //请求后台的URL（*）
        method: 'get',                      //请求方式（*）
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 20, 50, 100, 'All'], //可供选择的每页的行数（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                      //初始化加载第一页，默认第一页
        search: true,                       //是否显示表格搜索
        showSearchButton: true,             //搜索确定按钮
{#        showSearchClearButton: true,       //清空输入框#}
{#        singleSelect: true,#}
        clickToSelect: true,
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数决定表格高度
        classes: "table table-bordered table-striped",
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        columns: columns,                   //列参数
        //detailView: true,                  //是否显示父子表
        //得到查询的参数，会在url后面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
        queryParams: function (params) {
            // params对象包含：limit, offset, search, sort, order
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp;
            temp = {
                page: (params.offset / params.limit) + 1,   //页码,  //页码
                size: params.limit   //页面大小
                //查询框中的参数传递给后台
                //search_kw: $('#search-keyword').val(), // 请求时向服务端传递的参数
            };
            return temp;
        }

    });
    //操作栏的格式化
    function actionFormatter(value, row, index) {

            var result = "";
            result += '<a href="javascript:;" class="btn btn-xs btn-success" style="margin:5px" onclick="GetViewById(' + index + ')" view=\'view\')" title="查看">';
            result += '<span class="glyphicon glyphicon-search"></span></a>';
            result += '<a href="javascript:;" class="btn btn-xs btn-info" style="margin:5px" onclick="EditViewById(' + index+')" title="编辑">';
            result += '<span class="glyphicon glyphicon-pencil"></span></a>';
            result += '<a href="javascript:;" class="btn btn-xs btn-danger"  style="margin:5px" onclick="DeleteByIds(' + row.id + ')" title="删除">';
            result += '<span class="glyphicon glyphicon-remove"></span></a>';
            return result;
        }
</script>

操作栏上的标签点击后分别调用

 onclick="EditViewById(' + index +')" title="编辑"
 onclick="DeleteByIds(' + row.id + ')" title="删除"

其中index参数是行在当前页面的索引，从0开始
row是当前行的数据，row.id是获取当前行的id，调删除接口的时候，只需知道删除的id项就可以

定义编辑EditViewById

<script>
    //定义表格操作编辑按钮 title="编辑"
    function EditViewById(index){
        alert(index);
{#        // 调出modal 框#}
        var row = $("#table").bootstrapTable('getData')[index];
        $("#modal_id").val(row.id);
        $("#modal_name").val(row.name);
        $("#modal_age").val(row.age);
        $("#modal_tel").val(row.tel);
        $("#myModal").modal();
    }
</script>

实现效果，当点编辑按钮后，会根据当前行获取到索引index。

根据索引从bootstrapTable('getData’)中得到对应行的数据。

定义保存按钮，发 POST 请求，接口地址: /teacher/info

// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/

<script>
    $("#sava-edit-btn").click(function(){
        $.ajax({
            cache: false,
            type: "POST", //方法类型
            dataType: "json",  //预期服务器返回的数据类型
            url: "/teacher/info", //url
            data: $("#model-form").serialize(),
            success: function (data) {
                console.log(data);//打印服务端返回的数据(调试用)
                if (data.msg == "success") {
                    {#关闭模态框并清除框内数据，否则下次打开还是上次的数据#}
                    $('#myModal').modal('hide');
                    {# 判断确实正确入库之后提示#}
                    console.log('提交数据成功');
                    {#刷新表格数据#}
                    $("#table").bootstrapTable('refresh');

                }
            },
            error: function () {
                alert('提交失败');
            }
        });
});
</script>

定义删除DeleteByIds

当点确定删除按钮的时候，需从模态框里面得到需要删掉的id值，可以在模态框写一个隐藏的input标签，把id值写进去，后面掉确定删除按钮的时候，就可以直接发请求传到服务端

{#    //删除按钮模态框#}
    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="delModalLabel">操作提示:</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="del_ids" name="ids" value="">
                    <h5 id="delBody">确定要删除选中的数据？</h5>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="deleteIds">确定删除</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

点删除按钮，需要拿到对应行的id值,调出模态框

<script>
    //定义表格操作编辑删除 title="删除"
    function DeleteByIds(id){
        var ids = [];
        ids.push(id);
        //alert(JSON.stringify(ids));
        //把ids的值给到隐藏输入框
        $('#del_ids').val(JSON.stringify(ids));
        //调出删除模态框
        $("#delModal").modal();
    }
</script>

删除接口可以和批量删除接口公用同一个，ids传的值写一个arry数组格式[1]

定义保存按钮，发 DELETE 请求，接口地址: /teacher/info（跟批量删除按钮，公用一个删除接口）

// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/

<script>
// 点确定按钮发delete请求
$("#deleteIds").click(function() {
    var del_ids = $('#del_ids').val();
    $.ajax({
        cache: false,
        url: "/teacher/info", //url
        type: "DELETE",  //方法类型
        contentType:"application/json",//设置请求参数类型为json字符串
        dataType: "json",  //预期服务器返回的数据类型
        data: JSON.stringify({ids: del_ids}),
        success: function (result) {
            //隐藏模态框
            $("#delModal").modal('hide');
            if (result.msg == "success"){
                // 此处可以显示一个toastr消息
                alert('删除成功！')
            }
            else {
                alert("删除失败")
            }
        },
        error: function () {
                $("#delModal").modal('hide');
                // 此处可以显示一个toastr消息
                alert("删除失败,服务器异常")
            }
    });
})
</script>

另外一种实现方式比这个更简单，参考下一篇添加events事件https://www.cnblogs.com/yoyoketang/p/15270208.html

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。