Skip to content

Commit 5a0511e

Browse files
maxazanmaxazan
committed
resize demo
1 parent c34cdaa commit 5a0511e

File tree

2 files changed

+147
-0
lines changed

2 files changed

+147
-0
lines changed

‎examples/example-bootstrap-resize.html

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="">
7+
<meta name="author" content="">
8+
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
9+
10+
<title>TreeGrid for Bootstrap 3.0.x</title>
11+
12+
<!-- Bootstrap core CSS -->
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
14+
<link rel="stylesheet" href="../css/jquery.treegrid.css">
15+
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/default.min.css">
16+
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
17+
<script>hljs.initHighlightingOnLoad();</script>
18+
19+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
20+
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
21+
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap3.js"></script>
22+
<script type="text/javascript">
23+
24+
$(document).ready(function() {
25+
$('.tree').treegrid();
26+
$('.tree-2').treegrid({
27+
expanderExpandedClass: 'glyphicon glyphicon-minus',
28+
expanderCollapsedClass: 'glyphicon glyphicon-plus'
29+
});
30+
31+
});
32+
</script>
33+
<script>
34+
(function(i, s, o, g, r, a, m) {
35+
i['GoogleAnalyticsObject'] = r;
36+
i[r] = i[r] || function() {
37+
(i[r].q = i[r].q || []).push(arguments)
38+
}, i[r].l = 1 * new Date();
39+
a = s.createElement(o),
40+
m = s.getElementsByTagName(o)[0];
41+
a.async = 1;
42+
a.src = g;
43+
m.parentNode.insertBefore(a, m)
44+
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
45+
46+
ga('create', 'UA-43342702-1', 'maxazan.github.io');
47+
ga('send', 'pageview');
48+
49+
</script>
50+
</head>
51+
52+
<body>
53+
<div class="container">
54+
55+
<h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> Bootstrap 3 resize examples</h1>
56+
57+
<table class="table tree">
58+
<tr class="treegrid-1">
59+
<td>Root node 1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
60+
</tr>
61+
<tr class="treegrid-2 treegrid-parent-1">
62+
<td>Node 1-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
63+
</tr>
64+
<tr class="treegrid-3 treegrid-parent-1">
65+
<td>Node 1-2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
66+
</tr>
67+
<tr class="treegrid-4 treegrid-parent-3">
68+
<td>Node 1-2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
69+
</tr>
70+
<tr class="treegrid-5">
71+
<td>Root node 2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
72+
</tr>
73+
<tr class="treegrid-6 treegrid-parent-5">
74+
<td>Node 2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
75+
</tr>
76+
<tr class="treegrid-7 treegrid-parent-5">
77+
<td>Node 2-2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
78+
</tr>
79+
<tr class="treegrid-8 treegrid-parent-7">
80+
<td>Node 2-2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
81+
</tr>
82+
</table>
83+
<h3>Code</h3>
84+
85+
<pre><code class="html">&lt;link href=&quot;bootstrap-3.0.0/css/bootstrap.css&quot; rel=&quot;stylesheet&quot;&gt;
86+
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/jquery.treegrid.css&quot;&gt;
87+
88+
&lt;script type=&quot;text/javascript&quot; src=&quot;../js/jquery.treegrid.js&quot;&gt;&lt;/script&gt;
89+
&lt;script type=&quot;text/javascript&quot; src=&quot;../js/jquery.treegrid.bootstrap3.js&quot;&gt;&lt;/script&gt;
90+
&lt;script type=&quot;text/javascript&quot;&gt;
91+
$(document).ready(function() {
92+
$(&#39;.tree&#39;).treegrid();
93+
});
94+
&lt;/script&gt;</code></pre>
95+
<h2>Bootstrap TreeGrid example<br>
96+
table-bordered table-striped table-condensed<br>
97+
custom expander</h2>
98+
<table class="table tree-2 table-bordered table-striped table-condensed">
99+
<tr class="treegrid-1">
100+
<td>Root node 1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
101+
</tr>
102+
<tr class="treegrid-2 treegrid-parent-1">
103+
<td>Node 1-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
104+
</tr>
105+
<tr class="treegrid-3 treegrid-parent-1">
106+
<td>Node 1-2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
107+
</tr>
108+
<tr class="treegrid-4 treegrid-parent-3">
109+
<td>Node 1-2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
110+
</tr>
111+
<tr class="treegrid-5">
112+
<td>Root node 2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
113+
</tr>
114+
<tr class="treegrid-6 treegrid-parent-5">
115+
<td>Node 2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
116+
</tr>
117+
<tr class="treegrid-7 treegrid-parent-5">
118+
<td>Node 2-2</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
119+
</tr>
120+
<tr class="treegrid-8 treegrid-parent-7">
121+
<td>Node 2-2-1</td><td class="hidden-xs">Additional info</td><td class="hidden-xs hidden-sm">Additional info2</td><td class="hidden-xs hidden-sm hidden-md">Additional info3</td>
122+
</tr>
123+
</table>
124+
125+
<h3>Code</h3>
126+
<pre><code class="html">&lt;link href=&quot;bootstrap-3.0.0/css/bootstrap.css&quot; rel=&quot;stylesheet&quot;&gt;
127+
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/jquery.treegrid.css&quot;&gt;
128+
129+
&lt;script type=&quot;text/javascript&quot; src=&quot;../js/jquery.treegrid.js&quot;&gt;&lt;/script&gt;
130+
&lt;script type=&quot;text/javascript&quot; src=&quot;../js/jquery.treegrid.bootstrap3.js&quot;&gt;&lt;/script&gt;
131+
&lt;script type=&quot;text/javascript&quot;&gt;
132+
$(document).ready(function() {
133+
$(&#39;.tree&#39;).treegrid({
134+
expanderExpandedClass: &#39;glyphicon glyphicon-minus&#39;,
135+
expanderCollapsedClass: &#39;glyphicon glyphicon-plus&#39;
136+
});
137+
});
138+
&lt;/script&gt;</code></pre>
139+
</div> <!-- /container -->
140+
141+
142+
<!-- Bootstrap core JavaScript
143+
================================================== -->
144+
<!-- Placed at the end of the document so the pages load faster -->
145+
</body>
146+
</html>

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ <h2>Other examples</h2>
103103
<p><a href="examples/example-save-state.html" target="_blank">Save state example</a></p>
104104
<p><a href="examples/example-bootstrap-2.html" target="_blank">TreeGrid for bootstrap 2.x</a></p>
105105
<p><a href="examples/example-bootstrap-3.html" target="_blank">TreeGrid for bootstrap 3.x</a></p>
106+
<p><a href="examples/example-bootstrap-resize.html" target="_blank">TreeGrid for bootstrap 3.x resize demo</a></p>
106107
<p><a href="examples/example-events.html" target="_blank">Events examples</a></p>
107108
<p><a href="examples/example-huge.html" target="_blank">Big data example</a></p>
108109

0 commit comments

Comments
 (0)