jqGrid中的動態列

Question

我試過用有限的成功來獲取動態列以使用jqGrid。因爲我可以控制控制器的列名和格式。但當我這樣做時，我無法獲取數據。

您是否有一個小樣本解決方案，顯示兩個調用的控制器代碼。

Answer 1

你可以像平常一樣綁定列，但是你可以在運行時使用jquery顯示/隱藏它們。例如我必須在jqgrid中爲管理員用戶顯示鏈接列，對於需要隱藏列的普通用戶，請按以下方式執行此操作。

  $("#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

在這裏，我們走;

$("#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; 
    }