使用jqGrid將行顯示爲行

有沒有辦法將列顯示爲行？因此，行數代表我們試圖顯示的對象的屬性數量，列數是返回的記錄數（在我的情況下，它總是一個記錄）。使用jqGrid將行顯示爲行

圖片

我試圖尋找現有的應答，但還沒有找到一個。我也嘗試使用格式化程序，但我想它們只用于格式化指定的單元格而不是整個表格。

2016-01-06 Norbert Szenasi

我覺得這個問題很有趣，但我們應該更清楚地指定輸入數據。讓我們輸入具有簡單屬性的對象數組（屬性不是對象，而是字符串，布爾值或數字）。首先我們需要生成colModel。列數將與輸入數組中元素的數量相同。然後必須從輸入數據建立網格數據。另一方面，如果你需要顯示**一個對象**（你寫了一條記錄）的屬性，那麼你可以創建一個非常簡單的jqGrid，它可以做到這一點。 – Oleg

我想你需要顯示對象的enumerable屬性（見here）和屬性的值。對應的代碼可以是例如下列：

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/使用代碼和顯示下列結果

演示的主要邏輯是在jsonReader.root，它應該返回帶數據的數組。我在演示free jqGrid中使用了jqGrid的分支，這是我自一年以來開發的分支，但主要功能也應該與舊版本的jqGrid一起工作。

來源

2016-01-06 17:44:35 Oleg

非常感謝Oleg爲您投入的時間和精力！我會嘗試並回復你。 –

我忘了回覆你了。只是讓你知道奧列格，你的回答很大程度上幫助解決了我的問題。非常感謝 –

@NorbertSzenasi：不客氣！ – Oleg

使用jqGrid將行顯示爲行

回答

相關問題