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

Question

my bootstrap-table init as

$(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}
    ]
});

and the follow is the format function

function typeFormatter(value, row, index) {

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

i wan to replace the type code by ajax load data,but it sames does not work

Answer 1

I understand that you want to use a per-row per-field lookup using an asynchronous Ajax call to load "status" field values. I don't think you can achieve this in bootstrap-table using the formatter functions.

Specifically, the sample typeFormatter() method you included uses an asynchronous get() call. As-is, it does not do what you are hoping, but more than that the bootstrap-table formatter functions need to be synchronous (return a value immediately) so your current solution will not work.

HTML-wise you can do partial-page updates of the form you hope for, but bootstrap-table does not support this. See the bootstrap-table methods documentation, in particular the load, append, prepend and refresh methods. These methods allow the updating of the entire table's data only.

If you want to achieve the individual lookups that you describe, you should use the "From data" example, update the data using Ajax calls and then refresh the table display using the load method (see this example).