Question

我有一个接收JSON数据的函数，它可以是任意长度并包含任意数量的列和行数据。

我已经读过jqGrid将是一个很好的jQuery插件，可用于此场景，但我无法让它工作。

我有以下代码尝试让我的表格填充：

//This code is in another section of my web page but the data is valid 
//and is populated over a websocket
var ss = $.parseJSON(data);
var theGrid = jQuery("#list1")[0];
theGrid.addJSONData(ss.NewDataSet.SECURITY_GROUPS);
//alert(ss.NewDataSet.SECURITY_GROUPS[0].NAME);

$(document).ready(function() {
           jQuery("#list1").jqGrid({
            datatype: "local",
            height: 250,
            multiselect: true,
            caption: "Manipulating Array Data"
        });
         });

<table id="list1"></table>

Answer 1

如果jqGrid不适合您，可以试试DataTables。它可能是我最喜欢的，并且如你所描述的那样通过JSON加载非常容易。

以下是如何从AJAX源加载：http://datatables.net/release-datatables/examples/data_sources/ajax.html

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": '../ajax/sources/arrays.txt'
    });
});

<强>更新

var columnArr = [];
var valueArr = [];
var data = ss.NewDataSet.SECURITY_GROUPS; //data is your SECURITY_GROUPS object

//Strip the titles off your first array item only since they are all the same.
$.each(data[0], function(key, value) {
    columnArr.push({"sTitle" : key});
});

$.each(data, function(key, value) {
    var innerArr = [];
    $.each(value, function(innerKey, innerValue) {
        innerArr.push(innerValue);
    });
    valueArr.push(innerArr);
});

$('#example').dataTable( {
    "aaData": valueArr,
    "aoColumns": columnArr
});

传递动态JSON数据以创建HTML表

1 个答案: