动态创建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);