¿Cómo pasar parámetros adicionales para la edición de filas/salvar acción en free-jqgrid?

Tengo un jgrid y el código está abajo. Deseo enviar algunos parámetros adicionales al servidor cuando haga clic en el icono guardar en cada fila. ¿Cómo hacer esto?

let colNames = ['Designation', 'No. of Resource(s) Required', 'Competence for Job', 'Skill of Resource', 'Time Required(in %)', 'From', 'To', 'Reason For Request', 'Assigned Person(s)', 'Current Role in Project', 'resource_type', 'Billing'];

    let colModel = [
        {name:'resource_designation', index:'resource_designation', resizeable:true, editable: true, edittype: 'select', editoptions: {value:designation_options}, editrules:{required:true}, search: false},
        {name:'resource_resources_required', index:'resource_resources_required', resizeable:true, editable: true, edittype: 'text', editrules:{required:true}, search: false},
        {name:'resource_competence_for_job', index:'resource_competence_for_job', resizeable:true, editable: true, edittype: 'textarea', search: false},
        {name:'resource_skill_of_resource', index:'resource_skill_of_resource', resizeable:true, editable: true, edittype: 'textarea', search: false},
        {name:'resource_percentage_time_required', index:'resource_percentage_time_required', resizeable:true, editable: true, edittype: 'text', editrules:{required:true, integer: true}, search: false},
        {name:'resource_duration_from', index:'resource_duration_from', resizeable:true, editable: true, edittype: 'text', editoptions: {
            dataInit: function(el){
                $(el).datepicker({
                    id: 'resource_duration_from',
                    dateFormat: "dd-M-yy"
                });
            }
        }, search: false},
        {name:'resource_duration_to', index:'resource_duration_to', resizeable:true, editable: true, edittype: 'text', editoptions: {
            dataInit: function(el){
            $(el).datepicker({
                id: "resource_duration_to",
                dateFormat: "dd-M-yy"
            });
            }
        }, search: false},
        {name:'resource_reason_for_request', index:'resource_reason_for_request', resizeable:true, editable: true, edittype: 'text', editrules:{required:true}, search: false},
        //{name:'assigned_persons', index:'assigned_persons', resizeable:true, editable: true, edittype: 'select', editrules:{required:true}, search: false},
        {name:'resource_assigned_persons', index:'resource_assigned_persons', resizeable:true, editable: true, edittype: 'select', editoptions:{value:assigned_persons}, editrules: {required: true},  search: false},
        //{name:'current_role', index:'current_role', resizeable:true, editrules:{required:true}, search: false},
        {name:'resource_current_role_in_project', index:'resource_current_role_in_project', resizeable:true, editable: true, edittype: 'select', editoptions: {value: designation_options}, editrules:{required:true}, search: false},
        {name:'resource_resource_type', index:'resource_resource_type', resizeable:true, editable: true, edittype: 'select', editoptions: {value: {"Full Time": "Full Time", "Buffer": "Buffer", "Trainee": "Trainee"}}, editrules:{required:true}, search: false},
        {name:'resource_billing', index:'resource_billing', resizeable:true, editable:true, edittype:'select', editoptions: {value:{"Billable": "Billable", "Non-Billable": "Non-Billable"}}, search: false}
    ];


    let editparameters = {
            "keys" : false,
            "oneditfunc" : null,
            "successfunc" : null,
            "url" : location_url,
             "extraparam" : {"grid": "rsf_people"},
            "aftersavefunc" : null,
            "errorfunc": null,
            "afterrestorefunc" : null,
            "restoreAfterError" : true,
            "mtype" : "POST"
        };

    let parameters = {
               edit: true,
               editicon: "ui-icon-pencil",
               add: true,
               addicon:"ui-icon-plus",
               save: true,
               saveicon:"ui-icon-disk",
               cancel: true,
               cancelicon:"ui-icon-cancel",
               //addParams : saveparameters,
               addParams : {addRowParams:{extraparam:{"grid":"rsf_people"}}},
               editParams : editparameters
            };





$("#rsf_people").jqGrid({
    url: location_url,
    datatype: "json",
    mtype: "POST",
    postData: {action: "get_saved_allocated_resources"},
    colNames:people_colNames,
    colModel:people_colModel,
    rowNum: 5,
    height:'auto',
    autowidth: true,
    shrinkToFit: true,
    pager: true,
    emptyrecords: " ",
    viewrecords: true,
    sortorder: "asc",
    scrollOffset:0,
    cmTemplate: { autoResizable: true, editable: true },
    autoResizing: { compact: true, resetWidthOrg: true },
    idPrefix: "g1_",
    autoencode: true,
    sortable: true,
    rownumbers: true,
    pagerRightWidth: 150,
    editurl: location_url,
    afterAddRow: function () {
        recreateFilterToolbar.call(this);
    },
    afterSetRow: function () {
        recreateFilterToolbar.call(this);
    },
    afterDelRow: function () {
        recreateFilterToolbar.call(this);
    },
    inlineEditing: {
        keys: true
    },
    formEditing: {
        width: 310,
        closeOnEscape: true,
        closeAfterEdit: true,
        savekey: [true, 13]
    },
    loadonce: true,
    caption: "RSF People",
}).jqGrid("navGrid", {add: false, edit: false, del: false, search: false, refresh: false})
            .jqGrid("inlineNav", parameters)
            .jqGrid("filterToolbar");

/* To make grouped headers */
$("#rsf_people").jqGrid("setGroupHeaders", {
    useColSpanStyle: false,
    groupHeaders: [
        {startColumnName: 'duration_from', numberOfColumns: 2, titleText: 'Duration'},
    ]
});

Y mi rejilla parece abajo,

overall grid

Si miras la imagen he marcado las acciones inlinenav como añadir y editar en verde. Así que estos funcionan bien y soy capaz de pasar parámetros adicionales usando la variable parámetros.

Pero quiero pasar esos mismos parámetros adicionales a la acción de edición marcada en rojo rectángulo en la imagen. ¿Cómo puedo hacer eso?

Para ponerlo de otra manera, cuando haga clic en el icono "+" en el verde área inferior añade una nueva fila a la cuadrícula y también un icono de ahorro al lado izquierdo de la fila[la columna de acción]. Si relleno los datos y haga clic en el icono guardar en la misma fila izquierda no pasa los parámetros adicionales al servidor. ¿Cómo puedo lograr esto? Deseo pasar parámetros adicionales cuando el ahorro[existe en cada fila - marcado en rojo en la imagen] icono se hace clic.

rowwise save

¿Cómo lograr esto? ¡Por favor, ayúdame!

Pregunta hecha hace 3 años, 4 meses, 27 días - Por pixelpioneer

3 Respuestas:

  • Si entiendo correctamente su código que desea enviar grid=rsf_people como datos extra sobre el ahorro de datos en línea en caso de operación "add" y "edit". En la actualidad se establece extraparam sólo para inlineNav. Así que los datos extra serán enviados en caso de uso "salvar" icono en la barra de navegación solamente y no en formador de "acción".

    Soportes jqGrid gratis inlineEditing parámetro (see inlineEditing: { keys: true } en su código), que simplifica los parámetros de reenvío a los métodos de edición en línea. Te sugiero que uses.

    inlineEditing: {
    extraparam: { grid: "rsf_people" },
    mtype: "POST",
    keys: true
}

    Debería resolver tu problema. See el artículo wiki para más detalles.

    Respondida el Dec 18, 2020 a las 10:07 - por bytebard66b1

    Votos positivos: 0 | Votos negativos: 0

  • Para poder pasar parámetros adicionales a la acción de guardar en cada fila en jqGrid, necesitarás modificar la configuración de la edición en tu código.

    En tu código, ya has definido los parámetros adicionales que deseas enviar al servidor en la variable editparameters. Ahora, necesitas adjuntar estos parámetros a la configuración de la acción de guardar en cada fila.

    Puedes hacerlo de la siguiente manera:

    • Agrega la siguiente función a tu código:
    javascript
function saveRow(rowid, result) {
    let saveparameters = {
        "keys" : true,
        "oneditfunc" : null,
        "successfunc" : null,
        "url" : locationurl,
        "extraparam" : {"grid": "rsfpeople"}, // Parámetros adicionales que deseas enviar
        "aftersavefunc" : null,
        "errorfunc": null,
        "afterrestorefunc" : null,
        "restoreAfterError" : true,
        "mtype" : "POST"
    };
    


    return saveparameters;
}

    • Luego, cuando inicialices tu jqGrid, agrega la siguiente configuración para la acción de guardar en cada fila:
    javascript
let parameters = {
    edit: true,
    editicon: "ui-icon-pencil",
    add: true,
    addicon:"ui-icon-plus",
    save: true,
    saveicon:"ui-icon-disk",
    cancel: true,
    cancelicon:"ui-icon-cancel",
    saveParams: saveRow, // Agrega la función saveRow como configuración para la acción de guardar en cada fila
    editParams: editparameters
};

    Con estos cambios, cada vez que hagas clic en el icono guardar en una fila, se enviarán los parámetros adicionales definidos en editparameters al servidor. ¡Espero que esta información te haya sido útil! Si tienes alguna otra duda, ¡estaré encantado de ayudarte!

    Respondida el Dec 19, 2020 a las 10:05 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para pasar parámetros adicionales a la acción de edición en cada fila, puedes utilizar la propiedad editParams del objeto inlineEditing y configurarla para cada fila individualmente. Aquí tienes un ejemplo:

    
inlineEditing: {
    keys: true,
    editParams: function (rowid) {
        // Obtener los datos de la fila actual
        var rowData = $("rsf_people").jqGrid('getRowData', rowid);
        // Crear un objeto con los parámetros adicionales
        var extraParams = {
            "grid": "rsf_people",
            "rowid": rowid
        };

        // Devolver los parámetros adicionales
        return {
            "extraparam": extraParams
        };
    }
}

    En este ejemplo, la propiedad editParams es una función que devuelve un objeto con los parámetros adicionales que deseas pasar al servidor. La función getRowData se utiliza para obtener los datos de la fila actual y el rowid se pasa como parámetro a la función editParams.

    También puedes utilizar la propiedad afterSavefunc para ejecutar una función después de que se haya guardado una fila. Esta función puede utilizarse para realizar cualquier procesamiento adicional que necesites, como enviar los parámetros adicionales al servidor. Aquí tienes un ejemplo:

    
afterSavefunc: function (rowid, response) {
    // Obtener los datos de la fila actual
    var rowData = $("rsf_people").jqGrid('getRowData', rowid);
    // Crear un objeto con los parámetros adicionales
    var extraParams = {
        "grid": "rsf_people",
        "rowid": rowid
    };

    // Enviar los parámetros adicionales al servidor
    $.ajax({
        url: location_url,
        type: "POST",
        data: extraParams,
        success: function (data) {
            // Procesar la respuesta del servidor
        }
    });
}

    En este ejemplo, la propiedad afterSavefunc es una función que se ejecuta después de que se haya guardado una fila. La función getRowData se utiliza para obtener los datos de la fila actual y el rowid se pasa como parámetro a la función afterSavefunc. La función $.ajax se utiliza para enviar los parámetros adicionales al servidor.

    Respondida el Dec 19, 2020 a las 10:08 - por Gemini

    Votos positivos: 0 | Votos negativos: 0