1 |
95b003ff
|
Origo
|
<html>
|
2 |
|
|
<head>
|
3 |
|
|
<title>TreeGrid - Dojo</title>
|
4 |
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
5 |
|
|
|
6 |
|
|
<style type="text/css">
|
7 |
|
|
@import url("dojo/resources/dojo.css");
|
8 |
|
|
@import url("dojo/resources/dnd.css");
|
9 |
|
|
@import url("dojo.treetable.css");
|
10 |
|
|
body {
|
11 |
|
|
padding: 20px;
|
12 |
|
|
}
|
13 |
|
|
</style>
|
14 |
|
|
|
15 |
|
|
<script type="text/javascript" src="dojo/dojo.js"
|
16 |
|
|
djConfig="parseOnLoad:true"></script>
|
17 |
|
|
<script type="text/javascript" src="dojo.treetable.js"></script>
|
18 |
|
|
<script type="text/javascript">
|
19 |
|
|
|
20 |
|
|
/* test */
|
21 |
|
|
var srcJson = "";
|
22 |
|
|
|
23 |
|
|
var data = [
|
24 |
|
|
{'id': 1, 'pid': 0, title: 'Root', published: 'true', updated: '2009-09-19'}
|
25 |
|
|
];
|
26 |
|
|
|
27 |
|
|
function rand ( n )
|
28 |
|
|
{
|
29 |
|
|
return ( Math.floor ( Math.random ( ) * n + 1 ) );
|
30 |
|
|
}
|
31 |
|
|
|
32 |
|
|
function getEl(id, pid)
|
33 |
|
|
{
|
34 |
|
|
return {'id': id, 'pid': pid, title: 'Lorem item ' + id, published: 'true', updated: '2009-09-19'};
|
35 |
|
|
}
|
36 |
|
|
|
37 |
|
|
// generating test data
|
38 |
|
|
for (var i = 2; i < 12; i++) {
|
39 |
|
|
data.push(getEl(i, 1));
|
40 |
|
|
for (var j = 1; j < 11; j++) {
|
41 |
|
|
data.push(getEl(i + '_' + j, i));
|
42 |
|
|
for (var k = 1; k < 11; k++) {
|
43 |
|
|
data.push(getEl(i + '_' + j + '_' + k, i + '_' + j));
|
44 |
|
|
}
|
45 |
|
|
}
|
46 |
|
|
}
|
47 |
|
|
|
48 |
|
|
var hNodes;
|
49 |
|
|
var hTree;
|
50 |
|
|
dojo.addOnLoad(function(){
|
51 |
|
|
hTree = new TreeTable({
|
52 |
|
|
renderTo: 'treegrid',
|
53 |
|
|
nodes: data,
|
54 |
|
|
indent: 20,
|
55 |
|
|
cm: [
|
56 |
|
|
{text: '#', width: '20px'},
|
57 |
|
|
{text: 'Title', width: '150px'},
|
58 |
|
|
{text: 'Published',
|
59 |
|
|
data: 'published',
|
60 |
|
|
renderer: function(node) {
|
61 |
|
|
return node.config.published == 'true' ? 'Yes' : 'No';
|
62 |
|
|
},
|
63 |
|
|
width: '60px'
|
64 |
|
|
},
|
65 |
|
|
{text: 'Updated At', data: 'updated'}
|
66 |
|
|
],
|
67 |
|
|
titleWidth: '60%'
|
68 |
|
|
});
|
69 |
|
|
hTree.render();
|
70 |
|
|
hTree.node(1).expand();
|
71 |
|
|
hTree.colorize();
|
72 |
|
|
});
|
73 |
|
|
</script>
|
74 |
|
|
</head>
|
75 |
|
|
|
76 |
|
|
<body>
|
77 |
|
|
<h3>Using 1000 nodes</h3>
|
78 |
|
|
<div id="treegrid" class="dijitReset"></div>
|
79 |
|
|
</body>
|
80 |
|
|
</html>
|