Colonnes dynamiques dans jqGrid

Question

J'ai essayé avec un succès limité d'obtenir des colonnes dynamiques pour fonctionner avec jqGrid. Limité en ce que je peux contrôler les noms de colonnes et le formatage du contrôleur. Mais quand je fais cela, je ne peux pas entrer les données.

Avez-vous une petite solution d'échantillon qui montre le code du contrôleur pour les deux appels.

Answer 1

Vous pouvez réellement lier la colonne comme d'habitude mais vous pouvez les afficher/masquer à l'exécution en utilisant jquery. par exemple je dois montrer la colonne de lien dans jqgrid pour l'utilisateur d'admin et pour les utilisateurs normaux cette colonne doit être cachée ainsi implémentez ceci de la façon suivante.

  $("#grid").showCol("Link"); 
      $("#grid").hideCol("Link"); 

      $("#grid").trigger("reloadGrid"); 

Answer 2

JQGrid(action, caption, 920, 400, loadtext); 

function columnsData(Data) { 

var str = "["; 
for (var i = 0; i < Data.length; i++) { 
    str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}"; 
    if (i != Data.length - 1) { 
     str = str + ","; 
    } 
} 
str = str + "]"; 
return str; 
} 

function JQGrid(action, caption, width, height, loadtext) { 

var grid = $("#tblGrid"); 
var lastsel; 
var editurl = '/PayInvoice/GridSave'; 
$.ajax({ 
    url: action, 
    dataType: "json", 
    mtype: 'POST', 
    beforeSend: function() { 
     $("#dvloading").show(); 
    }, 
    success: function (result) { 
     if (result) { 
      if (!result.Error) { 
       var colData = columnsData(result.column); 
       colData = eval('{' + colData + '}'); 
       grid.jqGrid('GridUnload'); 
       grid.jqGrid({ 
        url: action, 
        datatype: 'json', 
        mtype: 'POST', 
        colModel: colData, 
        colNames: result.column, 
        // multiselect: true, 
        width: width, 
        height: height, 
        rowNum: 20, 
        rowList: [20, 40, 60], 
        loadtext: loadtext, 
        pager: '#tblGridpager', 
        sortorder: "asc", 
        viewrecords: true, 
        gridview: true, 
        altRows: true, 
        cellEdit: true, 
        cellsubmit: "remote", 
        cellurl: '/PayInvoice/GridSavecell', 
        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 
       }); 
      } 
     } 
    }, 
    error: function (xhr, ajaxOptions, thrownError) { 
     if (xhr && thrownError) { 
      alert('Status: ' + xhr.status + ' Error: ' + thrownError); 
     } 
    }, complete: function() { 
     $("#dvloading").hide(); 
    } 
}); 

} 

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

} 

Answer 3

JQGrid1.Columns.FromDataField(ColumnName).Visible = false; 
JQGrid1.Columns.FromDataField(ColumnName).HeaderText = "Sample"; 

Answer 4

nous allons ici;

$("#datagrid").jqGrid({ 
     //url: "user.json", 
     //datatype: "json", 
     datatype: "local", 
     data: dataArray, 
     colNames:getColNames(dataArray[0]), 
     colModel:getColModels(dataArray[0]), 
     rowNum:100, 
     loadonce: true, 
     pager: '#navGrid', 
     sortname: 'SongId', 
     sortorder: "asc", 
     height: "auto", //210, 
     width:"auto", 
     viewrecords: true, 
     caption:"JQ GRID" 
    }); 

    function getColNames(data) { 
     var keys = []; 
     for(var key in data) { 
      if (data.hasOwnProperty(key)) { 
       keys.push(key); 
      } 
     } 

     return keys; 
    } 

    function getColModels(data) { 
     var colNames= getColNames(data); 
     var colModelsArray = []; 
     for (var i = 0; i < colNames.length; i++) { 
      var str; 
      if (i === 0) { 
       str = { 
        name: colNames[i], 
        index:colNames[i], 
        key:true, 
        editable:true 
       }; 
      } else { 
       str = { 
        name: colNames[i], 
        index:colNames[i], 
        editable:true 
       }; 
      } 
      colModelsArray.push(str); 
     } 

     return colModelsArray; 
    }