Как настроить кнопку Добавить в 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, если идентификатор сетки может содержать meta-characters. Результаты будут

Следующий шаг будет зафиксировать правый и левый отступы или край кнопки, чтобы показать тексты, лучше:

.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(); 

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

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

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

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

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

The demo, которые используют эту функцию, вызывают диалоговое окно поиска:

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

ОБНОВЛЕНО 2: Можно улучшить видимость в поисках диалога, если можно было бы использовать JQuery UI Buttons:

диалог

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(); 
} 

Результат может быть как следующий