YUIデータテーブルを使用してデータを表示するフロントエンドでプロジェクトを行っています。そして、Spring MVC フレームワークを使用しています。コントローラーはデータベースからデータを取得し、JSON 形式でビューに返します。
私のデータ ソースは、JSON データを返す URL です。ただし、JSON データはデータベースから抽出したデータから生成されるためです。したがって、データテーブルの列番号は固定されていません。
データソースから動的にロードされる ColumnDef を使用してデータテーブルをレンダリングする方法はありますか?
これは、sample.jsp の単純なデータで試した方法ですが、どういうわけかうまくいきません。
<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.Basic = function() {
var myData = {"userInfo":[
{"name":"Smith, Paul","age": "7","level":"","experience":"31","subtotal":"$0.00"},
{"name":"Jones, Steve","age":"","level":"","experience":"60","subtotal":"$0.00"},
{"name":"Dow, James","age":"","level":"","experience":"31","subtotal":"$0.00"},
{"name":"Reid, Jake","age":"","level":"","experience":"6","subtotal":"$10.00"},
{"name":"Smith, Nancy","age":"34","level":"3r","experience":"8","subtotal":"$0.00"}
]};
function getColumns(o, key) {
var k, cols = [], value = o[key][0];
if (value && typeof value === 'object') {
for (k in value) {
if (value.hasOwnProperty(k)) {
getColumns(value, k);
if (value.constructor !== Array) {
cols.push(k);
}
}
}
}
return cols;
}
var myColumns = getColumns(myData, "userInfo");
var myDataSource = new YAHOO.util.DataSource(myData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
fields: columns
};
var myDataTable = new YAHOO.widget.DataTable("dataTable",
myColumns, myDataSource, {initialLoad: true, caption: tableCaption});
return {
oDS: myDataSource,
oDT: myDataTable
};
}();
});