2013-08-28 41 views
1

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

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

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

+0

没错,我正在测试它以检查它是否符合我的要求。我尝试了一些与安德烈亚斯彼得森WAtable类似的东西,但偶然发现了这件事。 –

+0

提供链接到插件文档可能会有所帮助。 –

回答

0

您可以在阵列中读出的第一个项目的属性,并把它们作为列名(here是一个测试):

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中的任何地方更改名称时,才能更改列名称。

+0

非常感谢您的解决方案! –

+0

不客气:) – kol