Question

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

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

Answer 1

方法navGrid有一些参数可用于更改导航按钮的外观。我使用jqGrid的toppager: true选项和cloneToTop: true的{{1}}选项用于使用顶部寻呼机的情况。如果只是根据通话创建导航按钮

navGrid

人们会看到像

这样的结果

enter image description here

我仅使用$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。如果网格ID可以包含meta-characters，则需要使用'list'。结果将是

enter image description here

下一步是修正按钮的填充或边距，以更好地显示文本：

$.jgrid.jqID

结果将改进以下

enter image description here

现在我们需要修复寻呼机的位置。我们可以尊重

这样做

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

并获得以下结果

enter image description here

或使用

删除寻呼机的其他未使用的右侧部分

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

将寻呼机置于寻呼机上其余位置的中间位置：

enter image description here

在我看来，这主要是品味看起来更好的问题。您可以看到生成的演示here。

或者，您可以使用图标覆盖文本，但将文本放在图标下。你可以看到 the demo中的详细信息会产生以下结果：

enter image description here

更新：要自定义“添加规则”或“添加组”按钮，您可以使用afterRedraw选项：

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

使用该选项的

The demo生成如下搜索对话框：

enter image description here

（如果使用afterRedraw: function () { $('input.add-rule',this).val('Add new rule'); $('input.add-group',this).val('Add new rule group'); }则存在“添加组”按钮，如果使用multipleGroup: true则存在“添加规则”按钮。

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

multipleSearch: true

结果对话框可以如下所示

enter image description here

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

1 个答案: