在 jquery bootgrid 中显示数据库中的图像

Question

我想在 bootgrid 表中显示数据库中的图像，但我真的不知道该放在哪里，我该怎么办？如何将图像从数据库显示到我的 bootgrid 表？

这是我的示例代码

   <table id="product_data" class="table table-bordered table-striped">
 <thead>
  <tr>
   <th data-column-id="product_id" data-type="numeric">ID</th>
   <th data-column-id="product_name">Nama Produk</th>
   <th data-column-id="gambar">Gambar</th>
   <th data-column-id="category_name">Nama Kategori</th>
   <th data-column-id="product_price">Harga</th>
   <th data-column-id="commands" data-formatter="image" data-sortable="false">Gambar</th> <!-- bootgrid image table header -->
   <th data-column-id="commands" data-formatter="commands" data-sortable="false">Aksi</th>
  </tr>
 </thead>
</table>

Answer 1

你可以试试下面的jquery代码：

$(function () {  
    var jqxhr = $.ajax({
         url: 'product/getProducts',
         type: 'POST'
    });
    jqxhr.done(function (data, textStatus, jqXHR) {
        $("#product_data").bootgrid({
            caseSensitive: false,
            selection: true,
            multiSelect: true,
            formatters: {                    
                "image": function (column, row) {
                    return "<img src=\"http://www.example.com/product/getimage/" + row.productId + "\" />";
                    }
                }
        }).bootgrid("append", data)
    });
});

Answer 2

您需要使用格式化程序

格式化程序非常适合操作数据单元格的可视化。它们快速且易于实施。

如何创建格式化程序

格式化程序只不过是在数据单元格渲染时调用的函数。这被映射到当前的 Bootgrid 实例。格式化程序返回一个 HTML 字符串。使用loaded.rs.jquery.bootgrid 事件将自定义事件绑定到由格式化程序呈现的控件。

试试这个例子

HTML

<table id="grid-data" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
            <th data-column-id="image" data-formatter="image" data-sortable="false">Image</th>
        </tr>
    </thead>
</table>

脚本

$("#grid-data").bootgrid({
    ajax: true,
    post: function ()
    {
        /* To accumulate custom parameter with the request object */
        return {
            id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
        };
    },
    url: "/api/data/basic",
    formatters: {
        "image": function(column, row)
        {
            return "<image src='"+ row.imageSrc +"'>";
        }
    }
});

您需要在 ajax 响应中的 imageSrc 属性中传递图像源。