jqGrid 中的动态列

Question

我尝试让动态列与 jqGrid 一起使用，但取得了有限的成功。限制在于我可以从控制器控制列名称和格式。但是当我这样做时，我无法获取数据。

您是否有一个小示例解决方案来显示这两个调用的控制器代码。

Answer 1

您实际上可以像平常一样绑定列，但您可以使用 jquery 在运行时显示/隐藏它们。例如，我必须在 jqgrid 中为管理员用户显示链接列，而对于普通用户，该列需要隐藏，因此请按以下方式实现。

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

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

Answer 2

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

Answer 3

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