jquery - Cómo usar las propiedades jqgrid gratuitas para agregar condicionalmente botones de acciones

free-jqgrid

Question

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

Colmodel para la columna de 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 es 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 publicado en la cuadrícula está determinado por la columna Kinkuup que no se llena para 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 estar ocultas o visibles 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() {

                   $("<div>",
                     {
                         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(''<span class="fa ui-state-default fa-fw fa-lock"></span>'')
                 .prependTo($(this).children("div"));


                   $("<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(''<span class="fa ui-state-default fa-folder-open-o"></span>'')
                     .prependTo($(this).children("div"));

               }); 

Después de que los botones se eliminen condicionalmente usando el código de Cómo eliminar botones de acción de filas publicadas en jqgrid libre usando el formateador de casilla de verificación Fontawesome , la edición de filas se deshabilita condicionalmente y se cambia el fondo.

   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 < cRows; iRow = iRow + 1) {
        row = $grid[0].rows[iRow];
        className = row.className;
        if ($(row).hasClass(''jqgrow'')) {
            isPostedStr = $.unformat.call($grid[0], row.cells[iCol],
          { rowId: row.id, colModel: cm[iCol] }, iCol);
            //if (cm[iCol].convertOnSave) {
            //    isPosted = cm[iCol].convertOnSave.call(this, {
            //        newValue: isPostedStr,
            //        cm: cm[iCol],
            //        oldValue: isPostedStr,
            //        id: row.id,
            //        //item: $grid.jqGrid("getLocalRow", row.id),
            //        iCol: iCol
            //    });
            //}
            isPosted = isPostedStr !== "False" && isPostedStr.trim() !== "";

            if (isPosted) {
                if ($.inArray(''jqgrid-postedrow'', className.split('' '')) === -1) {
                    // todo: how to disable actions buttons and form editing:
                    row.className = className + '' jqgrid-postedrow not-editable-row'';
                    $(row.cells[iActionsCol]).attr(''editable'', ''0'');
                    $(row.cells[iActionsCol]).find(">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 edición y eliminación estándar y acciones definidas por el usuario? Ocultar botones estándar aún requiere la modificación del DOM, incluso si la creación de botones personalizados se puede deshabilitar condicionalmente mediante la devolución de llamada. Tal vez para definir todos los botones de acciones de la misma manera. Tal vez se pueda hacer utilizando las devoluciones de llamada existentes de rowattr o cellattr o introduciendo una nueva.

Actualmente la fila es et para leer solo en el siguiente código usando

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

¿Es razonable hacer esto para que diableRows pueda eliminarse por completo? Tal vez se puede usar rowattr () en lugar de esto.

Answer 1

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

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 custom , la position y la devolución de llamada onClick . Para definir el icono y el título (la 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 devolución de llamada isDisplayButtons permite informar a jqGrid sobre la visualización de los botones en función de los datos de la fila y el rowid. El parámetro options es las mismas opciones que conoce del formateador personalizado. options.rowId es el rowid, por ejemplo. La última versión de jqGrid gratis (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 si el formato de datos. En caso de uso XML, el parámetro rowData entrada es el elemento XML de los datos de entrada. Por otro lado, la opción options.rowData es un objeto con propiedades como propiedades de name en colModel . Especialmente en caso de loadonce: true de uso loadonce: true escenario loadonce: true con datos XML, el uso de options.rowData tiene ventajas. En la demostración anterior options.rowData y rowData son idénticos.

La devolución de llamada isDisplayButtons debe devolver el objeto con las mismas propiedades que los nombres de acción { 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 save y cancel están ocultos por defecto.
• display: false : significa que no incluye el botón en absoluto. Devolver del: {display: false} por ejemplo, tiene el mismo efecto que la opción delbutton: false , pero del: {display: false} solo funciona 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.