JSONを使用したstaticなツリーを試してみた。サーバからJSON返せれば素敵だけど、それは先のお話。
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Sample - Tree</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var json =
[
{'text':'A', 'id':1, 'leaf':false, 'children':[
{'text':'AA', 'id':11, 'leaf':false, 'children':[
{'text':'AAA', 'id':111, 'leaf':true},
{'text':'AAB', 'id':112, 'leaf':true},
]},
{'text':'AB', 'id':12, 'leaf':false, 'children':[
{'text':'ABA', 'id':121, 'leaf':true},
{'text':'ABB', 'id':122, 'leaf':true},
]}
]},
{'text':'B', 'id':2, 'leaf':false, 'children':[
{'text':'BA', 'id':21, 'leaf':false, 'children':[
{'text':'BAA', 'id':211, 'leaf':true},
{'text':'BAB', 'id':212, 'leaf':true},
]},
{'text':'BB', 'id':12, 'leaf':false, 'children':[
{'text':'BBA', 'id':221, 'leaf':true},
{'text':'BBB', 'id':222, 'leaf':true},
]}
]}
];
var tree = new Ext.tree.TreePanel('tree', {
// jsonを内部でcreateNodeするために必要
loader: new Ext.tree.TreeLoader(),
// 要素のドラッグ＆ドロップを許可
enableDD:true,
// ルート要素の可視設定
rootVisible:true,
});
var root = new Ext.tree.AsyncTreeNode({
text: 'Root',
id:'root',
// ルート要素のドラッグを許可しない
draggable:false,
// 上記の変数jsonを設定
children: json
});
tree.setRootNode(root);
tree.render();
// ルート要素を展開
root.expand();
});
//--></script>
<style type="text/css">
#tree {
height:200px;
width:100px;
border:1px solid #c3daf9;
overflow:auto;
}
</style>
</head>
<body>
<div id="tree" />
</body>
</html>最終的にはGrailsと連携させる予定。GrailsのJsonビルダーが素敵。
0 件のコメント:
コメントを投稿