Динамические столбцы в jqGrid

Question

Я пытался с ограниченным успехом заставить динамические столбцы работать с jqGrid. Ограничено в том, что я могу контролировать имена столбцов и форматирование с контроллера. Но когда я делаю это, я не могу получить данные.

У вас есть небольшой пример решения, в котором показан код контроллера для двух вызовов.

Answer 1

Вот и мы;

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

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

вы можете связать столбец как обычно, но вы можете показать / скрыть их во время выполнения, используя jquery. например, я должен показать столбец ссылок в jqgrid для пользователя-администратора и для обычных пользователей, этот столбец должен быть скрыт, поэтому выполните это следующим образом.

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

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