free jqgrid zeigt Bestellungen an. Gebotete Bestellungen sollten einen gelben Hintergrund haben und nur die Aktionsschaltfläche öffnen. Nicht hochgeladene Bestellungen haben einen weißen Hintergrund, Standard-Löschen und benutzerdefinierte Post-Aktionsschaltfläche.
Colmodel für Aktionen Spalte:
{"hidden":false,"label":"Activity","name":"_actions","search":false,"width":94 ,"sortable":false,"formatter":"actions","viewable":false,"formatoptions":{"editbutton":false,"onSuccess":function (jqXHR) { jqXHRFromOnSuccess=jqXHR;return true;} ,"delbutton":true,"delOptions":{"url":"http://localhost:52216/admin/Grid/Delete?_entity=DoklstlT","afterComplete":function (response, postdata, formid) { summarefresh($grid); $grid[0].focus(); } }}},
Gebuchter Zustand wird durch die boolesche Spalte “Kinnitatud” bestimmt:
{"label":null,"name":"Kinnitatud","index":"Kinnitatud","editoptions":{"value":"True:False","readonly":"readonly","disabled":"disabled"},"template":"booleanCheckboxFa","editable":true,"width":0,"classes":null,"hidden":true,"searchoptions":{"sopt":["eq","ne"],"value":":Free;true:Yes;false:No"},"dataEvents":[{"type":"focus","fn":function(e) {if(typeof e.target.ischanged=='undefined') {e.target.ischanged=false}} },"",{"type":"click","fn":function(e) {dataChanged(e.target)} },{"type":"blur","fn":function(e) {summarefresh()} }]}],
Im anderen Raster wird der gebuchte Zustand durch die Kinkuup-Spalte bestimmt, die für noch nicht hochgeladene Dokumente nicht gefüllt ist:
{"template":DateTemplate ,"label":null,"name":"Kinkuup","index":"Kinkuup","editoptions":{"dataInit":null,"size":10,"readonly":"readonly","disabled":"disabled"},"searchoptions":{"dataInit":initDateSearch ,"size":10,"attr":{"size":10}},"width":0,"classes":null,"hidden":true,"dataEvents":[]}],
Beide Spalten können im Raster versteckt oder sichtbar sein. abhängig von den Benutzereinstellungen.
Benutzerdefinierte Aktionsschaltflächen werden in loadComplete für alle Zeilen erstellt:
loadComplete: function() { var iCol = getColumnIndexByName($(this),'_actions'); $(this).children("tbody").children("tr.jqgrow") .children("td:nth-child("+(iCol+1)+")") .each(function() { $("", { title: "Confirm (F2)", mouseover: function() { $(this).addClass('ui-state-hover'); }, mouseout: function() { $(this).removeClass('ui-state-hover'); }, click: function(e) { resetSelection(); idsOfSelectedRows = [$(e.target).closest("tr.jqgrow").attr("id")]; $("#grid").jqGrid('setSelection', $(e.target).closest("tr.jqgrow").attr("id"), false); $('#grid_postbutton').click(); } } ) .addClass("ui-pg-div ui-inline-post") .append('') .prependTo($(this).children("div")); $("", { title: "Open (Enter)", mouseover: function() { $(this).addClass('ui-state-hover'); }, mouseout: function() { $(this).removeClass('ui-state-hover'); }, click: function(e) { openDetail($(e.target).closest("tr.jqgrow").attr("id")); } } ) .addClass("ui-pg-div ui-inline-open") .append('') .prependTo($(this).children("div")); });
Danach werden Schaltflächen unter Verwendung von Code aus How to remove Aktionsschaltflächen aus gebuchten Zeilen in freien jqgrid mit Fontawesome Checkbox Formatierer bedingt entfernt, Zeilenbearbeitung ist bedingt deaktiviert und Hintergrund geändert.
disableRows('Kinkuup', false); disableRows('Kinnitatud', true); var disableRows = function (rowName, isBoolean) { var iCol = getColumnIndexByName($grid, rowName), cRows = $grid[0].rows.length, iRow, row, className, isPosted, mycell, mycelldata, cm = $grid.jqGrid('getGridParam', 'colModel'), iActionsCol = getColumnIndexByName($grid, '_actions'), l, isPostedStr; l = cm.length; for (iRow = 0; iRow div>div.ui-inline-del").hide(); $(row.cells[iActionsCol]).find(">div>div.ui-inline-post").hide(); $(row.cells[iActionsCol]).find(">div>div.ui-inline-edit").hide(); } } } } };
Wie verwende ich freie jqgrid-Aktionsoptionen, um diesen Code zu vereinfachen?
Wie man eine einheitliche Weise herstellt, um Standardschaltflächen für Bearbeiten und Löschen sowie benutzerdefinierte Schaltflächen auszublenden? Das Ausblenden von Standardschaltflächen erfordert weiterhin eine DOM-Änderung, auch wenn die benutzerdefinierte Schaltflächenerstellung mithilfe von Callback deaktiviert werden kann. Vielleicht, um alle Aktionsschaltflächen auf die gleiche Weise zu definieren. Vielleicht kann es mit vorhandenen rowattr oder cellattr Callbacks oder neue eingeführt werden.
Derzeit Zeile ist es, nur im folgenden Code zu lesen
row.className = className + ' jqgrid-postedrow not-editable-row'; $(row.cells[iActionsCol]).attr('editable', '0');
Ist es sinnvoll dies so zu tun, dass diableRows komplett entfernt werden kann? Vielleicht kann rowattr () stattdessen verwendet werden.
Solutions Collecting From Web of "So verwenden Sie die freien jqgrid-Eigenschaften, um Aktionsschaltflächen bedingt hinzuzufügen"
- jQuery Folie nach links und zeigen
- Was anstelle von `toggle (...)` in jQuery> 1.8 zu verwenden?
- Erkennen Sie den Überlauf von Elementen mit jQuery
- jQuery Deferred - Warten auf mehrere AJAX-Anforderungen zum Beenden
- Laravel-csrf-Token-Konflikt für ajax POST-Anfrage
- Wie füge ich mit jquery eine Hintergrundfarbe ein / aus?
- jQuery veröffentlicht JSON
- Warum sollte ich das CDN von Google für jQuery verwenden?
Ich habe einige Änderungen im formatter: "actions"
, um die Implementierung Ihres Szenarios zu vereinfachen. Die Demo zeigt, wie neue functionen verwendet werden. Es zeigt das Gitter wie auf dem Bild unten

Die Demo definiert colModel
in colModel
als
{ name: "act", template: "actions", align: "left", width: 58 }, // 58 = 2 + 18*3 + 2
und es verwendet actionsNavOptions
(man kann alternativ formatoptions
), um die Optionen des formatter: "actions"
zu konfigurieren formatter: "actions"
:
actionsNavOptions: { editbutton: false, custom: [ { action: "open", position: "first", onClick: function (options) { alert("Open, rowid=" + options.rowid); } }, { action: "post", position: "first", onClick: function (options) { alert("Post, rowid=" + options.rowid); } } ], posticon: "fa-lock", posttitle: "Confirm (F2)", openicon: "fa-folder-open-o", opentitle: "Open (Enter)", isDisplayButtons: function (options, rowData) { if (options.rowData.closed) { // or rowData.closed return { post: { hidden: true }, del: { display: false } }; } } }
Name, position
und der onClick
callback der custom
Aktion. Um das Symbol und den Titel (den Tooltip) der benutzerdefinierten Schaltfläche zu definieren, sollte man die Optionen in der Nähe der Optionen der Navigationsleiste angeben. Die Eigenschaften, die die Icon-class angeben, werden aus dem Aktionsnamen (im obigen Beispiel open
und post
) und dem Suffix "icon"
auf die gleiche Art und Weise der Wert des title-Attributs für die Schaltfläche definiert.
Mit dem Callback isDisplayButtons
kann jqGrid über die Darstellung der Schaltflächen anhand der Daten der Zeile und der Rowid informiert werden. Der Parameter options
ist mit den Optionen identisch, die Sie aus dem benutzerdefinierten Formatierungsprogramm kennen. options.rowId
ist zum Beispiel die rowid. Die neueste Version von free jqGrid (post 4.8) erweiterte die Optionen um rowData
. Sie können sehen, dass der zweite Parameter von isDisplayButtons
bereits rowData
. Der Hauptunterschied zwischen options.rowData
und rowData
ist das Format der Daten. Im Falle einer Verwendung ist der XML-Eingabe-Parameter rowData
XML-Element der Eingabedaten. Auf der anderen Seite ist die Option options.rowData
ein Objekt mit Eigenschaften wie name
Eigenschaften in colModel
. Insbesondere im Fall von Nutzungslast loadonce: true
Szenario mit XML-Daten hat die Verwendung von options.rowData
Vorteile. In der obigen Demo sind options.rowData
und rowData
identisch.
Der Callback isDisplayButtons
sollte ein Objekt mit den gleichen Eigenschaften wie die Aktionsnamen { post: {...}, open: {...}, del: {...}, edit: {...}, save: {...}, cancel: {} }
. Die Eigenschaften jedes solchen Objekts können sein
-
hidden: true
– bedeutet, dass die Schaltfläche in der Spalte enthalten ist, sie aber ausgeblendet wird. Man kann den Knopf später zeigen. Die Schaltflächen save
und cancel
sind standardmäßig ausgeblendet.
-
display: false
– bedeutet, dass die Schaltfläche nicht enthalten ist. Die Rückgabe von del: {display: false}
beispielsweise den gleichen Effekt wie die Option delbutton: false
, aber del: {display: false}
funktioniert nur für eine Zeile.
-
noHovering: true
kann verwendet werden, um den Schwebeeffekt zu entfernen ( onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');"
) von der angegebenen Aktionsschaltfläche.
-
Wie erkennt man, dass eine Datei über FTP hochgeladen wird?
-
jqGrid triggers die Grid Pager ID dynamisch auf?
-
Schaltfläche “Benutzerdefiniert löschen” Beim Bearbeiten in der UITableView-Zelle
-
Wie liest man mehrere Textdateien in eine einzige RDD?
-
Finden Sie mithilfe der Google Map API V2 die Entfernung zwischen zwei Punkten auf der Karte
-
Wie kann ich mit JSON rohen JSON in ein Objekt aufnehmen?
-
Wie man einen Fehler innerhalb einer MySQL-function verursacht
-
std :: string Formatierung wie sprintf
-
iPhone – UILabel, das Text mit mehreren fonts gleichzeitig enthält
-
C99 stdint.h Header und MS Visual Studio
-
Wie man ein “Gefällt mir” -Stimmsystem mit MongoDB modelliert
-
Wie verhindert man, dass eine jQuery Ajax-Anfrage im Internet Explorer zwischengespeichert wird?
-
Fang und berechne einen Überlauf während der Multiplikation von zwei großen ganzen Zahlen
-
Melden Sie sich mit PHP cURL auf der Gegenseite an
-
JavaServer Faces 2.2 und HTML5-Unterstützung, warum wird XHTML immer noch verwendet?