如何自定義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(); 
} 

結果對話框可以像下面