Cómo usar las propiedades libres de jqgrid para agregar botones de acciones condicionalmente

jqgrid gratis muestra pedidos. Los pedidos publicados deben tener fondo amarillo y solo el botón de acción abierto. Los pedidos sin publicar tienen fondo blanco, eliminación estándar y botón de acción posterior personalizado.

columna colmodel para acciones:

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

el estado publicado está determinado por la columna booleana de Kinnitatud:

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

en otro estado de la cuadrícula se determina por la columna Kinkuup que no se llena para los documentos no publicados:

 {"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":[]}], 

Ambas columnas pueden ocultarse o verse en la cuadrícula. dependiendo de las preferencias del usuario

Los botones de acciones personalizadas se crean en loadComplete para todas las filas:

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

Después de que los botones se eliminen condicionalmente usando el código de Cómo quitar los botones de acción de las filas publicadas en el jqgrid libre usando el formateador de casillas de verificación Fontawesome , la edición de filas se deshabilita de forma condicional y el fondo se modifica.

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

¿Cómo usar las opciones de acciones jqgrid gratuitas para simplificar este código?

¿Cómo crear una manera uniforme de ocultar los botones de acciones de edición y eliminación estándares y definidos por el usuario? Ocultar los botones estándar aún requiere la modificación del DOM, incluso si la creación de un botón personalizado puede desactivarse de forma condicional mediante la callback. Tal vez para definir todos los botones de acciones de la misma manera. Tal vez se pueda hacer utilizando callbacks existentes de rowattr o cellattr o introduciendo uno nuevo.

Actualmente row is et para leer solo en el código a continuación usando

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

¿Es razonable hacerlo así para que diableRows pueda eliminarse por completo? Quizás rowattr () puede usarse en lugar de esto.

Hice algunos cambios en el formatter: "actions" para simplificar la implementación de su escenario. La demostración muestra cómo usar nuevas características. Muestra la cuadrícula como en la imagen de abajo

enter image description here

La demostración define columnas de acción en colModel como

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

y usa actionsNavOptions (uno puede usar formatoptions alternativamente) para configurar las opciones de 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 } }; } } } 

Arregle el nombre de acción definido a medida, la position y la callback onClick . Para definir el icono y el título (información sobre herramientas) del botón personalizado, se deben especificar las opciones cercanas a las opciones de la barra de navegación. Las propiedades que especifican la clase de icono se construirán a partir del nombre de la acción ( open y post en el ejemplo anterior) y el sufijo "icon" de la misma manera se definirá el valor del atributo de título para el botón.

La callback isDisplayButtons permite informar a jqGrid sobre la visualización de los botones en función de los datos de la fila y rowid. El parámetro de options es la misma que usted conoce desde el formateador personalizado. options.rowId es el rowid por ejemplo. La última versión de jqGrid libre (post 4.8) extendió las opciones al incluir rowData . Puede ver que el segundo parámetro de isDisplayButtons ya es rowData . La principal diferencia entre options.rowData y rowData es el formato de los datos. En caso de uso de entrada XML, el parámetro rowData es un elemento XML de datos de entrada. Por otro lado, la opción options.rowData es un objeto con propiedades como propiedades de name en colModel . Especialmente en el caso de loadonce: true de uso loadonce: true escenario loadonce: true con datos XML, el uso de options.rowData tiene ventajas. En las options.rowData demostración anteriores, options.rowData y rowData son idénticos.

La callback isDisplayButtons debe devolver el objeto con las mismas propiedades que los nombres de las acciones { post: {...}, open: {...}, del: {...}, edit: {...}, save: {...}, cancel: {} } . Las propiedades de cada objeto pueden ser

  • hidden: true : significa incluir el botón en la columna pero ocultarlo. Uno puede mostrar el botón más tarde. Los botones de save y cancel están ocultos por defecto.
  • display: false – significa que no incluye el botón en absoluto. Por ejemplo, la devolución del: {display: false} tiene el mismo efecto que la opción delbutton: false , pero del: {display: false} funciona solo para una fila.
  • noHovering: true se puede usar para eliminar el efecto de onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');" ( onmouseover="jQuery(this).addClass('ui-state-hover');" onmouseout="jQuery(this).removeClass('ui-state-hover');" ) desde el botón de acción especificado.
    Intereting Posts