So vergrößern Sie benutzerdefinierte Schaltflächen in der oberen Symbolleiste von jqgrid wie Standardschaltflächen
Stil basierend auf FragejqGrid - Wie kann ich die Paging-Schaltflächen vergrößern? wird verwendet, um die Schaltflächen der Symbolleiste von jqgrid auf oberster Ebene zu vergrößern:
.ui-jqgrid .ui-jqgrid-toppager { height:35px !important; }
.ui-jqgrid .ui-pg-button { height:30px !important; width:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-icon { position:relative; margin: 0px 10px;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
margin: 0 10px !important;
}
/* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkbox
{
margin: 0px;
padding: 0px;
float: left;
height: 18px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > input
{
padding: 1px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > label
{
margin: 0px;
border-width: 0px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox:hover > label
{
margin: 0px;
border-width: 1px;
}
/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text
{
margin: 0px;
padding: 1px 2px 1px 16px;
}
.ui-button-icon-only
{
width: 16px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-icon-primary
{
margin: -8px 0px 0px -8px;
}
Die jqgrid-Symbolleiste enthält auch benutzerdefinierte, überprüfbare Schaltflächen, die auf der Oleg-Antwort basieren und wie folgt definiert sind:
var autoedit = false;
$("#grid_toppager_left table.navtable tbody tr").append(
'<td class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkbox">' +
'<input tabindex="-1" type="checkbox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
'<label title="Press to toggle"' +
' for="AutoEdit">Press to toggle</label></div></td>'
);
$("#AutoEdit").button({
text: false,
icons: {primary: "ui-icon-star"}
}).click(function () {
autoedit = !autoedit;
});
Diese benutzerdefinierte Schaltfläche (Sternsymbol) in der Symbolleiste wird an der falschen Position angezeigt: zu rechts und zusammen mit der nächsten Schaltfläche:
Außerdem ist die Breite kleiner als die Standardschaltfläche und die Ausrichtung nach oben ist zu groß:
Wie erstelle ich benutzerdefinierte Schaltflächen wie Standardschaltflächen?