example-huge.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="chrome=1">
  6. <title>Jquery-treegrid basic example</title>
  7. <link rel="stylesheet" href="../styles.css">
  8. <link rel="stylesheet" href="../css/jquery.treegrid.css">
  9. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  10. <script type="text/javascript" src="../js/jquery.treegrid.js"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13. //create huge treetable
  14. var count_root_elements=100;
  15. var count_deep=10;
  16. console.log('init');
  17. for(var i=0; i<count_root_elements; i++){
  18. console.log('add');
  19. var tr=$("<tr></tr>").addClass("treegrid-"+i+"-0").appendTo($('.tree')).html("<td>Root node "+i+"</td><td>Additional info</td>");
  20. for(var j=1; j<count_deep; j++){
  21. $("<tr></tr>").addClass("treegrid-"+i+"-"+j).addClass("treegrid-parent-"+i+"-"+(j-1)).appendTo($('.tree')).html("<td>Child node "+i+"-"+j+"</td><td>Additional info</td>");
  22. }
  23. }
  24. $('.tree').treegrid();
  25. });
  26. </script>
  27. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  28. <!--[if lt IE 9]>
  29. <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  30. <![endif]-->
  31. </head>
  32. <body>
  33. <div class="wrapper">
  34. <h1><a href="http://maxazan.github.io/jquery-treegrid/">TreeGrid</a> Big data example</h1>
  35. <table class="tree"></table>
  36. <h2>Code</h2>
  37. <pre>
  38. <code class='html'>
  39. &lt;!doctype html&gt;
  40. &lt;html&gt;
  41. &lt;head&gt;
  42. &lt;meta charset=&quot;utf-8&quot;&gt;
  43. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;chrome=1&quot;&gt;
  44. &lt;title&gt;Jquery-treegrid basic example&lt;/title&gt;
  45. &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/jquery.treegrid.css&quot;&gt;
  46. &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  47. &lt;script type=&quot;text/javascript&quot; src=&quot;../js/jquery.treegrid.js&quot;&gt;&lt;/script&gt;
  48. &lt;script type=&quot;text/javascript&quot;&gt;
  49. $(document).ready(function() {
  50. $('.tree').treegrid();
  51. });
  52. &lt;/script&gt;
  53. &lt;/head&gt;
  54. &lt;body&gt;
  55. &lt;table class=&quot;tree&quot;&gt;
  56. &lt;tr class=&quot;treegrid-1&quot;&gt;
  57. &lt;td&gt;Root node&lt;/td&gt;&lt;td&gt;Additional info&lt;/td&gt;
  58. &lt;/tr&gt;
  59. &lt;tr class=&quot;treegrid-2 treegrid-parent-1&quot;&gt;
  60. &lt;td&gt;Node 1-1&lt;/td&gt;&lt;td&gt;Additional info&lt;/td&gt;
  61. &lt;/tr&gt;
  62. &lt;tr class=&quot;treegrid-3 treegrid-parent-1&quot;&gt;
  63. &lt;td&gt;Node 1-2&lt;/td&gt;&lt;td&gt;Additional info&lt;/td&gt;
  64. &lt;/tr&gt;
  65. &lt;tr class=&quot;treegrid-4 treegrid-parent-3&quot;&gt;
  66. &lt;td&gt;Node 1-2-1&lt;/td&gt;&lt;td&gt;Additional info&lt;/td&gt;
  67. &lt;/tr&gt;
  68. &lt;/table&gt;
  69. &lt;/body&gt;
  70. &lt;/html&gt;
  71. </code>
  72. </pre>
  73. </div>
  74. <script type="text/javascript">
  75. var metas = document.getElementsByTagName('meta');
  76. var i;
  77. if (navigator.userAgent.match(/iPhone/i)) {
  78. for (i = 0; i < metas.length; i++) {
  79. if (metas[i].name == "viewport") {
  80. metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
  81. }
  82. }
  83. document.addEventListener("gesturestart", gestureStart, false);
  84. }
  85. function gestureStart() {
  86. for (i = 0; i < metas.length; i++) {
  87. if (metas[i].name == "viewport") {
  88. metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
  89. }
  90. }
  91. }
  92. </script>
  93. </body>
  94. </html>