jQuery多级Javascript对象的动态创建

Question

jTable (jTable.org)布局由下面的代码定义。我想动态地构建它(基于来自数据库查询的AJAX返回)。

{
    title: 'My Dynamic Title',
    fields: {
        id: {
            title: 'ID'
        },
        salesperson: {
            title: 'Salesperson'
        },
        pivot1: {
            title: '2012-01'
        },
        pivot2: {
            title: '2012-02'
        },
        pivot3: {
            title: '2012-03'
        }
    }
}    

所显示的数据是一个枢轴表，因此列数及其标题将发生变化。我可以动态地修改上面的字段部分吗？例如，有四个枢轴列和相关的列标题。

答案

多亏了巴玛尔和广泛的阅读我才弄明白的。诀窍是在每个级别插入一个新对象。将其插入jsfiddle.net中，您就可以看到结果。它将以编程方式创建上面的对象。

var myobj = {}; //description for jquery-jtable configuration.
var colnames = ['pivot1', 'pivot2', 'pivot3'];
var titles   = ['2012-01', '2012-02', '2012-03'];

myobj['title'] = "My Dynamic Title";
myobj['fields'] = {};                     //create a second level under 'fields'.
myobj.fields['id'] = {title: 'ID'};
myobj.fields['salesperson'] = {title: 'Salesperson'};
for(i = 0; i < colnames.length; i++) {
    myobj.fields[colnames[i]] = {};       //create a third level under column name.
    myobj.fields[colnames[i]].title = titles[i];
}
alert(JSON.stringify(myobj, null, 4));

Answer 1

我没有看到一种动态更改字段规范的方法。但是，如果要修改表，只需销毁旧的jTable并重新初始化它：

$("#TableContainer").jtable("destroy");
$("#TableContainer").jtable({
    // New options
});

如果有一些选项在所有实例中保持一致，则可以使用变量来保存这些选项：

var jtable_options = {
    title: "My Table Title",
    fields: {}
};

在初始化jtable之前，您需要：

jtable_options.fields = {
    id: { title: 'ID' },
    salesperson: { title: 'Salesperson' }
    ...
};
$("#TableContainer").jtable(jtable_options);