Отображать изображение из базы данных в jquery bootgrid

Question

Я хочу показать изображения из базы данных в таблице загрузочной сетки, но я действительно не знаю, где их разместить, так что мне делать? Как отобразить изображение из базы данных в моей таблице загрузки?

это мой пример кода

   <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

Вам нужно использовать форматеры

Форматеры идеально подходят для манипулирования визуализацией ячеек данных. Они быстрые и простые в реализации.

Как создать форматтер

Форматировщик - это не что иное, как функция, которая вызывается при визуализации ячейки данных. это сопоставлено с текущим экземпляром 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 +"'>";
        }
    }
});

Вам нужно передать источник изображения в imageSrc свойство в ответе ajax.

Answer 2

Вы можете попробовать ниже код 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)
    });
});