Skip to content

Commit e82ccc7

Browse files
c-smilec-smile
committed
virtual table + tree sample
1 parent 95eb17d commit e82ccc7

File tree

2 files changed

+161
-0
lines changed

2 files changed

+161
-0
lines changed

‎samples/+reactor/components/vlist/vlist.tis‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ class VList : Reactor.Component
4343
};
4444
}
4545

46+
function update(data = null) {
47+
super.update(data);
48+
this.post(this.resetPaddings);
49+
}
50+
4651
function onSize() {
4752
this.visibleItems = this.box(#height,#client) / this.itemHeight;
4853
this.swLength = Integer.max(this.swLength,this.visibleItems + 1);

‎samples/+reactor/components/vlist/vtable-tree.htm‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<html>
2+
<head>
3+
<title>Test</title>
4+
<style>
5+
6+
main { size:*; }
7+
8+
table { border:2dip solid #ccc; background:#fff; size:*; border-spacing:0; }
9+
table > thead > tr > th { width:*; } // columns widhts
10+
11+
table > tbody > tr { line-height:1.8em; }
12+
//table > tbody > tr.node { background:#eee; }
13+
table > tbody > tr:current { background:highlight; color: highlighttext; }
14+
15+
table > tbody > tr > td > caption { padding-left:1em; }
16+
17+
// expanded / collpased state:
18+
table > tbody > tr.node > td > caption {
19+
behavior: clickable;
20+
background-image:url(stock:arrow-right);
21+
background-repeat:no-repeat;
22+
background-size: 0.4em 0.6em;
23+
background-position:0.3em 50%;
24+
}
25+
table > tbody > tr.node:expanded > td > caption {
26+
background-image:url(stock:arrow-down);
27+
background-size:0.6em 0.4em;
28+
background-position:0.2em 50%;
29+
}
30+
31+
// nested levels
32+
33+
caption[level="0"] { margin-left:0; }
34+
caption[level="1"] { margin-left:1em; }
35+
caption[level="2"] { margin-left:2em; }
36+
caption[level="3"] { margin-left:3em; }
37+
caption[level="4"] { margin-left:4em; }
38+
39+
</style>
40+
<script type="text/tiscript">
41+
42+
include "vlist.tis";
43+
44+
// Generate tree structure
45+
function treeGenerator() {
46+
var out = [];
47+
for(var g in 5)
48+
{
49+
const key = g.toString();
50+
var group = {
51+
key:key,
52+
expanded:true,
53+
level: 0,
54+
name: String.$(item {key}),
55+
field1: String.$({key}.1),
56+
field2: String.$({key}.2),
57+
items: []
58+
};
59+
out.push(group);
60+
for(var n in 3) {
61+
const key = group.key + "." + n.toString();
62+
var subgroup =
63+
{
64+
key:key,
65+
level: 1,
66+
name: String.$(item {key}),
67+
expanded:true,
68+
field1: String.$({key}.1),
69+
field2: String.$({key}.2),
70+
items: []
71+
};
72+
group.items.push(subgroup);
73+
for(var sn in 4) {
74+
const key = subgroup.key + "." + sn.toString();
75+
subgroup.items.push
76+
{
77+
key:key,
78+
level: 2,
79+
name: String.$(item {key}),
80+
field1: String.$({key}.1),
81+
field2: String.$({key}.2)
82+
};
83+
}
84+
}
85+
}
86+
return out;
87+
}
88+
89+
var tree = treeGenerator();
90+
debug log: tree;
91+
92+
93+
// list flattener - produces flat list from tree structure - only expanded/visible items
94+
95+
function flatList(items) {
96+
var out = [];
97+
function scanItems(items) {
98+
for(var item in items) {
99+
out.push(item);
100+
if( item.expanded && item.items && item.items.length )
101+
scanItems(item.items);
102+
}
103+
}
104+
scanItems(items);
105+
return out;
106+
}
107+
108+
function recordView(record,index) { // function generating single row
109+
const isCurrent = this.currentRecord===record;
110+
return
111+
<tr key={record.key}
112+
class={record.items ? "node" : "leaf"}
113+
:current={isCurrent}
114+
:expanded={record.expanded} >
115+
<td><caption level={record.level}>cell {record.name}</caption></td>
116+
<td>cell {record.field1}</td>
117+
<td>cell {record.field2}</td>
118+
</tr>;
119+
}
120+
121+
var vtable;
122+
123+
function recordsetView() {
124+
return
125+
<VTable recordset={flatList(tree)} @{vtable}>
126+
<columns>
127+
<th>Name</th>
128+
<th>First</th>
129+
<th>Second</th>
130+
</columns>
131+
{ recordView }
132+
</VTable>;
133+
}
134+
135+
// mount
136+
$(main).content(recordsetView());
137+
138+
event click $(tr.node > td > caption) {
139+
const key = this.$p(tr).attributes["key"];
140+
var group = vtable.recordset.find( :g: g.key == key );
141+
assert group;
142+
group.expanded = !group.expanded;
143+
// request to update with new flatList representation
144+
var list = flatList(tree);
145+
vtable.recordset = list;
146+
}
147+
148+
</script>
149+
</head>
150+
<body>
151+
<p>Demo of simple virtual list component &lt;VList>.</p>
152+
<p>The caller shall supply record view producer function.</p>
153+
<p>The list supports multiselection (CTRL+CLICK).</p>
154+
<main></main>
155+
</body>
156+
</html>

0 commit comments

Comments
 (0)