view release on metacpan or  search on metacpan

lib/Alien/GvaScript/Grid.pod  view on Meta::CPAN

  // my_url response : Content-type "application/json"
  {
    'liste'  : [
        {'fname': 'John',    'lname': 'Stiles', 'gender': 'm'},
        {'fname': 'Mary',    'lname': 'Major',  'gender': 'f'},
        {'fname': 'Richard', 'lname': 'Miles',  'gender': 'm'}
    ], 
    'total'  : 15,
    'rights' : {
        can_create : 0,
        can_update : 1,
        can_delete : 0
    }
  }

=head2 HTML

  <div id="ex_container">
     
   <div tabindex="0" id="ex_grid_list">
     <table class="dmweb-grid">
       <thead>
         <tr>
           <th class="grid-marker"> </th>
           <th class="grid-header">Full Name</th>
           <th class="grid-header">Gender</th>
        </tr>
       </thead>
       <tbody>
        <tr id="ex_grid_list.CL_choice.0" class="CL_choiceItem liste_highlight">
           <td class="grid-marker"> </td>
           <td valign="top" class="grid-cell index_0">John Stiles</td>
           <td valign="top" class="grid-cell index_0 tcenter">m</td>
        </tr>
        <tr id="ex_grid_list.CL_choice.1" class="CL_choiceItem">
           <td class="grid-marker"> </td>
           <td valign="top" class="grid-cell index_1">Mary Major</td>
           <td valign="top" class="grid-cell index_1 tcenter">f</td>
        </tr>
         <tr id="ex_grid_list.CL_choice.3" class="CL_choiceItem">
           <td class="grid-marker"> </td>
           <td valign="top" class="grid-cell index_0">Richard Miles</td>
           <td valign="top" class="grid-cell index_0 tcenter">m</td>
        </tr>
      </tbody>
    </table>
   </div>
  
   <div id="ex_grid_toolbar" class="dmweb-grid-toolbar">
    <div class="dmweb-paginatorbar">
      <div title="Dernière page" class="last"></div>
      <div title="Page suivante" class="forward"></div>
      <div class="text">1 à 3 de 15</div>
      <div title="Page précédente" class="back inactive"></div>
      <div title="Première page" class="first inactive"></div>
    </div>
    <div class="dmweb-grid-actionsbar">
      <span id="grid_id_btn_0" class="dmweb-btn-container">
        <span class="left"/>
        <span class="center">
          <button class="btn" style="width: auto;" type="button">Add</button>
        </span>
        <span class="right"/>
      </span>
    </div>
   </div>
 
  </div>

=head2 CSS

  /* class given to grid list container when an AJAX request is being affected */
  .dmweb-loading {
    background:url(ajax_loading.gif) no-repeat center center;
    position:absolute;
    width:30px;height:30px;
    top:50%;left:50%;
  }

  /* grid toolbar */
  .dmweb-grid-toolbar {
    background:#C5CCE8 url(glass-bg-n.gif) repeat-x scroll left top;
    border:1px solid #A3BAD9;
    height:28px;
  }
  .dmweb-grid-actionsbar {float:left;}
  .dmweb-paginatorbar {float:right;width:250px;}
  .dmweb-paginatorbar div {width:16px;height:16px;cursor:pointer;float:right;}
  .dmweb-paginatorbar div.first {background:url(page-first.gif) no-repeat top center;}
  .dmweb-paginatorbar div.last {background:url(page-last.gif) no-repeat top center;}
  .dmweb-paginatorbar div.back {background:url(page-prev.gif) no-repeat top center;}
  .dmweb-paginatorbar div.forward {background:url(page-next.gif) no-repeat top center;}
  .dmweb-paginatorbar div.inactive {cursor:default;opacity:0.25;filter:alpha(opacity=25);}
  .dmweb-paginatorbar div.text {text-align:center;width:140px;color:#4b34c5;font-size:10pt;}
  .dmweb-paginatorbar span.dmweb-btn-container {display:block;margin-right:4px;}
  
  /* grid table */
  .dmweb-grid {width:100%;}
  .dmweb-grid th.grid-header {
    text-align:center;
    padding:2px;
    font-size:75%;
    color: #183E6C;
    background-color: #D0D6ED;
    border:1px solid #6F82A5;
  }
  .dmweb-grid td {font-size:75%;color:#183E6C;}
  .dmweb-grid .grid-marker {width:15px;background-color: #D0D6ED;border:1px solid #6F82A5;}
  .dmweb-grid tr.liste_highlight td.grid-marker {
    background: #D0D6ED url(selector.gif) no-repeat center center;
  }
  .dmweb-grid tr.liste_highlight td.grid-cell {background-color: #6F82A5 !important;color:#f5f5f5 !important;}
  .dmweb-grid td.grid-cell {padding:2px !important;border:1px solid #e8e8e8;}
  .dmweb-grid td.grid-cell.index_1 {background-color:#EFEFEF;}
  .dmweb-grid td.grid-cell.center {text-align:center;float:none;}
  .dmweb-grid td.grid-cell.right {text-align:right;float:none;}
  .dmweb-grid td.grid-cell.red {color:red;}

=head1 DEPENDENCIES

This class depends on the following GvaScript classes: