Отображать изображение из базы данных в jquery 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>
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 +"'>";
}
}
});
Вам нужно передать источник изображения в imageSrc
свойство в ответе ajax.
Вы можете попробовать ниже код 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)
});
});