Wie passe ich die Hinzufügen-Schaltfläche im jqGrid?

Die Methode navGrid hat einige Parameter, die verwendet werden kann, um das Aussehen der navigator-Tasten. Ich verwendete zusätzlich toppager: true Möglichkeit, jqGrid und cloneToTop: true Möglichkeit navGrid für den Fall, dass man verwendet top-pager. Wenn man erstellen Sie einfach die navigator-Tasten, mit Rücksicht auf den Anruf

$grid.jqGrid('navGrid', '#pager', {
    cloneToTop: true,
    view: true,
    add: true,
    edit: true,
    addtext: 'Add',
    edittext: 'Edit',
    deltext: 'Delete',
    searchtext: 'Search',
    refreshtext: 'Reload',
    viewtext: 'View'
});

wird man sehen, dass die Ergebnisse wie

Ich verwendet rowNum: 2 für die tests nur eine Verringerung der Höhe der Bilder.

Wenn ich richtig verstehe Sie, Sie wollen haben Reine text-buttons. Entfernen Sie die icons von den buttons kann man führen Sie die folgenden zusätzlichen Zeilen

var pagerId = 'pager', gridId = $.jgrid.jqID($grid[0].id);
$('#' + pagerId).find('.navtable span.ui-icon').remove();
$('#' + gridId + '_toppager').find('.navtable span.ui-icon').remove();

Den gridId auf 'list'. Man braucht zu verwenden $.jgrid.jqID wenn die Netz-id enthalten könnte meta-Zeichen. Die Ergebnisse werden

Nächste Schritt wird sein, zu fixieren, rechts und Links das padding oder margin, die Tasten zu zeigen, die Texte besser:

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

Die Ergebnisse werden verbessert, um die folgenden

Nun müssen wir fix die position der pager. Dies können wir mit Bezug auf

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

und haben die folgenden Ergebnisse

entfernen oder zusätzlich ungenutzten rechten Teil des pager mit

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

welchen Orten die pager in der Mitte des restlichen Platzes auf dem pager:

Meiner Meinung nach es ist vor allem die Frage des Geschmacks, die Optik ist besser. Sehen Sie die daraus resultierende demo -hier.

Alternativ können Sie die icons benutzen über den text, sondern legen den text unter die Symbole. Sie können sehen,
details in die demo was produziert die folgenden Ergebnisse:

AKTUALISIERT: Zum anpassen der "Regel Hinzufügen" oder "Gruppe Hinzufügen" - Schaltflächen, die Sie verwenden können, afterRedraw option:

afterRedraw: function () {
    $('input.add-rule',this).val('Add new rule');
    $('input.add-group',this).val('Add new rule group');
}

Die demo , die mit der option erzeugen der suchen-dialog wie dem folgenden:

werden(die Schaltfläche "Gruppe Hinzufügen" vorhanden, wenn multipleGroup: true verwendet werden, und die "Regel Hinzufügen" - button vorhanden, wenn multipleSearch: true verwendet werden).

AKTUALISIERT 2: kann Man verbessern, die Sichtbarkeit der suchen-dialog, wenn man möchte die jQuery-UI-Tasten:

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

Sich der Ergebnis-dialog werden kann, wie die folgenden

InformationsquelleAutor Oleg