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

时间:2017-06-14 08:50:07

标签: ajax bootstrap-table

我的bootstrap-table init为

fcm = FCM.new('my key', timeout: TIMEOUT)
options = {
    data: {
        title: 'My title',
        message: 'My Message',
        event: 'message'

    },
    priority: 'high'
}


response = fcm.send(['fcm registered device id of ios'], options)

以下是格式函数

function typeFormatter(value,row,index){

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

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

2 个答案:

答案 0 :(得分:0)

据我所知,您希望使用异步Ajax调用来逐行每字段查找以加载“status”字段值。我不认为你可以使用格式化程序函数在bootstrap-table中实现这一点。

具体而言,您包含的示例typeFormatter()方法使用异步get()调用。按原样,它不会做你所希望的,但更多的是bootstrap-table格式化程序函数需要同步(立即返回一个值),这样你当前的解决方案将无法工作。

HTML-wise你可以对你希望的表单进行部分页面更新,但是bootstrap-table不支持这个。请参阅bootstrap-table methods documentation,特别是loadappendprependrefresh方法。这些方法只允许更新整个表的数据。

如果要实现所描述的单个查找,则应使用“From data”示例,使用Ajax调用更新数据,然后使用load方法刷新表格显示(请参阅this示例)。

答案 1 :(得分:0)

我知道这个主题已经过时了,但这是我解决这个问题的方法:

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>';
}