example-bootstrap-resize.html 8.3 KB

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