如何用 ajax 加载数据替换 bootstrap-table 列的值

Question

我的bootstrap-table初始化为

$(function() {
// bootstrap table初始化
$table.bootstrapTable({
    url: '${basePath}/manage/carmaster/list',
    height: getHeight(),
    striped: true,
    search: true,
    showRefresh: true,
    showColumns: true,
    minimumCountColumns: 2,
    clickToSelect: true,
    detailView: true,
    detailFormatter: 'detailFormatter',
    pagination: true,
    paginationLoop: false,
    sidePagination: 'server',
    silentSort: false,
    smartDisplay: false,
    escape: true,
    searchOnEnterKey: true,
    idField: 'id',
    sortName: 'id',
    sortOrder: 'desc',
    maintainSelected: true,
    toolbar: '#toolbar',
    columns: [
        {field: 'ck', checkbox: true},
        {field: 'id', title: '编号', sortable: true, align: 'center'},
        {field: 'brand', title: '品牌'},
        {field: 'category', title: '车系'},
        {field: 'categoryDetail', title: '车名'},
        {field: 'frameNo', title: '车架号'},
        {field: 'engineNo', title: '发动机号'},
        {field: 'status', title: '状态', align: 'center',formatter: 'typeFormatter'},
        {field: 'effectiveDate', title: '投入时间',formatter: 'timeFormatter'},
        {field: 'quitDate', title: '退出时间',formatter: 'timeFormatter'},
        {field: 'useBranch', title: '使用网点'},
        {field: 'plateNo', title: '车牌号'},
        {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', clickToSelect: false}
    ]
});

下面是格式化函数

函数 typeFormatter（值、行、索引）{

console.log(value);
$.get('${basePath}/manage/dict/getCodeDesc',{dictId:value,tableName:'T_CAR_STATUS'},function(data){
    return '<span class="label label-primary">'+data+'</span>';
});

我想用 ajax 加载数据来替换类型代码，但它同样不起作用

Answer 1

我了解到您想使用异步 Ajax 调用来使用每行每字段查找来加载 "status" 字段值。我认为您无法在 bootstrap-table 中使用格式化程序函数实现此目的。

具体来说，您包含的示例 typeFormatter() 方法使用异步 get() 调用。照原样，它不会做你希望的事情，但更重要的是 bootstrap-table 格式化程序函数需要同步（return 立即一个值）所以你当前的解决方案将不工作。

HTML-wise 你可以做你希望的形式的部分页面更新，但 bootstrap-table 不支持这个。请参阅 bootstrap-table methods documentation，特别是 load、append、prepend 和 refresh 方法。这些方法仅允许更新 整个 table 的 数据。

如果您想实现您描述的单个查找，您应该使用“From data" example, update the data using Ajax calls and then refresh the table display using the load method (see this 示例”。

Answer 2

我知道这个话题很老，但这是我对这个问题的解决方案：

function imgFormatter(value, row, index) {
     if (row.Img !== undefined && row.Img !== null) {
         return getImage(row,row.Img);
      } else if (row.ImgId > 0) {
             $.ajax({
                 type: "POST",
                 url: url,
                 data: { id: row.ImgId },
                 dataType: "json",
                 success: function(data) {
                     var newRow = row;
                     newRow.Img = data.Img;
                     $(tableId).bootstrapTable('updateRow', { index: index, row: newRow});
                 },
                 error: function(er) {
                      params.error(er);
                 }
            });
     } else {
          return getImage(row,defaultImage);
     } 
};
function getImage(row,base64Img){
   if (row.IsAdmin) {
        return '<div class="image"><div class="img"><img src="data:image/jpg;base64,' +
            base64Img +
            '" class="img-circle" width="50px"><i class="fas fa-asterisk icon-remove delete"data-toggle="tooltip" data-container="body" title="Admin"></i></div></div>';
    }
    return '<div class="image"><div class="img"><img src="data:image/jpg;base64,' +
        base64Img +
        '" class="img-circle" width="50px"></div></div>';
}

如何用 ajax 加载数据替换 bootstrap-table 列的值

how to replace bootstrap-table column's value by ajax load data

ajax

bootstrap-table