如何自定义 jqGrid 中的添加按钮? [英] How do I customize the Add button in jqGrid?

问题描述

我有一个 jqGrid，当我进行搜索时，我得到一个小对话框.顶部有一个添加"按钮，其中有一个+"号用于添加行以进行高级搜索.是否可以将此按钮文本更改为普通的老式添加"而不侵入 js 库.有没有办法写一个扩展?是这样吗?

<input type="button" value="+" title="添加规则" class="add-rule ui-add">

解决方案

方法 .结果将是

下一步将修复按钮的左右填充或边距以更好地显示文本:

.ui-jqgrid .ui-jqgrid-pager .navtable .ui-pg-div,.ui-jqgrid .ui-jqgrid-toppager .navtable .ui-pg-div {padding-right: 3px;填充左: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: function () {$('input.add-rule',this).val('添加新规则');$('input.add-group',this).val('添加新规则组');}

演示 使用该选项生成搜索对话框，如以下:

(如果使用multipleGroup: true，则存在添加组"按钮，如果使用multipleSearch: true，则存在添加规则"按钮).

更新 2:如果使用 jQuery UI 按钮，可以提高搜索对话框的可见性:

afterRedraw: function () {$('input.add-rule',this).val('添加新规则').button();$('input.add-group',this).val('添加新组或规则').button();$('input.delete-rule',this).val('删除规则').button();$('input.delete-group',this).val('删除组').button();}

结果对话框如下所示

I have a jqGrid and when I do a seach I get a small dialog. There is a Add button at the top which has a "+" sign to add rows for advanced searching. Is it possible to change this button text to a plain old school "Add" without hacking into js library. Is there any way by writing an extendion? Is so how?

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

解决方案

The method navGrid has some parameters which can be used to change the look of navigator buttons. I used additionally toppager: true option of jqGrid and cloneToTop: true option of navGrid for the case that one uses top pager. If one just create the navigator buttons with respect of the call

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

one will see the results like

I used rowNum: 2 for the tests only to reduce the height of the pictures.

If I correct understand you, you want to have pure text buttons. To remove the icons from the buttons one can execute the following additional lines

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

The gridId will be set to 'list'. One need to use $.jgrid.jqID if the grid id could contain meta-characters. The results will be

Next step will be to fix right and left the padding or margin of the buttons to show the texts better:

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

The results will be improved to the following

Now we need fix the position of the pager. We can do this with respect of

$('#' + 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='';

and have the following results

or remove additionally unused right part of the pager with

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

which places the pager in the middle of the rest place on the pager:

In my opinion it's mostly the matter of taste which look is better. You can see the resulting demo here.

Alternatively you can do use icons over the text, but place the text under the icons. You can see details in the demo which produces the following results:

UPDATED: To customize the "Add rule" or "Add group" buttons you can use afterRedraw option:

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

The demo which use the option produce the searching dialog like the following:

(the button "Add group" exist if multipleGroup: true are used and the "Add rule" button exist if multipleSearch: true are used).

UPDATED 2: One can improve the visibility of the searching dialog if one would use 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();
}

The result dialog can be like the following

这篇关于如何自定义 jqGrid 中的添加按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！