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

另一个解决方案；

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

    }