使用 jqGrid 将列显示为行

有没有办法将列显示为行？因此，行数代表我们尝试显示的对象的属性数量，列数代表返回的记录数（在我的情况下，它始终是一条记录）。

Picture

我尝试寻找现有的答案，但还没有找到。我也尝试过使用格式化程序，但我想它们仅用于格式化指定的单元格，而不是整个表格。

我想您需要显示对象的可枚举属性（请参阅here https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) 和属性值。相应的代码可以例如如下：

var myobject = {
    prop1: "value1",
    prop2: 2,
    prop3: new Date(),
    prop4: true,
    prop5: function () { return "Hello world!"; },
    prop6: null,
    prop7: { x: 1, y: 2, z: "some text"}
};
$("#grid").jqGrid({
    colModel: [
        { name: "name", width: 80 },
        { name: "type", width: 80 },
        { name: "value", width: 400 }
    ],
    datatype: "jsonstring",
    datastr: myobject,
    jsonReader: {
        repeatitems: false,
        root: function (obj) {
            var prop, result = [], value;
            for (prop in obj) {
                if (obj.hasOwnProperty(prop)) {
                    value = obj[prop];
                    result.push({
                        name: prop,
                        type: $.type(value),
                        value: $.type(value) === "object" ?
                                JSON.stringify(value) :
                                String(value)
                    });
                }
            }
            return result;
        },
    },
    iconSet: "fontAwesome",
    autoencode: true,
    rownumbers: true,
    cmTemplate: { autoResizable: true },
    autoResizing: { compact: true },
    viewrecords: true,
    pager: true
});

演示https://jsfiddle.net/OlegKi/euau0yqj/2/ https://jsfiddle.net/OlegKi/euau0yqj/2/使用代码并显示以下结果

demo的主要逻辑在jsonReader.root，它应该返回包含数据的数组。我在演示中使用了免费 jqGrid https://github.com/free-jqgrid/jqGrid，jqGrid 的分支，我开发了一年，但主要功能也应该适用于旧版本的 jqGrid。