So verwenden Sie die freien jqgrid-Eigenschaften, um Aktionsschaltflächen bedingt hinzuzufügen

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.

   

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

Bildbeschreibung hier eingeben

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.