wie verwenden Sie toggle-Taste anstelle der checkbox mit Hilfe von jquery UI in jqGrid
Folgenden Code aus anderen stackoverflow-Antwort verwendet wird, in jqGrid zu implementieren checkbox mit Hilfe von jquery UI in jqGrid oberen Symbolleiste. Dieser dient zum Umschalten autoedit variable true - false-Staaten.
Checkbox "Beschriftung" ist zu breit für die Symbolleiste. So ändern Sie Kontrollkästchen, um die Symbolleiste auf die Schaltfläche mit zwei Zuständen, in denen autoedit true/false-Werte (checked und unchecked Staaten). Statt Häkchen ähnliche Schaltfläche angezeigt werden soll, gedrückt oder Zustand überprüft und in regelmäßigen ungeprüften Zustand, wenn der Benutzer erneut darauf klickt.
Reine Häkchen ohne Beschriftung können nicht verwendet werden, da es sein sollte, einige visual-Kleber statt der checkbox Rechteck, wenn tolbar enthält mehr als eine solche checkbox, um diese zu unterscheiden optisch.
var autoedit=false;
$("#grid_toppager_left table.navtable tbody tr").append(
'<td><div><label><input class="ui-pg-div" tabindex="-1" type="checkbox" ' +
(autoedit ? 'checked ' : '') +
'id="AutoEdit" />Checbox caption which should appear as top toolbar button tooltip' +
'</label></div></td>');
$("#AutoEdit").change(function () {
if ($(this).is(':checked')) {
autoedit = true;
$("#AutoEdit").attr("checked", "checked");
} else {
autoedit = false;
$("#AutoEdit").removeAttr("checked");
}
});Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich finde deine Frage sehr interessant. Also machte ich einige demos, die zeigt, wie die Umsetzung der "Umschalt" - Tasten in der navigator-Leiste von jqGrid. In allen demos die ich verwendet, oberen Symbolleiste.
Ich entscheiden, zu verwenden jQuery UI Button widget. Es können verschiedene Arten von Schaltflächen, die man von dort aus die "Umschalt" - Taste, die wir brauchen. Die Tasten können nur ein text, nur ein Symbol oder eine Kombination von text und bis zu zwei Symbole (ein Symbol vor dem text und einem anderen, nach dem text). Als Ergebnis kann man Symbolleisten erstellen, wie die folgenden:
oder einfach nur Symbole wie
für den Zustand "geprüft".
Weil ich die Obere Symbolleiste, die ich Für die Umsetzung habe ich mich beworben, den Weg von einigen jqGrid CSS, die ich beschrieben hier:
Dem code, fügen Sie die benutzerdefinierte Taste, die du gepostet hast würde ich modifiziert
bei reinen text-Schaltfläche mit dem text "Autoedit". Die entsprechenden zusätzlichen CSS-Einstellungen können Sie
Im Falle der Nutzung das Symbol mit dem text wird der code
Damit die Schaltfläche mit dem Symbol nur ohne den text braucht man nur hinzufügen
text: falseoption in der Liste der.button({...})ParameterIn beiden Fällen die folgenden CSS kann verwendet werden,
Für verschiedene demos finden Sie hier:
Haben die Grenze über den button nur wenn Sie den Mauszeiger Sie ändern können, die CSS-Datei für die
.my-nav-checkbox > labelzuAls Ergebnis haben Sie (siehe die folgende demo):
Checkx caption which should appear as button tooltipnicht angezeigt, wenn die Maus hover-buttontitleAttribut aus<td>zu<lable>. Ich veränderte die demos und den code aus der Antwort.border: 0px;des<label>:.ui-jqgrid .ui-pg-table .my-nav-checkbox > label { margin: 0px; border: 0px; }. Sie können auch ändern Sie die position des symbols und so weiter. Nur versuchen Sie, ändern Sie Konstanten, die in der CSS und du wirst sehen, die Ergebnisse der Veränderungen.'<input tabindex="-1" type="checkbox" id="AutoEdit" '+(autoedit ? 'checked ' : '')+'/>'scheint zu zeigen, aktivierten Zustand, wenn autoedit ist wahr<input>element mitchecked="checked"Attribut oder verwenden Sie die jQuery UI Button-API zu ändern, den Status der Schaltfläche:$("#AutoEdit").prop("checked", true).button("refresh");. Siehe hier