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:

• jQuery AJAX-Formular absenden
• Wie verwende ich eine Variable für einen Schlüssel in einem JavaScript-Objektliteral?
• Eingabe inaktiviertes Attribut mit jQuery umschalten
• Das Dialogfeld wird für 1 Sekunde ausgeführt und verschwindet?
• JQuery, Spring MVC @RequestBody und JSON - es funktioniert zusammen
• Wie bekomme ich die Bildschirmbreite ohne Scrollbar?

{"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"

 { name: "act", template: "actions", align: "left", width: 58 }, // 58 = 2 + 18*3 + 2 

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