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

Question

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

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

Answer 1

navGrid 方法有一些参数可以用来改变导航按钮的外观。对于使用顶部寻呼机的情况，我还使用了 jqGrid 的 toppager: true 选项和 navGrid 的 cloneToTop: true 选项。如果只是创建与通话相关的导航按钮

$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'。如果网格 id 可以包含meta-characters，则需要使用$.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();

将寻呼机放置在寻呼机其余位置的中间：

在我看来，主要是品味问题，哪种外观更好。你可以看到生成的演示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 按钮，可以提高搜索对话框的可见性：

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

结果对话框如下所示