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

时间:2012-01-13 12:23:03

标签: jqgrid usability

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

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

1 个答案:

答案 0 :(得分:17)

方法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