Skip to content

Commit 632b690

Browse files
bcinarlibcinarli
committed
Examples
1 parent 882e67b commit 632b690

File tree

4 files changed

+197
-16
lines changed

4 files changed

+197
-16
lines changed

‎dist/uxrocket.treelist.css‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,6 @@
77
padding-left: 1em;
88
}
99

10-
.uxr-treelist-content.uxr-treelist-header ~ .uxr-treelist-content td:first-child,
11-
.uxr-treelist-content.uxr-treelist-header ~ .uxr-treelist-content th:first-child {
12-
padding-left: 2em;
13-
}
14-
1510
.uxr-treelist-collapsed {
1611
display: none;
1712
}

‎dist/uxrocket.treelist.min.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
* Tree view in tables
33
* @author Bilal Cinarli <[email protected]> (https://github.com/bcinarli)
44
* @version 0.1.0
5-
* @build Thu Sep 17 2015 21:54:03 GMT+0300 (EEST)
5+
* @build Thu Sep 17 2015 22:31:46 GMT+0300 (EEST)
66
*/
7-
.uxr-treelist-content td:first-child,.uxr-treelist-content th:first-child{padding-left:1em}.uxr-treelist-content.uxr-treelist-header ~ .uxr-treelist-content td:first-child,.uxr-treelist-content.uxr-treelist-header ~ .uxr-treelist-content th:first-child{padding-left:2em}.uxr-treelist-collapsed{display:none}.uxr-treelist-toggle{cursor:pointer}
7+
.uxr-treelist-content td:first-child,.uxr-treelist-content th:first-child{padding-left:1em}.uxr-treelist-collapsed{display:none}.uxr-treelist-toggle{cursor:pointer}

‎example/index.html‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>UX Rocket Treelist</title>
6+
7+
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
8+
<script src="../lib/uxrocket.treelist.js"></script>
9+
<script>
10+
$(function(){
11+
$('.treelist').treelist();
12+
});
13+
</script>
14+
15+
<style>
16+
*, *:before, *:after { box-sizing: border-box }
17+
html { width: 100%; height: 100%; }
18+
body { width: 100%; height: 100%; margin: 0; padding: 0; font: 16px/1.4 "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
19+
.content { width: 48em; margin: 0 auto; padding: 5em; }
20+
21+
table {
22+
border-collapse: collapse;
23+
width: 100%;
24+
}
25+
26+
th, td {
27+
padding: 5px;
28+
}
29+
30+
th {
31+
text-align: left;
32+
border: 1px solid #f0f0f0;
33+
background-color: #f0f0f0;
34+
}
35+
36+
td {
37+
border: 1px solid #f0f0f0;
38+
}
39+
40+
td:nth-child(2){
41+
width: 75px;
42+
}
43+
44+
td:last-child {
45+
width: 100px;
46+
}
47+
48+
.multi tr[data-uxrtl-parent="2"] td:first-child,
49+
.multi tr[data-uxrtl-parent="6"] td:first-child {
50+
padding-left: 2em;
51+
}
52+
</style>
53+
54+
<link rel="stylesheet" href="../dist/uxrocket.treelist.css" />
55+
</head>
56+
<body>
57+
<div class="content">
58+
<h2>Single Tree</h2>
59+
<table class="treelist">
60+
<thead>
61+
<tr>
62+
<th>Name</th>
63+
<th>Version</th>
64+
<th>Type</th>
65+
</tr>
66+
</thead>
67+
<tbody>
68+
<tr data-uxrtl-id="1">
69+
<td class="uxr-treelist-toggle">UX Rocket Treelist</td>
70+
<td>0.1.0</td>
71+
<td>Plugin</td>
72+
</tr>
73+
<tr data-uxrtl-id="2" data-uxrtl-parent="1">
74+
<td>jQuery</td>
75+
<td>Latest</td>
76+
<td>Dependency</td>
77+
</tr>
78+
<tr data-uxrtl-id="3">
79+
<td>UX Rocket Autocomplete</td>
80+
<td>2.0.2</td>
81+
<td>Plugin</td>
82+
</tr>
83+
<tr data-uxrtl-id="4" data-uxrtl-parent="3">
84+
<td>jQuery</td>
85+
<td>Latest</td>
86+
<td>Dependency</td>
87+
</tr>
88+
<tr data-uxrtl-id="5" data-uxrtl-parent="3">
89+
<td>Handlebars</td>
90+
<td>Latest</td>
91+
<td>Dependency</td>
92+
</tr>
93+
<tr data-uxrtl-id="6">
94+
<td>UX Rocket Modal</td>
95+
<td>0.8.0</td>
96+
<td>Plugin</td>
97+
</tr>
98+
<tr data-uxrtl-id="7" data-uxrtl-parent="6">
99+
<td>jQuery</td>
100+
<td>Latest</td>
101+
<td>Dependency</td>
102+
</tr>
103+
<tr data-uxrtl-id="8" data-uxrtl-parent="6">
104+
<td>Colorbox</td>
105+
<td>Latest</td>
106+
<td>Dependency</td>
107+
</tr>
108+
<tr data-uxrtl-id="9">
109+
<td>UX Rocket Shortcodes</td>
110+
<td>0.2.0</td>
111+
<td>Plugin</td>
112+
</tr>
113+
</tbody>
114+
</table>
115+
116+
<h2>Multi Level Tree</h2>
117+
<table class="treelist multi">
118+
<tr data-uxrtl-id="0">
119+
<td>Parent Node 1</td>
120+
<td>&nbsp;</td>
121+
<td>&nbsp;</td>
122+
</tr>
123+
<tr data-uxrtl-id="1" data-uxrtl-parent="0">
124+
<td>Sub Node 1.1</td>
125+
<td>&nbsp;</td>
126+
<td>&nbsp;</td>
127+
</tr>
128+
<tr data-uxrtl-id="2" data-uxrtl-parent="0">
129+
<td>Sub Parent Node 1.2</td>
130+
<td>&nbsp;</td>
131+
<td>&nbsp;</td>
132+
</tr>
133+
<tr data-uxrtl-id="3" data-uxrtl-parent="2">
134+
<td>Sub Node 1.2.1</td>
135+
<td>&nbsp;</td>
136+
<td>&nbsp;</td>
137+
</tr>
138+
<tr data-uxrtl-id="4" data-uxrtl-parent="2">
139+
<td>Sub Node 1.2.2</td>
140+
<td>&nbsp;</td>
141+
<td>&nbsp;</td>
142+
</tr>
143+
<tr data-uxrtl-id="5" data-uxrtl-parent="2">
144+
<td>Sub Node 1.2.3</td>
145+
<td>&nbsp;</td>
146+
<td>&nbsp;</td>
147+
</tr>
148+
<tr data-uxrtl-id="6" data-uxrtl-parent="0">
149+
<td>Sub Parent Node 1.3</td>
150+
<td>&nbsp;</td>
151+
<td>&nbsp;</td>
152+
</tr>
153+
<tr data-uxrtl-id="7" data-uxrtl-parent="6">
154+
<td>Sub Node 1.3.1</td>
155+
<td>&nbsp;</td>
156+
<td>&nbsp;</td>
157+
</tr>
158+
<tr data-uxrtl-id="8" data-uxrtl-parent="6">
159+
<td>Sub Node 1.3.2</td>
160+
<td>&nbsp;</td>
161+
<td>&nbsp;</td>
162+
</tr>
163+
<tr data-uxrtl-id="9" data-uxrtl-parent="6">
164+
<td>Sub Node 1.3.3</td>
165+
<td>&nbsp;</td>
166+
<td>&nbsp;</td>
167+
</tr>
168+
<tr data-uxrtl-id="10">
169+
<td>Parent Node 2</td>
170+
<td>&nbsp;</td>
171+
<td>&nbsp;</td>
172+
</tr>
173+
<tr data-uxrtl-id="11" data-uxrtl-parent="10">
174+
<td>Sub Node 2.1</td>
175+
<td>&nbsp;</td>
176+
<td>&nbsp;</td>
177+
</tr>
178+
<tr data-uxrtl-id="12" data-uxrtl-parent="10">
179+
<td>Sub Node 2.2</td>
180+
<td>&nbsp;</td>
181+
<td>&nbsp;</td>
182+
</tr>
183+
<tr data-uxrtl-id="13">
184+
<td>Node 3</td>
185+
<td>&nbsp;</td>
186+
<td>&nbsp;</td>
187+
</tr>
188+
</table>
189+
</div>
190+
</body>
191+
</html>

‎lib/_uxrocket-treelist.scss‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,17 @@
88

99
}
1010

11+
&-treelist-header {
12+
13+
}
14+
1115
&-content {
1216
td,
1317
th {
1418
&:first-child {
1519
padding-left: 1em;
1620
}
1721
}
18-
19-
&.uxr-treelist-header ~ .uxr-treelist-content {
20-
td,
21-
th {
22-
&:first-child {
23-
padding-left: 2em;
24-
}
25-
}
26-
}
2722
}
2823

2924
&-collapsed {

0 commit comments

Comments
 (0)