jquery — добавление моих собственных кнопок в таблицу Bootgrid с помощью переполнения стека
Я использую JQuery Bootgrid для отображения таблицы, разбивки на страницы, поиска и т. Д. Что мне не нравится в этом, так это командные кнопки, я просто хочу добавить простые HTML-кнопки в мои таблицы, такие как:
echo "<td><a href='expensereport.php?source=editexpenses&p_id=$expenseID'><button class='btn btn-primary btn-icon' type='button'><span class='zmdi zmdi-edit'></span></button></a>";
Этот подход прекрасно работает, пока я не использую
<table id="data-table">
которые туирны на загрузочной сетке. Bootgrid не будет отображать кнопку вообще в моей таблице. Кто-нибудь знает, как отключить командные кнопки bootgrid, чтобы я мог добавить свои собственные? Мои кнопки работают отлично, пока я не добавлю загрузочную сетку, которая отказывается отображать их в моих таблицах. Спасибо за вашу помощь Я новичок в Bootgrid.
Решение
Посмотрите на использование Форматтеры.
Создайте столбец, где каждая ячейка содержит ваш $expenseID,
Удостоверься что data-column-id устанавливается в заголовке столбца идентификатора расхода. Для этого примера мы установим его data-column-id="expenseId", Вы можете полностью скрыть этот столбец, добавив data-visible-in-selection='false' а также data-visible='false' в голову колонки тоже.
В заголовке столбца для ваших «действий» вам также нужно будет указать форматер, который вы хотели бы использовать, передав data-formatter, В этом случае я назвал функцию форматирования expenseReportEdit поэтому мы будем использовать data-formatter="expenseReportEdit",
Ваша HTML-разметка для заголовка таблицы будет выглядеть примерно так:
<thead>
<tr>
<th data-column-id="expenseId" data-identifier='true' data-visible-in-selection='false' data-visible='false'>Expense ID</th>
<th data-column-id="expenseActions" data-formatter="expenseReportEdit">Actions</th>
</tr>
</thead>
Затем создайте свою функцию форматирования следующим образом.
$("#yourTableId").bootgrid({
formatters: {
expenseReportEdit: function (column, row) {
return "<a href=\"expensereport.php?source=editexpenses&p_id=" + row.expenseId + "\"><button class='btn btn-primary btn-icon' type='button'><span class='zmdi zmdi-edit'></span></button></a>";
}
}
});
Другие решения
Других решений пока нет …