为 jQuery-jTable 动态创建多级 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'
        }
    }
}    

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

回答

多亏了 Barmar 和广泛的阅读，我才明白了这一点。诀窍是在每个级别插入一个新对象。将其弹出到 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);