使用jqGrid将列显示为行 [英] Display columns as rows using jqGrid

问题描述

有没有一种方法可以将列显示为行?这样行数代表了我们试图显示的对象的属性数，列数就是返回的记录数(在我的情况下，它总是一个记录).

Is there a way to display columns as rows? So that the number of rows represents the number of properties of the object we are trying to display and the number of columns is the number of records returned (in my case it is always one record).

图片

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

I tried searching for an existing answer but haven't found one. I also tried using formatters but I guess they are only used to format a specified cell and not the whole table.

推荐答案

我想您需要显示该对象的可枚举属性(请参见

I suppose that you need to display enumerable properties of the object (see here) and the values of the properties. The corresponding code could be for example the following:

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/使用代码并显示以下结果

The demo https://jsfiddle.net/OlegKi/euau0yqj/2/ uses the code and displays the following results

该演示的主要逻辑在jsonReader.root中，该逻辑应返回包含数据的数组.我在演示免费jqGrid 中使用过，它是我自一年以来开发的jqGrid的分支，但主要功能也应与旧版本的jqGrid一起使用.

The main logic of the demo is in jsonReader.root, which should return the array with the data. I used in the demo free jqGrid, the fork of jqGrid, which I develop since a year, but the main functionality should work with the old versions of jqGrid too.

这篇关于使用jqGrid将列显示为行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！