如何自定义jqGrid中的"添加"按钮？

Question

我有一个jqGrid,当我做一个seach时,我得到一个小对话框.顶部有一个"添加"按钮,其中有一个"+"符号,用于添加行以进行高级搜索.是否可以将此按钮文本更改为普通的旧学校"添加",而不会入侵js库.有没有办法写一个扩展？是这样怎么样？

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

Answer 1

navGrid方法有一些参数可用于更改导航按钮的外观.我使用toppager: truejqGrid的另外选项和一个使用顶部寻呼机的情况的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如果网格id可以包含元字符,则需要使用.结果将是

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

.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 UI按钮,可以提高搜索对话框的可见性:

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

结果对话框可能如下所示