• 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: 400px;
    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. opacity: .95;
    58. overflow: hidden;
    59. }
    60.  
    61. zg-load-mask img {
    62. width: 100%;
    63. }
    64.  
    65. zing-grid[loading] {
    66. height: 1099px;
    67. }
    68. </style>
    69. </head>
    70.  
    71. <body>
    72. <zing-grid pager page-size="10" search>
    73. <zg-caption>
    74. ZingGrid Star Wars
    75. <span class="button" id="reloadBtn">Reload Demo</span>
    76. </zg-caption>
    77. <zg-data>
    78. <!-- define the main source for the API -->
    79. <zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>
    80.  
    81. <!-- define the path in the JSON to get the array of results.
    82. In this case it is body.results -->
    83. <zg-param name="recordPath" value="results"></zg-param>
    84.  
    85. <!-- if loadByPage is set to true it will go to the
    86. server for each new page of data -->
    87. <zg-param name="loadByPage" value="true"></zg-param>
    88.  
    89. <!-- define the "page" query parameter -->
    90. <zg-param name="pageKey" value="page"></zg-param>
    91.  
    92. <!-- Need to tell ZG how many records were returned so it knows
    93. how to divide up the page-size -->
    94. <zg-param name="countPath" value="count"></zg-param>
    95.  
    96. <!-- define the path in the result JSON to find next/prev urls -->
    97. <zg-param name="nextPath" value="next"></zg-param>
    98. <zg-param name="prevPath" value="previous"></zg-param>
    99.  
    100. </zg-data>
    101. <zg-colgroup>
    102. <zg-column index="name"></zg-column>
    103. <zg-column index="height"></zg-column>
    104. <zg-column index="mass"></zg-column>
    105. <zg-column index="hair_color"></zg-column>
    106. <zg-column index="eye_color"></zg-column>
    107. <zg-column index="skin_color"></zg-column>
    108. </zg-colgroup>
    109. <zg-load-mask>
    110. <img src="https://bit.ly/2Tkvbtr" alt="Loading ...">
    111. </zg-load-mask>
    112. </zing-grid>
    113. <script>
    114. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    115. window.addEventListener('load', () => {
    116. const zgRef = document.querySelector('zing-grid');
    117. zgRef.executeOnLoad(() => {
    118. // Add event listener to button
    119. reloadBtn.addEventListener('click', () => {
    120. zgRef.refresh();
    121. });
    122. });
    123. });
    124. </script>
    125. </body>
    126.  
    127. </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. </zg-data>
    40. <zg-colgroup>
    41. <zg-column index="name"></zg-column>
    42. <zg-column index="height"></zg-column>
    43. <zg-column index="mass"></zg-column>
    44. <zg-column index="hair_color"></zg-column>
    45. <zg-column index="eye_color"></zg-column>
    46. <zg-column index="skin_color"></zg-column>
    47. </zg-colgroup>
    48. <zg-load-mask>
    49. <img src="https://bit.ly/2Tkvbtr" alt="Loading ...">
    50. </zg-load-mask>
    51. </zing-grid>
    52. </body>
    53.  
    54. </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: 400px;
    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. opacity: .95;
    50. overflow: hidden;
    51. }
    52.  
    53. zg-load-mask img {
    54. width: 100%;
    55. }
    1. window.addEventListener('load', () => {
    2. const zgRef = document.querySelector('zing-grid');
    3. zgRef.executeOnLoad(() => {
    4. // Add event listener to button
    5. reloadBtn.addEventListener('click', () => {
    6. zgRef.refresh();
    7. });
    8. });
    9. });