4

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'
        }
    }
}

表示されているデータはピボット テーブルであるため、列の数とそのタイトルが変わります。上記のフィールド セクションを動的に変更することはできますか? たとえば、関連する列タイトルを持つ 4 つのピボット列を作成します。

答え

バーマーと多読のおかげで、私はそれを理解しました。トリックは、各レベルで新しいオブジェクトを挿入することです。これを 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));
4

1 に答える 1

4

フィールドの仕様を動的に変更する方法が見当たりません。ただし、テーブルを変更している場合は、単純に古い 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);
于 2013-09-14T10:19:26.287 に答える