bootstrapTable填坑记

一、获取整个表格的数据

function loadBorrowDetail(tableId, data, dataId) {
    $('#' + tableId).bootstrapTable('destroy');
    $('#' + tableId)
        .bootstrapTable(
            {
                id: dataId,
                data: data,
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                dataType: "json", // 服务器返回的数据类型
                cache: false,
                columns:
                    [
                        {
                            title: '编号',//标题
                            formatter: function (value, row, index) {
                                return index + 1;
                            },
                            width: '4%'
                        },
                        {
                            field: 'comment', // 列字段名
                            title: '参数', // 列标题
                            width: '15%'
                        },
                        {
                            field: 'devUserName', // 列字段名
                            title: '使用人', // 列标题
                            width: '7%',
                            formatter:function (value, row, index) {
                                value=user.hrmName + '(' + user.workcode + ')';
                                return value;
                            }
                        }
                    ]
            });
}

问题： 

$('#' + tableId).bootstrapTable('getData');

无法获得使用人的值，我发现有formatter的列，无法获取值

解决方法：

我去查看源码，也没看出所以然来。

于是自己写了一个方法：

// 基于bootstrapTable，获取的数据不包括没有field的列
function getTableData(tableId) {
    var array = new Array();
    var theadTr = $('#' + tableId).children("thead").children("tr")[0];
    var tbodyTr = $('#' + tableId).children("tbody").children("tr");
    var theadTh = $(theadTr).find("th");
    $(tbodyTr).each(function (i, tr) {
        var tds=$(tr).children("td");
        var obj=new Object();
        $(tds).each(function (index, td) {
            var val = $(td).text();
            var key = $($(theadTh)[index]).attr("data-field");
            var isnum = /^\d+$/.test(key)
            if(!isnum){
                obj[key]=val;
            }
        });
        array.push(obj);
    });
    return array;
}

二、获取含有input的列表的全部值

问题：通过上面的解决方法，我无法直接获取到input的值，尝试了下面的方法

我通过formatter返回html（输入框），我始终无法获取到值。

var rows = {
index : index, //更新列所在行的索引
field : "status", //要更新列的field
value : "正常" //要更新列的数据
}//更新表格数据 
$('#table_Id').bootstrapTable("updateCell",rows);

这个方式也是无效。

解决：

于是，我干脆不用什么他提供的方法，就基于dom获取到input的值，把值赋给td。在通过坑一的方法的获取到全部数据

---

当然，上面只是折中的处理方式，如果你们找到更好的方法，也告诉我一下啊，我也想知道。

---

三、bootstrapTable异步获取数据

问题：我有这样一个需求，前提是，不能使用bootstrapTable自带的获取表格全部数据的方法，我需要用坑一的解决方法获取表格全部数据，我需要获取每一行的数据的id但是不能显示在页面上。

解决之路：

首先，用

{
                            field: 'id', // 列字段名
                            title: '编号', // 列标题
                            width:'5%',
                           visible:false
}

 但是visible根本没有生成 编号 该列td。所以坑一的方法拿不到该列的值。

于是又使用

 {
                            field: 'id', // 列字段名
                            title: '编号', // 列标题
                            width:'5%',
                            cellStyle: function (value, row, index) {
                                return {css:{"display":"none"}}
                            }
                        }

发现，编号对应的th没有隐藏

再然后获取dom隐藏编号对应的th。

但是由于bootstrapTable 异步请求数据，我隐藏th的js语句，没有出现对应的效果。

配置下面代码

  ajaxOptions:{
                    asyn:false
                }

依然是异步。

所以，我们需要bootstrapTable 异步请求数据成功后的回调函数，在该函数中来执行隐藏th的js语句

bootstrapTable有两个回调函数onPostBody/onLoadSuccess。如果回调只是获取行数据，做一些逻辑，不涉及表格更新操作，可以使用onPostBody()，否则要使用onLoadSuccess()。