• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid Demo</title>
    7. <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. <style>
    9. :root {
    10. --bgColor: #041F35;
    11. --headerFontColor: #fff;
    12. --mainFontColor: var(--bgColor, darkblue);
    13. --rowColor: #777;
    14.  
    15. --zg-caption-background: var(--bgColor, inherit);
    16. --zg-caption-color: var(--headerFontColor, white);
    17. --zing-grid-color: var(--mainFontColor);
    18. }
    19.  
    20. html,
    21. body {
    22. height: 100%;
    23. width: 100%;
    24. margin: 0;
    25. padding: 0;
    26. }
    27.  
    28. .button {
    29. text-align: center;
    30. background: #07C;
    31. color: #FFF;
    32. cursor: pointer;
    33. border-radius: 3px;
    34. font-size: 0.85rem;
    35. padding: 5px 20px;
    36. cursor: pointer;
    37. margin: 15px 0 15px 15px;
    38. position: relative;
    39. top: 0;
    40. }
    41.  
    42. .button:hover {
    43. background: #1b6ead;
    44. }
    45.  
    46. zing-grid[loading] {
    47. min-height: 600px;
    48. }
    49.  
    50. /* hide some inner grid elements */
    51. zing-grid[loading] zg-pager {
    52. visibility: hidden;
    53. }
    54.  
    55.  
    56. zg-load-mask {
    57. /* set the color to match the gif */
    58. opacity: .95;
    59. top: 65px;
    60. height: calc(100% - 65px);
    61. /* custom gif for loading */
    62. background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
    63. /* Center and scale the image nicely */
    64. background-position: center;
    65. background-repeat: repeat-x;
    66. background-size: contain;
    67. }
    68.  
    69. zing-grid[loading] {
    70. height: 668px;
    71. }
    72. </style>
    73. </head>
    74.  
    75. <body>
    76. <zing-grid pager page-size="10" search>
    77. <zg-caption>
    78. ZingGrid Star Wars
    79. <span class="button" id="reloadBtn">Reload Demo</span>
    80. </zg-caption>
    81. <zg-data>
    82. <!-- define the main source for the API -->
    83. <zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>
    84.  
    85. <!-- define the path in the JSON to get the array of results.
    86. In this case it is body.results -->
    87. <zg-param name="recordPath" value="results"></zg-param>
    88.  
    89. <!-- if loadByPage is set to true it will go to the
    90. server for each new page of data -->
    91. <zg-param name="loadByPage" value="true"></zg-param>
    92.  
    93. <!-- define the "page" query parameter -->
    94. <zg-param name="pageKey" value="page"></zg-param>
    95.  
    96. <!-- Need to tell ZG how many records were returned so it knows
    97. how to divide up the page-size -->
    98. <zg-param name="countPath" value="count"></zg-param>
    99.  
    100. <!-- define the path in the result JSON to find next/prev urls -->
    101. <zg-param name="nextPath" value="next"></zg-param>
    102. <zg-param name="prevPath" value="previous"></zg-param>
    103.  
    104. <!-- Need to tell ZG how mto search the API -->
    105. <zg-param name="searchKey" value="search"></zg-param>
    106. </zg-data>
    107. <zg-colgroup>
    108. <zg-column index="name"></zg-column>
    109. <zg-column index="height"></zg-column>
    110. <zg-column index="mass"></zg-column>
    111. <zg-column index="hair_color"></zg-column>
    112. <zg-column index="eye_color"></zg-column>
    113. <zg-column index="skin_color"></zg-column>
    114. </zg-colgroup>
    115. </zing-grid>
    116. <script>
    117. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    118. // because this Javascript is injected into the document head
    119. window.addEventListener('load', () => {
    120. // Javascript code to execute after DOM content
    121. const zgRef = document.querySelector('zing-grid');
    122. zgRef.executeOnLoad(() => {
    123. // Add event listener to button
    124. reloadBtn.addEventListener('click', () => {
    125. zgRef.refresh();
    126. });
    127. });
    128. });
    129. </script>
    130. </body>
    131.  
    132. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5. <meta charset="utf-8">
    6. <title>ZingGrid Demo</title>
    7. <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11. <zing-grid pager page-size="10" search>
    12. <zg-caption>
    13. ZingGrid Star Wars
    14. <span class="button" id="reloadBtn">Reload Demo</span>
    15. </zg-caption>
    16. <zg-data>
    17. <!-- define the main source for the API -->
    18. <zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>
    19.  
    20. <!-- define the path in the JSON to get the array of results.
    21. In this case it is body.results -->
    22. <zg-param name="recordPath" value="results"></zg-param>
    23.  
    24. <!-- if loadByPage is set to true it will go to the
    25. server for each new page of data -->
    26. <zg-param name="loadByPage" value="true"></zg-param>
    27.  
    28. <!-- define the "page" query parameter -->
    29. <zg-param name="pageKey" value="page"></zg-param>
    30.  
    31. <!-- Need to tell ZG how many records were returned so it knows
    32. how to divide up the page-size -->
    33. <zg-param name="countPath" value="count"></zg-param>
    34.  
    35. <!-- define the path in the result JSON to find next/prev urls -->
    36. <zg-param name="nextPath" value="next"></zg-param>
    37. <zg-param name="prevPath" value="previous"></zg-param>
    38.  
    39. <!-- Need to tell ZG how mto search the API -->
    40. <zg-param name="searchKey" value="search"></zg-param>
    41. </zg-data>
    42. <zg-colgroup>
    43. <zg-column index="name"></zg-column>
    44. <zg-column index="height"></zg-column>
    45. <zg-column index="mass"></zg-column>
    46. <zg-column index="hair_color"></zg-column>
    47. <zg-column index="eye_color"></zg-column>
    48. <zg-column index="skin_color"></zg-column>
    49. </zg-colgroup>
    50. </zing-grid>
    51. </body>
    52.  
    53. </html>
    1. :root {
    2. --bgColor: #041F35;
    3. --headerFontColor: #fff;
    4. --mainFontColor: var(--bgColor, darkblue);
    5. --rowColor: #777;
    6.  
    7. --zg-caption-background: var(--bgColor, inherit);
    8. --zg-caption-color: var(--headerFontColor, white);
    9. --zing-grid-color: var(--mainFontColor);
    10. }
    11.  
    12. html,
    13. body {
    14. height: 100%;
    15. width: 100%;
    16. margin: 0;
    17. padding: 0;
    18. }
    19.  
    20. .button {
    21. text-align: center;
    22. background: #07C;
    23. color: #FFF;
    24. cursor: pointer;
    25. border-radius: 3px;
    26. font-size: 0.85rem;
    27. padding: 5px 20px;
    28. cursor: pointer;
    29. margin: 15px 0 15px 15px;
    30. position: relative;
    31. top: 0;
    32. }
    33.  
    34. .button:hover {
    35. background: #1b6ead;
    36. }
    37.  
    38. zing-grid[loading] {
    39. min-height: 600px;
    40. }
    41.  
    42. /* hide some inner grid elements */
    43. zing-grid[loading] zg-pager {
    44. visibility: hidden;
    45. }
    46.  
    47.  
    48. zg-load-mask {
    49. /* set the color to match the gif */
    50. opacity: .95;
    51. top: 65px;
    52. height: calc(100% - 65px);
    53. /* custom gif for loading */
    54. background-image: url('https://storage.googleapis.com/zg-demos.appspot.com/starwars_loading.gif');
    55. /* Center and scale the image nicely */
    56. background-position: center;
    57. background-repeat: repeat-x;
    58. background-size: contain;
    59. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4. // Javascript code to execute after DOM content
    5. const zgRef = document.querySelector('zing-grid');
    6. zgRef.executeOnLoad(() => {
    7. // Add event listener to button
    8. reloadBtn.addEventListener('click', () => {
    9. zgRef.refresh();
    10. });
    11. });
    12. });