先看效果图：

先说说我的思路，首先在做点击选择或取消 的操作之前，要确保当前的列表已经加载完成，所以看加载操作是否为ajax请求，如果是的话，就可以把点击事件放在成功返回的代码中，一般来说这种list列表的加载都是异步的，但这里却没有这么做，而是通过分页请求的方式来加载的，原因是数据过多，会导致加载延迟问题，带来不好的用户体验。

function initTable(initTableAgentId) {
    $table.bootstrapTable({
        url: extentionUrl + "?agentId=" + initTableAgentId,
        method: 'GET',
        contentType: "application/x-www-form-urlencoded",
        dataType: 'json',
        toolbar: ".toolbar",
        toolbarAlign: 'left',
        clickToSelect: false,
        showRefresh: false,
        search: false,
        showToggle: true,
        showColumns: true,
        pagination: true,
        searchAlign: 'right',
        pageSize: 5,
        pageNumber: 1,
        queryParamsType: '',
        sidePagination: "server",
        queryParams: function queryParams(params) {
            var param = {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize
            };
            return param;
        },
        pageList: [5, 10, 25, 50, 100],
        columns: [
            {
                field: 'states',
                align: 'center'
            },
            {
                field: 'xh',
                align: 'center'
            },
            {
                field: 'tmRegistNO',
                align: 'center',
                formatter: function (value, row, index) {
                    return row.tmRegistNO;
                }
            },
            {
                field: 'applicantName',
                align: 'center',
                formatter: function (value, row, index) {
                    return row.paBusiness.applicantName;
                }
            },
            {
                field: 'applicationDate',
                align: 'center',
                formatter: function (value, row, index) {
                    return dateFormatter("yyyy-MM-dd hh:mm:ss", row.paBusiness.applicationDate);
                }
            },

            {
                field: 'businessStateName',
                align: 'center',
                formatter: function (value, row, index) {
                    return row.paBusiness.businessStateName;
                }
            },
            {
                field: 'payMoney',
                align: 'center',
                formatter: function (value, row, index) {
                    return row.paBusiness.payMoney;
                }
            },
            {
                field: 'officerFees',
                align: 'center',
                formatter: function (value, row, index) {
                    return row.paBusiness.officerFees;
                }
            },
            {
                field: 'regProfit',
                align: 'center',
                formatter: function (value, row, index) {
                    if (row.paBusiness.servicePriceDiscount == "" && row.paBusiness.servicePriceDiscount == null) {
                        return row.paBusiness.servicePrice - row.paBusiness.officerFees;
                    } else {
                        return row.paBusiness.payMoney - row.paBusiness.officerFees;
                    }
                }
            },
            {
                field: 'actions',
                align: 'center'
            }],
        responseHandler: function (res) {
            /*
             *  在ajax获取到数据，渲染表格之前，修改数据源
             返回的字符串中必须包含rows,以及total
             rows:列表数据
             total:总条数
             * */
            var paExtentions = [];
            if (res && res._embedded && res._embedded.paExtentions) {
                paExtentions = res._embedded.paExtentions;
            }
            var extentionList = {
                "rows": paExtentions,
                "total": res.page.totalElements
            };
            return extentionList;
        },
        formatShowingRows: function (pageFrom, pageTo, totalRows) {
            return "总续展数：" + totalRows + "条";
        },
        formatRecordsPerPage: function (pageNumber) {
            return pageNumber + " 条";
        }
    });

    //activate the tooltips after the data table is initialized
    $('[rel="tooltip"]').tooltip();

    $(window).resize(function () {
        $table.bootstrapTable('resetView');
    });
}

$table为当前图片中的表格。那么既然不是ajax请求，我们如何知道列表加载成功了呢？我们还是要看文档http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

我们发现了这么一个事件，当远程数据加载成功时触发成功。有了该事件，下一步就要点击该列表的某行，

再下一步就需要做选择和取消了，看下面的方法，
field:表示查询记录的名称
values:表示要检查行的值，

意思就是通过某列的字段的某些值来选择或取消选择某些行。

那么这就简单了，只需要创建一个Array数组，每次点击把指定列的值添加到该数组中，取消则从该数组中删除。此时我想到了，push和pop方法，一个是向数组添加数据，另一个是从数组中删除数据，看着这操作还像没啥问题，当时一测试发现添加到没啥问题，在做删除的时候，有时候可以正常删除，有时候需要点击两次才行，问题的根源还在于pop方法，该方法是删除最后一个添加到数组中的数据，push是向数组最后添加数据，由于这种添加删除的特性存在，所以导致了上面的不正常现象。

那么pop删除不行，那还要其他方法啊，splice

它需要一个删除项目的索引位置，和删除数量，删除数量好说，就是1么，那么索引要怎么弄，我只知道数组中具体的值，可不知道具体值所对应的索引啊。

我用了自定义函数的方法

/**
 * 堆代码 duidaima.com
 * 获取该数组的值所对应的数组索引下标
 * */
function contains(arrList, obj) {
    var i = arrList.length;
    while (i--) {
        if (arrList[i] === obj) {
            return i;// 返回的这个 i 就是元素的索引下标，
        }
    }
    return false;
}

自己看了代码后觉得也很好理解，但是自己却写不出来，还有很大的提升空间啊。

下面是具体代码：

/**
         * 列表初始化成功后,点击某行便选中多选框按钮,再次点击后取消
         * */
        $table.on('load-success.bs.table', function (data) {
            var arrList = new Array();
            $table.on("click-row.bs.table", function (e, row, $element) {
                // 判断当前id是否在该数组中
                if (IsInArray(arrList, row.id)) {
                    //存在就把该id从数组中移除，并且取消选中行
                    $table.bootstrapTable("uncheckBy", {field: "id", values: [row.id]});
                    //删除时，不可以使用pop方法，它删除的是数组中最后的值，
//                    arrList.pop(row.id);
                    //通过自定义的contains方法，来获得某个值对应的数组索引，
                    //最后通过splice方法进行删除
                    arrList.splice(contains(arrList,row.id), 1);
                } else {
                    //不存在，就把该id添加到该数组中，并且选中该行
                    $table.bootstrapTable("checkBy", {field: "id", values: [row.id]});
                    arrList.push(row.id);
                }
            });
        });

不过在ajax请求的情况下

$table.on('load-success.bs.table', function (data) {}

就不起作用了，而且导致下面的代码也不运行。原因可经是已经返回成功，load-success.bs.table，没有必要再写了，这里我是这么理解的，如有错误请指正。
下面是通过ajax请求的方式绑定事件，（这里没用到分页）

function initTable() {
        /**
         * 加载数据
         * */
        var url = "";
        var imgUrl = "";
        $.ajax(
            {
                type: "get",
                url: serviceItemsUrl,
                dataType: "json",
                success: function (result, status, xhr) {
                    var data = [];
                    if (result && result._embedded && result._embedded.paAgencyServices) {
                        data = result._embedded.paAgencyServices;
                    }
                    $table.bootstrapTable({
                        data: data,
                        dataType: 'json',
                        toolbar: ".toolbars",
                        toolbarAlign: 'left',
                        clickToSelect: false,
                        showRefresh: true,
                        search: true,
                        showToggle: true,
                        showColumns: true,
                        pagination: true,
                        searchAlign: 'right',
                        pageSize: 5,
                        pageList: [5, 10, 25, 50, 100],
                        columns: [
                            {
                                field: 'states',
                                align: 'center'
                            },
                            {
                                field: 'xh',
                                align: 'center'
                            },
                            {
                                field: 'serviceItemName',
                                align: 'center'
                            },
                            {
                                field: 'servicePrice',
                                align: 'center'
                            },
                            {
                                field: 'servicePriceDiscount',
                                align: 'center'
                            },
                            {
                                field: 'serviceItemDesc',
                                align: 'center'
                            },
                            {
                                field: 'actions',
                                align: 'center'
                            }],
                        formatShowingRows: function (pageFrom, pageTo, totalRows) {
                            //do nothing here, we don't want to show the text "showing x of y from..."
                        },
                        formatRecordsPerPage: function (pageNumber) {
                            return pageNumber + " 条";
                        }
                    });

                    //activate the tooltips after the data table is initialized
                    $('[rel="tooltip"]').tooltip();

                    $(window).resize(function () {
                        $table.bootstrapTable('resetView');
                    });
                    /**
                     * 列表初始化成功后,点击某行便选中多选框按钮,再次点击后取消
                     * */
                    var arrList = new Array();
                    $table.on("click-row.bs.table", function (e, row, $element) {
                            // 判断当前id是否在该数组中
                            if (IsInArray(arrList, row.id)) {
                                //存在就把该id从数组中移除，并且取消选中行
                                $table.bootstrapTable("uncheckBy", {field: "id", values: [row.id]});
                                //删除时，不可以使用pop方法，它删除的是数组中最后的值，
//                    arrList.pop(row.id);
                                //通过自定义的contains方法，来获得某个值对应的数组索引，
                                //最后通过splice方法进行删除
                                arrList.splice(contains(arrList,row.id), 1);
                            } else {
                                //不存在，就把该id添加到该数组中，并且选中该行
                                $table.bootstrapTable("checkBy", {field: "id", values: [row.id]});
                                arrList.push(row.id);
                            }
                        });
                },
                error: function (xhr, status, error) {
                    swal(status);
                }
            }
        );