来自 Ajax 响应的 bootstrap-table 中的多个图像

Question

我收到来自 ajax 调用的响应，我需要从中创建一个 bootstrap-table。响应内部是一个数组，其中包含一些图像数据（路径、名称等）。我尝试将响应数据提供给 bootstrap-table。除了数组中的图像外，所有数据都很好，因为我只得到一个值，因此只显示一个文件。

我的函数/Ajax调用是：

function printCatchTable(){
var $table = $('#TableLastCaught');

$.ajax({
type: "GET",
url: '/api/lastcaught',
success: function(response) {

for(var i =0;i < response.length ;i++){
var item = response[i];
var picinfos = item.picinfos;

for(var x in picinfos){
var filename = picinfos[x].filename;
}

faengeTableData.push({
_id: item._id,
date: item.datum,
time: item.uhrzeit,
pics: filename,
}

$table.bootstrapTable({data: faengeTableData});
$table.bootstrapTable('togglePagination');
}   
})
} 

function imageFormatter(value, row) {
    return '<img src="files/'+value+'" />';
    }

这是我收到的数据：

{
   "_id":"5c81253a4a582827f09969a7",
   "date":"2019-03-07",
   "time":"10:11",
   "picinfos":[
      {
         "filepath":"/files/1551967546627.jpg",
         "mimetype":"image/jpeg",
         "filename":"1551967546627.jpg",
         "size":322289,
         "metadata":{
            "GPSLat":"",
            "GPSLon":"",
            "CreateDate":"",
            "CreateTime":""
         }
      },
      {
         "filepath":"/files/1551967546634.jpg",
         "mimetype":"image/jpeg",
         "filename":"1551967546634.jpg",
         "size":275692,
         "metadata":{
            "GPSLat":"",
            "GPSLon":"",
            "CreateDate":"",
            "CreateTime":""
         }
      },
      {
         "filepath":"/files/1551967546638.jpg",
         "mimetype":"image/jpeg",
         "filename":"1551967546638.jpg",
         "size":261305,
         "metadata":{
            "GPSLat":"",
            "GPSLon":"",
            "CreateDate":"",
            "CreateTime":""
         }
      }
   ],
   "userid":"5c09116a4e2d1f1cc9d48d6a",
   "__v":0
}

这会在 "Pics" 栏下生成一张图片：

<th data-field="bilder" data-sortable="false" data-formatter="imageFormatter">Pics</th>

<tr id="5c8a196cc7b15419d5755153" data-index="1">
<td style="">2019-03-14</td>
<td style="">6:15:19</td>
<td style=""><img src="files/1552554348794.jpg"></td>
</tr>

如果我不使用格式化程序，我会看到：

<tr id="5c8a196cc7b15419d5755153" data-index="1">
<td style="">2019-03-14</td><td style="">6:15:19</td>
<td style="">1552554348794.jpg</td>
</tr>

问题是如何将所有图像获取到 table column/row 并让 imageFormatter 构建图像源字符串？

Answer 1

for(var x in picinfos){
    var filename = picinfos[x].filename;
}

每次您遍历 picinfos 列表时，您的 for 循环都会替换文件名。您应该将文件名附加到一个数组，然后将它们传递给 table。

for(var x=0; x < res.length; x++){
  var item = res[x]
  var picInfos = item.picinfos
  var fileNames = []

  for(var i=0; i < picInfos.length; i++){
    fileNames.push(picInfos[i].filename)
  }

   //rest
 }

Answer 2

我以：

结尾

function printCatchTable(){
    var $table = $('#TableLastCaught');

    $.ajax({
        type: "GET",
        url: '/api/lastcaught',
        success: function(response) {

            var faengeTableData = [];

  for(var i =0;i < response.length ;i++){
                var item = response[i];

                    var picinfos = item.picinfos;
                    var fileNames = [];

                    for(var k=0; k < picinfos.length; k++){
                        var filestring = imageFormatter(picinfos[k].filename);
                        fileNames.push(filestring);
                    }

                    faengeTableData.push({
                        _id: item._id,
                        date: item.datum,
                        time: item.uhrzeit,
                        pics: fileNames,        
                        });
                }

        $table.bootstrapTable({data: faengeTableData});
        $table.bootstrapTable('togglePagination');

            }   
    })
}

    function imageFormatter(value) {
        return '<img src="files/'+value+'">';
        }

来自 Ajax 响应的 bootstrap-table 中的多个图像

Multiple Images in bootstrap-table from Ajax Response

javascript

ajax

bootstrap-table