jqGrid avec dynamic colModel?

Question

Je dois créer une table de données simmiliar au http://www.chartle.net/ avoir.

La caractéristique la plus Importang est:

1. Row peut être ajouté/supprimer de manière dynamique (fait)
2. colonne peut être ajouté/supprimer de manière dynamique (comment puis-je faire cela?)
3. Le colModel changé peut être enregistré dans la base de données pour la modification de fonction.

Est-ce possible?

Answer 1

Le problème est que vous ne pouvez pas modifier dynamiquement le jMgrid ColModel. Les deux options que je vois sont:

1. Supprimer toute la grille et le recharger avec un nouveau ColModel (si elle peut changer complètement) en utilisant GridUnload:

   jQuery (sélecteur) .GridUnload (sélecteur);

2. Chargez toutes les lignes possibles et affichez/masquez celles dont vous avez besoin, par ex. en utilisant le show hide columns plugin

Pour enregistrer dynamiquement il devrait être suffisant pour stocker les données de configuration pour la grille dans la base de données JSON.

Answer 2

Je pense qu'il est possible, mais n'ont pas essayé ..

Si vous utilisez ASP.NET MVC: Avez-vous essayé d'ajouter le programme grille du contrôleur comme ViewData? C'est une idée.

Ce lien peut vous aller plus loin: http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html

Hope it helps

Answer 3

jqGrid 3.6 prend désormais en charge montrant dynamiquement/masquage de colonnes, et il y a une démo "colonne Chooser" sur leur page de démonstration 3.6. Est-ce suffisant pour vos besoins?

Answer 4

Recherche getColProp et setColProp dans leurs documents: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

Answer 5

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

Answer 6

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----------