/web/js/components/jqwidgets/demos/jqxtreegrid/javascript-tree-grid-custom-aggregates.htm

https://github.com/jonphipps/Metadata-Registry · HTML · 115 lines · 112 code · 3 blank · 0 comment · 0 complexity · 80d5293d2e055c7dca0b21af26298388 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <title id="Description">Custom TreeGrid Aggregates.</title>
    5. 

  5.     <meta name="description" content="Custom Tree Grid Aggregates - JavaScript Tree Grid Demo | jQWidgets">     
    6. 

  6.     <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    7. 

  7.     <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    8. 

  8.     <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    9. 

  9.     <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    10. 

  10.     <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    11. 

  11.     <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    12. 

  12.     <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    13. 

  13.     <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    14. 

  14.     <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    15. 

  15.     <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    16. 

  16.     <script type="text/javascript" src="../../scripts/demos.js"></script>
    17. 

  17.     <script type="text/javascript">
    18. 

  18.         $(document).ready(function () {
    19. 

  19.             var data = [
    20. 

  20.                {
    21. 

  21.                    "id": "1", "name": "Corporate Headquarters", "budget": "1230000", "location": "Las Vegas",
    22. 

  22.                    "children":
    23. 

  23.                     [
    24. 

  24.                         {
    25. 

  25.                             "id": "2", "name": "Finance Division", "budget": "423000", "location": "San Antonio",
    26. 

  26.                             "children":
    27. 

  27.                             [
    28. 

  28.                                 {
    29. 

  29.                                     "id": "4", "name": "Investment Department", "budget": "310000", "location": "San Antonio",
    30. 

  30.                                     children:
    31. 

  31.                                     [
    32. 

  32.                                         { "id": "5", "name": "Banking Office", "budget": "240000", "location": "San Antonio" },
    33. 

  33.                                         { "id": "6", "name": "Bonds Office", "budget": "70000", "location": "San Antonio" },
    34. 

  34.                                     ]
    35. 

  35.                                 },
    36. 

  36.                              { "id": "3", "name": "Accounting Department", "budget": "113000", "location": "San Antonio" }
    37. 

  37.                             ]
    38. 

  38.                         },
    39. 

  39.                         {
    40. 

  40.                             "id": "7", "name": "Operations Division", "budget": "600000", "location": "Miami",
    41. 

  41.                             "children":
    42. 

  42.                             [
    43. 

  43.                                 { "id": "8", "name": "Manufacturing Department", "budget": "300000", "location": "Miami" },
    44. 

  44.                                 { "id": "9", "name": "Public Relations Department", "budget": "200000", "location": "Miami" },
    45. 

  45.                                 { "id": "10", "name": "Sales Department", "budget": "100000", "location": "Miami" }
    46. 

  46.                             ]
    47. 

  47.                         },
    48. 

  48.                         { "id": "11", "name": "Research Division", "budget": "200000", "location": "Boston" }
    49. 

  49.                     ]
    50. 

  50.                }
    51. 

  51.             ];
    52. 

  52. 

  53.             var source =
    54. 

  54.              {
    55. 

  55.                  dataType: "json",
    56. 

  56.                  dataFields: [
    57. 

  57.                       { name: "name", type: "string" },
    58. 

  58.                       { name: "budget", type: "number" },
    59. 

  59.                       { name: "id", type: "number" },
    60. 

  60.                       { name: "children", type: "array" },
    61. 

  61.                       { name: "location", type: "string" }
    62. 

  62.                  ],
    63. 

  63.                  hierarchy:
    64. 

  64.                      {
    65. 

  65.                          root: "children"
    66. 

  66.                      },
    67. 

  67.                  localData: data,
    68. 

  68.                  id: "id"
    69. 

  69.              };
    70. 

  70. 

  71.             var dataAdapter = new $.jqx.dataAdapter(source, {
    72. 

  72.                 loadComplete: function () {
    73. 

  73. 

  74.                 }
    75. 

  75.             });
    76. 

  76.             // create jqxTreeGrid.
    77. 

  77.             $("#treeGrid").jqxTreeGrid(
    78. 

  78.             {
    79. 

  79.                 source: dataAdapter,
    80. 

  80.                 altRows: true,
    81. 

  81.                 width: 850,
    82. 

  82.                 showSubAggregates: true,
    83. 

  83.                 columnsResize: true,
    84. 

  84.                 ready: function () {
    85. 

  85.                     $("#treeGrid").jqxTreeGrid('expandRow', '1');
    86. 

  86.                     $("#treeGrid").jqxTreeGrid('expandRow', '2');
    87. 

  87.                 },
    88. 

  88.                 columns: [
    89. 

  89.                   { text: "Name", align: "center", dataField: "name", width: 300 },
    90. 

  90.                   { text: "Location", dataField: "location", cellsAlign: "center", align: "center", width: 250 },
    91. 

  91.                   {
    92. 

  92.                       text: "Budget", cellsAlign: "center", align: "center", dataField: "budget", cellsFormat: "c2",
    93. 

  93.                       aggregates: ['sum'],
    94. 

  94.                       aggregatesRenderer: function (aggregatesText, column, element, aggregates, type) {
    95. 

  95.                           if (type == "aggregates") {
    96. 

  96.                               var renderString = "<div style='margin: 4px; float: right;  height: 100%;'>";
    97. 

  97.                           }
    98. 

  98.                           else {
    99. 

  99.                               var renderString = "<div style='float: right;  height: 100%;'>";
    100. 

  100.                           }
    101. 

  101.                           var euro = dataAdapter.formatNumber(0.74 * aggregates.sum, "f2");;
    102. 

  102.                           var usd = dataAdapter.formatNumber(aggregates.sum, "f2");;
    103. 

  103.                           renderString += "<table><tr><td rowspan='2'><strong>Total: </strong></td><td>" + usd + " USD</td><tr><td>" + euro + " EUR</td></tr></table>";
    104. 

  104.                           return renderString;
    105. 

  105.                       }
    106. 

  106.                   }
    107. 

  107.                 ]
    108. 

  108.             });
    109. 

  109.         });
    110. 

  110.     </script>
    111. 

  111. </head>
    112. 

  112. <body class='default'>
    113. 

  113.     <div id="treeGrid"></div>
    114. 

  114. </body>
    115. 

  115. </html>
    116.