Tengo que crear una tabla de datos simmiliar a la http://www.chartle.net/ tener.

La mayoría de los importang es característica :

  1. Fila pueden agregar o quitar de forma dinámica (hecho)
  2. Columna se puede agregar/eliminar de forma dinámica (¿cómo puedo hacer esto ?)
  3. El cambio de colModel pueden ser guardados en la base de datos para la función de modificación ..

Es esto posible ?

  • Me decidí a saltar sobre la creación de lat/long mapa componente en mi panel de control en primer lugar,voy a tratar de resolver este problema la próxima semana. Gracias por las respuestas!

6 Comentarios

  1. 2

    El problema es, que no se puede cambiar dinámicamente el jQgrid ColModel. Las dos opciones que veo son:

    1. Eliminar la cuadrícula completa y volver a cargarlo con un nuevo ColModel (si es que puede cambiar por completo) el uso de GridUnload:

      jQuery(selector).GridUnload(selector);

    2. De carga de todas las posibles filas y mostrar/ocultar los que necesitan, por ejemplo, mediante el uso de la mostrar ocultar columnas plugin

    Para guardar de forma dinámica debe ser suficiente para almacenar los datos de configuración de la cuadrícula en la base de datos JSON.

  2. 1

    jqGrid 3.6 ahora soporta de forma dinámica mostrar /ocultar las columnas, y no hay un «Selector de Columnas» demo en su 3.6 página de demostración. Es esto lo suficientemente bueno para sus necesidades?

  3. 1
    function objedit(id, cellname, value) 
    {
    
        var flag = 0;
        for (var i = 0; i < index; i++) {
            if (obj[i][0] == id && obj[i][1] == cellname) {
                obj[i] = [id, cellname, value]
                flag++;
            }
        }
        if (flag == 0) {
            obj[index] = [id, cellname, value];
            index++;
        }
    }
    
    
    function columnsData(Data) 
    {
    
    var formater = "";
    
        var str = "[";
        for (var i = 0; i < Data.length; i++) {
            if (Data[i] == "Id")
                str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', hidden: true,}";
            else
                str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}";
            if (i != Data.length - 1) {
                str = str + ",";
            }
        }
        str = str + "]";
        return str;
    }
    //------end grid part----------
  4. 0
     bindJqGrid("SetPayInvoice", feeID, datasetID, 1);
    function bindJqGrid(actionController, feeID, datasetID, step)
    {
    agreementID = $("#agreementID").val();
    mappingTemplateID = $("#mappingTemplateID").val();
    invoiceID = $("#invoiceID").val();
    var action = '/PayInvoice/' + actionController + '?agreementID=' + agreementID + '&mappingTemplateID=' + mappingTemplateID + '&invoiceID=' + invoiceID + '&feeID=' + feeID + '&datasetID=' + datasetID;
    var caption = "Invoice Exception";
    $("#headerText").html(caption);
    JQGrid(caption, action);
    }
    function JQGrid(caption, action)
    {    $("#tblGrid").jqGrid('GridUnload');
    $.ajax({
    url: action,
    dataType: "json",
    mtype: 'POST',
    success: function (result) {
    if (result) {
    if (!result.Error && result != "" && result != undefined) {
    $("#TotalData").html(result.records);
    $("#divWorkflowWrapper").show();
    $("#dvFooter").show();
    var colData = "";
    colData = columnsData(result.column);
    colData = eval('{' + colData + '}');
    $("#tblGrid").jqGrid({
    url: action,
    datatype: 'json',
    mtype: 'GET',
    colNames: result.column,
    colModel: colData,
    autowidth: true,
    height: 550,
    rowNum: 25,
    rowList: [25, 50, 75, 100],
    loadtext: "Loading...",
    pager: '#tblGridpager',
    viewrecords: true,
    gridview: true,
    altRows: true,
    cellEdit: true,
    cellsubmit: "remote",
    cellurl: '/PayInvoice/GridSavecell',
    beforeSelectRow: function (rowid) { return false; },
    ondblClickRow: function (rowid, iRow, iCol) {
    jQuery("#tblGrid").editCell(iRow, iCol, true);
    },
    afterEditCell: function () {
    e = jQuery.Event("keydown");
    e.keyCode = $.ui.keyCode.ENTER;
    edit = $(".edit-cell > *");
    edit.blur(function () {
    edit.trigger(e);
    });
    },
    beforeSubmitCell: function (id, cellname, value, iRow, iCol) {
    objedit(id, cellname, value);
    return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
    },
    afterSaveCell: function (id, cellname, value, iRow, iCol) {
    objedit(id, cellname, value);
    return { id: id, cellname: cellname, value: value, iRow: iRow, iCol: iCol };
    },
    caption: caption
    });
    }
    }
    else {
    $("#divWorkflowWrapper").hide();
    $("#dvFooter").hide();
    }
    },
    error: function (xhr, ajaxOptions, thrownError) {
    if (xhr && thrownError) {
    alert('Status: ' + xhr.status + ' Error: ' + thrownError);
    }
    }
    });
    }
    • Sería aún mejor si se explica el código que has publicado.

Dejar respuesta

Please enter your comment!
Please enter your name here