jqgrid - 如何自定义 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如果网格 ID 可以包含 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 按钮，可以提高搜索对话框的可见性:

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

结果对话框如下所示