Come utilizzare le proprietà jqgrid gratuite per aggiungere condizionalmente pulsanti di azioni

jqgrid gratuito mostra gli ordini. Gli ordini pubblicati devono avere lo sfondo giallo e solo il pulsante di azione aperto. Gli ordini non caricati hanno lo sfondo bianco, l’eliminazione standard e il pulsante di azione post personalizzata.

colonna colmodel per azioni:

{"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(); } }}}, 

lo stato inviato è deteminato dalla colonna booleana di Kinnitatud:

 {"label":null,"name":"Kinnitatud","index":"Kinnitatud","editoptions":{"value":"True:False","readonly":"readonly","disabled":"disabled"},"template":"booleanCheckboxFa","editable":true,"width":0,"classs":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()} }]}], 

in un’altra griglia lo stato inviato è determinato dalla colonna di Kinkuup che non viene riempita per i documenti non pubblicati:

 {"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,"classs":null,"hidden":true,"dataEvents":[]}], 

Entrambe le colonne possono essere nascoste o visibili nella griglia. a seconda delle preferenze dell’utente.

I pulsanti delle azioni personalizzate vengono creati in loadComplete per tutte le righe:

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

Dopo che i pulsanti sono stati rimossi in modo condizionale usando il codice da Come rimuovere i pulsanti di azione dalle righe pubblicate in jqgrid usando il formatter di casella di controllo Fontawesome , la modifica delle righe viene disabilitata condizionatamente e lo sfondo viene modificato.

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

Come utilizzare le opzioni di azioni jqgrid gratuite per semplificare questo codice?

Come creare un modo uniforms per hide i pulsanti di modifica standard e di eliminazione e quelli definiti dall’utente? Nascondere i pulsanti standard richiede ancora la modifica del DOM anche se la creazione di un pulsante personalizzato può essere disabilitata condizionatamente tramite callback. Forse per definire tutti i pulsanti di azioni nello stesso modo. Forse può essere fatto usando callbacks rowattr o cellattr esistenti o introducendone uno nuovo.

Attualmente la riga è da leggere solo nel codice sotto usando

 row.className = className + ' jqgrid-postedrow not-editable-row'; $(row.cells[iActionsCol]).attr('editable', '0'); 

È ragionevole farlo in modo che diableRows possa essere completamente rimosso? Forse rowattr () può essere usato al posto di questo.

Ho apportato alcune modifiche al formatter: "actions" per semplificare l’implementazione del tuo scenario. La demo mostra come utilizzare le nuove funzionalità. Visualizza la griglia come nell’immagine qui sotto

inserisci la descrizione dell'immagine qui

La demo definisce le colonne di azione in colModel come

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

e usa actionsNavOptions (si possono usare alternativamente formatoptions ) per configurare le opzioni di 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 } }; } } } 

Array nome azione custom definito, position e callback onClick . Per definire l’icona e il titolo (il tooltip) del pulsante personalizzato si dovrebbero specificare le opzioni vicino alle opzioni della barra di navigazione. Le proprietà che specificano la class di icone saranno costruite dal nome dell’azione ( open e post nell’esempio sopra) e il suffisso "icon" nello stesso modo sarà definito il valore dell’attributo titolo per il pulsante.

Il callback isDisplayButtons consente di informare jqGrid sulla visualizzazione dei pulsanti in base ai dati della riga e del rowid. Il parametro options è le stesse opzioni che conosci dal formattatore personalizzato. options.rowId è il rowid ad esempio. L’ultima versione di free jqGrid (post 4.8) ha esteso le opzioni includendo rowData . Puoi vedere che il secondo parametro di isDisplayButtons è già rowData . La principale differenza tra options.rowData e rowData se il formato dei dati. In caso di utilizzo, il parametro rowData input XML è una voce XML di dati di input. Dall’altra parte l’opzione options.rowData è un object con proprietà come proprietà del name in colModel . Soprattutto in caso di carico d’uso loadonce: true scenario loadonce: true con dati XML l’utilizzo di options.rowData presenta vantaggi. Nella precedente demo options.rowData e rowData sono identici.

Il callback isDisplayButtons dovrebbe restituire l’object con le stesse proprietà dei nomi di azione { post: {...}, open: {...}, del: {...}, edit: {...}, save: {...}, cancel: {} } . Le proprietà di ogni tale object possono essere

  • hidden: true – significa includere il pulsante nella colonna ma renderlo nascosto. Si può mostrare il pulsante più tardi. I pulsanti save e cancel sono nascosti per impostazione predefinita.
  • display: false – significa che non include affatto il pulsante. Returning del: {display: false} ad esempio ha lo stesso effetto come l’opzione delbutton: false , ma del: {display: false} funziona solo per una riga.
  • noHovering: true può essere usato per rimuovere l’effetto hovering ( onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');" ) dal pulsante di azione specificato.