Как настроить кнопку «Добавить» в jqGrid?

Question

У меня есть jqGrid, и когда я делаю поиск, я получаю небольшой диалог Вверху есть кнопка «Добавить» со знаком «+» для добавления строк для расширенного поиска. Можно ли изменить текст этой кнопки на простой старой школы "Добавить" без взлома библиотеки JS. Есть ли способ написать расширение? Так как?

<input type="button" value="+" title="Add rule" class="add-rule ui-add">

Answer 1

Метод navGrid имеет некоторые параметры, которые можно использовать для изменения вида кнопок навигатора.Я использовал дополнительно toppager: true опцию jqGrid и cloneToTop: true опцию navGrid для случая, когда используется топ пейджер.Если просто создать кнопки навигатора относительно вызова

$grid.jqGrid('navGrid', '#pager', {
    cloneToTop: true,
    view: true,
    add: true,
    edit: true,
    addtext: 'Add',
    edittext: 'Edit',
    deltext: 'Delete',
    searchtext: 'Search',
    refreshtext: 'Reload',
    viewtext: 'View'
});

, вы увидите результаты, подобные

Я использовал rowNum: 2 для тестовтолько чтобы уменьшить высоту картинки.

Если я правильно понимаю вас, вы хотите иметь кнопки с простым текстом.Для удаления значков с кнопок можно выполнить следующие дополнительные строки

var pagerId = 'pager', gridId = $.jgrid.jqID($grid[0].id);
$('#' + pagerId).find('.navtable span.ui-icon').remove();
$('#' + gridId + '_toppager').find('.navtable span.ui-icon').remove();

. gridId будет установлен на 'list'.Нужно использовать $.jgrid.jqID, если идентификатор сетки может содержать метасимволов .Результат будет

Следующим шагом будет исправление правого и левого отступов или полей кнопок для лучшего отображения текста:

.ui-jqgrid .ui-jqgrid-pager .navtable .ui-pg-div,
.ui-jqgrid .ui-jqgrid-toppager .navtable .ui-pg-div {
    padding-right: 3px;
    padding-left: 3px;
}

Результаты будут улучшены до следующих

Теперь нам нужно зафиксировать положение пейджера.Мы можем сделать это в отношении

$('#' + pagerId + '_left').width($('#' + pagerId + ' .navtable').width());
$('#' + gridId + '_toppager_left').width($('#' + gridId + '_toppager .navtable').width());
$('#' + pagerId + '_center')[0].style.width='';
$('#' + gridId + '_toppager_center')[0].style.width='';

и получить следующие результаты

или удалить дополнительно неиспользованную правую часть пейджера с помощью

$('#' + pagerId + '_right').remove();
$('#' + gridId + '_toppager_right').remove();

, который помещает пейджер посередине места отдыха на пейджер:

По моему мнению, в основном это вопрос вкуса, который выглядит лучше.Вы можете увидеть полученную демонстрацию здесь .

В качестве альтернативы вы можете использовать значки над текстом, но поместить текст под значками.Вы можете увидеть подробности в демонстрационной версии , которая дает следующие результаты:

ОБНОВЛЕНО : для настройки «Добавить правило» илиКнопки «Добавить группу», которые вы можете использовать afterRedraw опция:

afterRedraw: function () {
    $('input.add-rule',this).val('Add new rule');
    $('input.add-group',this).val('Add new rule group');
}

Демо , которое использует эту опцию, вызывает диалог поиска, подобный следующему:

(кнопка «Добавить группу» существует, если используется multipleGroup: true, и кнопка «Добавить правило» существует, если используется multipleSearch: true).

ОБНОВЛЕНО 2 : можно улучшить видимость диалогового окна поиска, если использовать кнопки пользовательского интерфейса jQuery:

afterRedraw: function () {
    $('input.add-rule',this).val('Add new rule').button();
    $('input.add-group',this).val('Add new group or rules').button();
    $('input.delete-rule',this).val('Delete rule').button();
    $('input.delete-group',this).val('Delete group').button();
}

Диалоговое окно результатов может выглядеть следующим образом: