• Edit
  • Download
    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    8.   <script nonce="undefined" src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    9.   <script nonce="undefined" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    10.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    11.   <style>
    12.     body {
    13.       padding: 1rem;
    14.     }
    15.  
    16.     div[data-field-index="progress"] {
    17.       width: 100%;
    18.     }
    19.   </style>
    20.   <style>
    21.     .zg-body {
    22.       background: #e6e6e6;
    23.     }
    24.  
    25.     zing-grid[loading] {
    26.       height: 428px;
    27.     }
    28.   </style>
    29. </head>
    30.  
    31. <body>
    32.   <div>
    33.  
    34.     <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting data='[
    35.         {
    36.           "first": "Mark",
    37.           "last": "Otto",
    38.           "username": "@ZTfer",
    39.           "category": "primary",
    40.           "progress": "12"
    41.         },
    42.         {
    43.           "first": "Jacob",
    44.           "last": "Thorton",
    45.           "username": "@jacobthorton",
    46.           "category": "secondary",
    47.           "progress": "62"
    48.         },
    49.         {
    50.           "first": "Duncan",
    51.           "last": "Mattheson",
    52.           "username": "@dmattheson",
    53.           "category": "danger",
    54.           "progress": "84"
    55.         },
    56.         {
    57.           "first": "David",
    58.           "last": "Jose Perez",
    59.           "username": "@djp",
    60.           "category": "info",
    61.           "progress": "45"
    62.         },
    63.         {
    64.           "first": "Dave",
    65.           "last": "Phillipson",
    66.           "username": "@phillipson",
    67.           "category": "warning",
    68.           "progress": "30"
    69.         }
    70.       ]'>
    71.       <zg-colgroup>
    72.         <zg-column index="first">[[index.first]]</zg-column>
    73.         <zg-column index="last">[[index.last]]</zg-column>
    74.         <zg-column index="username">[[index.username]]</zg-column>
    75.         <zg-column index="category">
    76.           <span class="badge badge-pill badge-[[index.category]]">[[index.category]]</span>
    77.         </zg-column>
    78.         <zg-column index="progress" renderer="progressBar">
    79.           <div class="progress">
    80.             <div class="progress-bar progress-bar-striped" role="progressbar" style="width: [[index.progress]]%" aria-valuenow="[[index.progress]]" aria-valuemin="0" aria-valuemax="100">[[index.progress]]%</div>
    81.           </div>
    82.         </zg-column>
    83.       </zg-colgroup>
    84.     </zing-grid>
    85.   </div>
    86.  
    87.   <script>
    88.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    89.     window.progressBar = function(customIndex, domCell) {
    90.       const progress = domCell.querySelector('.progress-bar');
    91.       const value = progress.getAttribute('aria-valuenow');
    92.       let color;
    93.       if (value >= 80) {
    94.         color = 'success';
    95.       } else if (value >= 60) {
    96.         color = 'info';
    97.       } else if (value >= 40) {
    98.         color = 'warning';
    99.       } else {
    100.         color = 'danger'
    101.       }
    102.       progress.classList.add('bg-' + color);
    103.     }
    104.   </script>
    105. </body>
    106.  
    107. </html>
    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    8.   <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    9.   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    10.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    11.   <style>
    12.     body {
    13.       padding: 1rem;
    14.     }
    15.  
    16.     div[data-field-index="progress"] {
    17.       width: 100%;
    18.     }
    19.   </style>
    20. </head>
    21.  
    22. <body>
    23.   <div>
    24.  
    25.     <zing-grid caption="Users" theme="zg-bootstrap.css" search pager sorting data='[
    26.         {
    27.           "first": "Mark",
    28.           "last": "Otto",
    29.           "username": "@ZTfer",
    30.           "category": "primary",
    31.           "progress": "12"
    32.         },
    33.         {
    34.           "first": "Jacob",
    35.           "last": "Thorton",
    36.           "username": "@jacobthorton",
    37.           "category": "secondary",
    38.           "progress": "62"
    39.         },
    40.         {
    41.           "first": "Duncan",
    42.           "last": "Mattheson",
    43.           "username": "@dmattheson",
    44.           "category": "danger",
    45.           "progress": "84"
    46.         },
    47.         {
    48.           "first": "David",
    49.           "last": "Jose Perez",
    50.           "username": "@djp",
    51.           "category": "info",
    52.           "progress": "45"
    53.         },
    54.         {
    55.           "first": "Dave",
    56.           "last": "Phillipson",
    57.           "username": "@phillipson",
    58.           "category": "warning",
    59.           "progress": "30"
    60.         }
    61.       ]'>
    62.       <zg-colgroup>
    63.         <zg-column index="first">[[index.first]]</zg-column>
    64.         <zg-column index="last">[[index.last]]</zg-column>
    65.         <zg-column index="username">[[index.username]]</zg-column>
    66.         <zg-column index="category">
    67.           <span class="badge badge-pill badge-[[index.category]]">[[index.category]]</span>
    68.         </zg-column>
    69.         <zg-column index="progress" renderer="progressBar">
    70.           <div class="progress">
    71.             <div class="progress-bar progress-bar-striped" role="progressbar" style="width: [[index.progress]]%" aria-valuenow="[[index.progress]]" aria-valuemin="0" aria-valuemax="100">[[index.progress]]%</div>
    72.           </div>
    73.         </zg-column>
    74.       </zg-colgroup>
    75.     </zing-grid>
    76.   </div>
    77.  
    78. </body>
    79.  
    80. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    1. window.progressBar = function(customIndex, domCell) {
    2.   const progress = domCell.querySelector('.progress-bar');
    3.   const value = progress.getAttribute('aria-valuenow');
    4.   let color;
    5.   if (value >= 80) {
    6.     color = 'success';
    7.   } else if (value >= 60) {
    8.     color = 'info';
    9.   } else if (value >= 40) {
    10.     color = 'warning';
    11.   } else {
    12.     color = 'danger'
    13.   }
    14.   progress.classList.add('bg-' + color);
    15. }