Dojo实现会“变身”的表格

前端之家收集整理的这篇文章主要介绍了Dojo实现会“变身”的表格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、变身表格一

1、新建web工程,在WebContent新建一个DataGrid.html

DataGrid.html:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>会变的表格</title>
  5. <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"></Meta>
  6. <script type="text/javascript" src="dojoroot/dojo/dojo.js" data-dojo-config="isDebug:false,parSEOnLoad: true"></script>
  7. <style type="text/css">
  8. @import "dojoroot/dojox/grid/resources/Grid.css";
  9. body {
  10. font-size: 0.9em;
  11. font-family: Geneva,Arial,Helvetica,sans-serif;
  12. }
  13. .heading {
  14. font-weight: bold;
  15. padding-bottom: 0.25em;
  16. }
  17. #grid {
  18. border: 1px solid #333;
  19. width: 48em;
  20. height: 30em;
  21. }
  22. #grid .dojoxGridCell {
  23. text-align: center;
  24. }
  25. </style>
  26. <script type="text/javascript">
  27. dojo.require("dijit.dijit");
  28. dojo.require("dojox.grid._Grid");
  29. dojo.require("dojo.parser");
  30. </script>
  31. <script type="text/javascript">
  32.  
  33. function get(inRowIndex) {
  34. return [this.index,inRowIndex].join(',');
  35. }
  36.  
  37. var view0 = {
  38. noscroll: true,cells: [
  39. {name: '苹果',value: '12'},{name: '梨子',value: '23'}
  40. ]};
  41. var view1 = [
  42. {name: '橘子',value: '34'},{name: '香蕉',value: '44'},{name: '草莓',value: '26'},{name: '橙子',value: '48'},{name: '西瓜',value: '36'},{name: '山竹',value: '96'},{name: '樱桃',value: '56'}
  43. ];
  44. var view2 = {
  45. noscroll: true,cells: [
  46. [
  47. {name: '荔枝',value: '34',rowSpan: 2},{name: '芒果',value: '64'}
  48. ],[
  49. {name: '车厘子',value: '84'}
  50. ],[
  51. {name: '桃子',value: '24'}
  52. ]
  53. ]
  54. }
  55. var view3 = [
  56. [
  57. {name: '李子',value: '24',rowSpan: 3},{name: '榴莲',value: '14'},{name: '猕猴桃',value: '104'},{name: '蛇皮果',value: '44'}
  58. ],[
  59. {name: '布朗',value: '65'},{name: '桂圆',value: '32'},{name: '西红柿',value: '68'}
  60. ],[
  61. {name: '葡萄',value: '38',colSpan: 3}
  62. ]
  63. ];
  64. var structure0 = [ view0,view1 ];
  65. var structure1 = [ view2,view3 ];
  66. var l2 = false;
  67. toggleStructure = function() {
  68. l2 = !l2;
  69. grid.scrollToRow(0);
  70. grid.set('structure',l2 ? structure1 : structure0);
  71. }
  72. </script>
  73. </head>
  74. <body>
  75. <div class="heading">会变的表格</div>
  76. <p>
  77. <button onclick="toggleStructure()">变身</button>
  78. </p>
  79. <div id="grid" data-dojo-id="grid" dojoType="dojox.grid._Grid" structure="structure" rowSelector="20px" rowCount="15" elasticView="2"></div>
  80.  
  81. </body>
  82. </html>

2、显示结果

(1)为变身前


(2)点击“变身”按钮后

猜你在找的Dojo相关文章