jqGrid动态列绑定

Question

如何动态绑定jqGrid？这些列在设计时不可用，而仅在运行时可用。

在当前的jqGrid设计中，必须预先填充colmodels和其他属性，以使网格正常工作。

对此方向的任何输入将不胜感激。

Answer 1

我的解决方案与Teoman Shipahi自2015年8月以来的出色回答相同。我有一个Web服务，该服务返回一组JSON数据，但是实际的列可能会随时间变化。我想做的是在jqGrid中隐藏一些JSON列，并根据此特定JSON字段是否为重要字段之一（在本例中为SegmentName）来设置某些列的宽度。这是我想出的：$(function () {    //  Load the JSON data we'll need to populate our jqGrid    // ID of a [Segment_Set] record in our database (which our web service will load the data for.    var SegmentSetId = 12345;    $.ajax(    {        type: "GET",        url: "/Service1.svc/LoadSegmentAttributes/" + SegmentSetId,        dataType: "json",        success: function (JSONdata) {            //             //  Work through our JSON data, and create the two arrays needed by jqGrid             //  to display this dynamic data.            //            var listOfColumnModels = [];            var listOfColumnNames = [];            for (var prop in JSONdata[0]) {                if (JSONdata[0].hasOwnProperty(prop)) {                    //  We have found one property (field) in our JSON data.                    //  Add a column to the list of Columns which we want our jqGrid to display                    listOfColumnNames.push(prop);                    //  How do we want this field to be displayed in our jqGrid ?                    var bHidden = (prop == "SegmentID") || (prop == "SegmentSequenceInx");                    var columnWidth = (prop == "SegmentName") ? 200 : 50;                    listOfColumnModels.push({                        name: prop,                        width: columnWidth,                        sortable: true,                        hidden: bHidden                    });                }            }            //  Now we have our JSON data, and list of Column Headings and Models, we can create our jqGrid.            CreateJQGrid(JSONdata, listOfColumnModels, listOfColumnNames);        }    });});这是创建jqGrid的函数：function CreateJQGrid(JSONdata, listOfColumnModels, listOfColumnNames) {    //  After loading the JSON data from our webservice, and establishing the list of     //  Column Names & Models, we can call this function to create the jqGrid.    $("#SegmentRulesGrid").jqGrid({        datatype: "local",        data: JSONdata,        localReader: {            id: "SegmentID",        //  The Primary Key field in our JSONdata             repeatitems: false        },        mtype: "GET",        colNames: listOfColumnNames,        colModel: listOfColumnModels,        rowNum: 15,        loadonce: true,        gridview: true,        autowidth: true,        height: 350,        pager: '#pager',        rowList: [15, 30, 100, 300],        rownumbers: true,        viewrecords: true,        caption: 'Segment Rules',    });}希望这可以帮助。显然，我的解决方案的一个缺点是，它坚持要求您在将所有 JSON数据显示在网格中之前先加载所有 JSON数据，而不是一次仅加载一页数据。如果您有大量数据，这可能是个问题。

Answer 2

另一个解决方案；&nbsp;$("#datagrid").jqGrid({&nbsp; &nbsp; &nbsp; &nbsp; //url: "user.json",&nbsp; &nbsp; &nbsp; &nbsp; //datatype: "json",&nbsp; &nbsp; &nbsp; &nbsp; datatype: "local",&nbsp; &nbsp; &nbsp; &nbsp; data: dataArray,&nbsp; &nbsp; &nbsp; &nbsp; colNames:getColNames(dataArray[0]),&nbsp; &nbsp; &nbsp; &nbsp; colModel:getColModels(dataArray[0]),&nbsp; &nbsp; &nbsp; &nbsp; rowNum:100,&nbsp; &nbsp; &nbsp; &nbsp; loadonce: true,&nbsp; &nbsp; &nbsp; &nbsp; pager: '#navGrid',&nbsp; &nbsp; &nbsp; &nbsp; sortname: 'SongId',&nbsp; &nbsp; &nbsp; &nbsp; sortorder: "asc",&nbsp; &nbsp; &nbsp; &nbsp; height: "auto", //210,&nbsp; &nbsp; &nbsp; &nbsp; width:"auto",&nbsp; &nbsp; &nbsp; &nbsp; viewrecords: true,&nbsp; &nbsp; &nbsp; &nbsp; caption:"JQ GRID"&nbsp; &nbsp; });&nbsp; &nbsp; function getColNames(data) {&nbsp; &nbsp; &nbsp; &nbsp; var keys = [];&nbsp; &nbsp; &nbsp; &nbsp; for(var key in data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (data.hasOwnProperty(key)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keys.push(key);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return keys;&nbsp; &nbsp; }&nbsp; &nbsp; function&nbsp; getColModels(data) {&nbsp; &nbsp; &nbsp; &nbsp; var colNames= getColNames(data);&nbsp; &nbsp; &nbsp; &nbsp; var colModelsArray = [];&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < colNames.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var str;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (i === 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; str = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: colNames[i],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; index:colNames[i],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key:true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; editable:true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; str = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: colNames[i],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; index:colNames[i],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; editable:true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; colModelsArray.push(str);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return colModelsArray;&nbsp; &nbsp; }