• 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. height: 600px;
    48. }
    49.  
    50. zing-grid[loading] {
    51. height: 668px;
    52. }
    53. </style>
    54. </head>
    55.  
    56. <body>
    57. <zing-grid pager page-size="10" search loading-text="Custom Loading Text...">
    58. <zg-caption>
    59. ZingGrid Star Wars
    60. <span class="button" id="reloadBtn">Reload Demo</span>
    61. </zg-caption>
    62. <zg-data>
    63. <!-- define the main source for the API -->
    64. <zg-param name="src" value="https://swapi.py4e.com/api/people/"></zg-param>
    65.  
    66. <!-- define the path in the JSON to get the array of results.
    67. In this case it is body.results -->
    68. <zg-param name="recordPath" value="results"></zg-param>
    69.  
    70. <!-- if loadByPage is set to true it will go to the
    71. server for each new page of data -->
    72. <zg-param name="loadByPage" value="true"></zg-param>
    73.  
    74. <!-- define the "page" query parameter -->
    75. <zg-param name="pageKey" value="page"></zg-param>
    76.  
    77. <!-- Need to tell ZG how many records were returned so it knows
    78. how to divide up the page-size -->
    79. <zg-param name="countPath" value="count"></zg-param>
    80.  
    81. <!-- define the path in the result JSON to find next/prev urls -->
    82. <zg-param name="nextPath" value="next"></zg-param>
    83. <zg-param name="prevPath" value="previous"></zg-param>
    84.  
    85. <!-- Need to tell ZG how mto search the API -->
    86. <zg-param name="searchKey" value="search"></zg-param>
    87. </zg-data>
    88. <zg-colgroup>
    89. <zg-column index="name"></zg-column>
    90. <zg-column index="height"></zg-column>
    91. <zg-column index="mass"></zg-column>
    92. <zg-column index="hair_color"></zg-column>
    93. <zg-column index="eye_color"></zg-column>
    94. <zg-column index="skin_color"></zg-column>
    95. </zg-colgroup>
    96. </zing-grid>
    97. <script>
    98. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    99. // because this Javascript is injected into the document head
    100. window.addEventListener('load', () => {
    101. // Javascript code to execute after DOM content
    102. const zgRef = document.querySelector('zing-grid');
    103. zgRef.executeOnLoad(() => {
    104. // Add event listener to button
    105. reloadBtn.addEventListener('click', () => {
    106. zgRef.refresh();
    107. });
    108. });
    109. });
    110. </script>
    111. </body>
    112.  
    113. </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 loading-text="Custom Loading Text...">
    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. height: 600px;
    40. }
    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. });