1

我正在使用 JSONTable 插件并尝试通过从数组对象中获取值来动态地将值传递给“head”和“json”。例如，我可以加载一个新的 json 文件，将其转换为 js 对象并读取新的“head”和“json”属性。 

$("#dataTable").jsonTable({
    head : ['#','Operating System','Market Share'],
    json : ['id', 'name', 'share']
});

我在使用其他插件时遇到了类似的问题。我知道这应该是一个非常明显的事情，但一直无法弄清楚如何做到这一点。我曾尝试在字符串中传递整个函数，但这会将其呈现为字符串而不是函数对象。任何帮助将不胜感激。谢谢！

4

1 回答 1

0

您可以读取数组中第一项的属性并将它们用作列名（这是一个测试）：

HTML：

<textarea id="data" cols="60" rows="10">[
{"id" : 1, "name" : "iOS", "share" : 57.56},
{"id" : 2, "name" : "Android", "share" : 24.66},
{"id" : 3, "name" : "Java ME", "share" : 10.72},
{"id" : 4, "name" : "Symbian", "share" : 2.49},
{"id" : 4, "name" : "Blackberry", "share" : 2.26},
{"id" : 4, "name" : "Windows Phone", "share" : 1.33}
]</textarea><br />
<input type="button" id="fillButton" value="Fill table" /><br/>
<table id="dataTable"></table>

JavaScript：

function fillTable(tableId, jsonString) {
    var data = JSON.parse(jsonString),
        dataColumn, dataColumns = [];

    if(!(data instanceof Array) || data.length === 0)
        return;
    for (dataColumn in data[0])
        if (data[0].hasOwnProperty(dataColumn))
            dataColumns.push(dataColumn);
    $("#" + tableId)
        .html("<table id='" + tableId + "'><thead></thead><tbody></tbody></table>")
        .jsonTable({
            head: dataColumns,
            json: dataColumns,
        })
        .jsonTableUpdate({
            source: data
        });
}

$("#fillButton").click(function () {
    fillTable("dataTable", $("#data").val());
});

结果：

id    name            share
1     iOS             57.56
2     Android         24.66
3     Java ME         10.72
4     Symbian         2.49
4     Blackberry      2.26
4     Windows Phone   1.33

尝试更改 中的数据值<textarea>并按下按钮。只有在 JSON 中的所有位置都更改了名称时，您才能更改列名。

于 2013-08-28T13:26:13.640 回答