BootstrapTable之添加自增序号、自定义删除功能

BootstrapTable之添加自增序号、自定义删除功能

---

前言

当我们的表格的原始数据中没有序号字段是，我们可以通过BootstrapTable为其设置自增序号并显示，同时我们也可以为表格添加自定的删除功能，来删除某一列数据。

---

一、添加自增序号

在自己数据列的最前端加上序号列即可，具体代码如下，其中title为姓名的列为自己数据中真实的第一列，而title为序号的列为添加的自增序号列，效果如下所示：

columns: [
                        // {
                        //     checkbox: true,
                        //     visible: true                  //是否显示复选框
                        // },

                        {
                            title: '序号',
                            align: "center",
                            width: 40,
                            formatter: function (value, row, index) {
                                return showIndex(value, row, index);
                            }
                        },
                        {
                            field : 'userName',
                            title : '姓名',
                            align : 'center',
                        },
                        {
                            field : 'sbuCode',
                            title : 'SBU',
                            align : 'center',
                        },
                        {
                            field : 'departmentSort',
                            title : '部门分类',
                            align : 'center',
                        },
                        {
                            field:'ID',
                            title: '操作',
                            width: 120,
                            align: 'center',
                            valign: 'middle',
                            formatter: actionFormatter
                        }
                ],

二、自定义删除功能

如上图中表格最后红色叉号的显示，即为自定义的删除功能，具体样式代码如下所示：

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

        var id = value;
        var result = "";

        userName = row.userName;
        sbuCode = row.sbuCode;
        departmentSort = row.departmentSort;
        result += '<a href="javascript:;" class="btn btn-xs btn-danger"  style="margin:5px" οnclick="DeleteUser(userName,sbuCode,departmentSort)" title="删除">';
        result += '<span class="glyphicon glyphicon-remove"></span></a>';
        return result;
    }

点击事件，具体代码如下所示：

    function DeleteUser(userName,sbuCode,departmentSort){
        var url = './rest/feePermission/deleteUser';
        $.ajax({
            url : url,
            type : "post",
            contentType : "application/json;charset=utf-8",
            data:JSON.stringify({
                userName:this.userName,
                sbuCode:this.sbuCode,
                departmentSort:this.departmentSort
            }),
            dataType : "json",
            success : function(data) {
                alert("删除成功!")
            } ,
            error : function(err) {
                alert("删除失败！")
            }
        });
    }

---

总结

BootstrapTable里面两个非常简单且实用的功能，记录一下，欢迎各位大佬指正。