httemplate/elements/auto-table.html

   1 <%doc>
   2
   3 Example:
   4 <% include('/elements/auto-table.html',
   5
   6               ###
   7               # required
   8               ###
   9
  10               'header'        => [ '#',  'Item', 'Amount' ],
  11               'fields'        => [ 'id', 'name', 'amount' ],
  12
  13               ###
  14               # highly recommended
  15               ###
  16
  17               'size'          => [ 4, 12, 8 ],
  18               'maxl'          => [ 4, 12, 8 ],
  19               'align'         => [ 'right', 'left', 'right' ],
  20
  21               ###
  22               # optional
  23               ###
  24
  25               'data'          => [ [ 1,  'Widget',      25 ],
  26                                    [ 12, 'Super Widget, 7  ] ],
  27               #or
  28               'records'       => [ qsearch('item', { } ) ],
  29               # or any other array of FS::Record objects
  30
  31               'prefix'        => 'mytable_',
  32 ) %>
  33
  34 Values will be passed through as "mytable_id1", etc.
  35 </%doc>
  36
  37 <TABLE ID="<% $prefix %>AutoTable" BGCOLOR="#cccccc" BORDER=0 CELLSPACING=0>
  38   <TR>
  39 % foreach (@header) {
  40     <TH><% $_ %></TH>
  41 % }
  42   </TR>
  43 % my $row = 0;
  44 % for ( $row = 0; $row < scalar @data; $row++ ) {
  45   <TR>
  46 %   my $col = 0;
  47 %   for ( $col = 0; $col < scalar @fields; $col++ ) {
  48 %     my $id = $prefix . $fields[$col] . $row;
  49     <TD>
  50       <INPUT TYPE      = "text"
  51              NAME      = "<% $id %>"
  52              ID        = "<% $id %>"
  53              SIZE      = <% $size[$col] %>
  54              MAXLENGTH = <% $maxl[$col] %>
  55              STYLE     = "text-align:<% $align[$col] %>"
  56              VALUE     = "<% $data[$row][$col] %>"
  57              onchange  = "possiblyAddRow();"
  58       >
  59     </TD>
  60 %   }
  61     <TD>
  62       <IMG SRC     = "<% "${p}images/cross.png" %>"
  63            ALT     = "X"
  64            onclick = "deleteThisRow(this);"
  65            >
  66     </TD>
  67   </TR>
  68 % }
  69 </TABLE>
  70
  71 <SCRIPT TYPE="text/javascript">
  72   var <% $prefix %>rownum = <% $row %>;
  73   var <% $prefix %>table = document.getElementById('<% $prefix %>AutoTable');
  74
  75   function rownum_of(obj) {
  76     return (obj.parentNode.parentNode.sectionRowIndex);
  77   }
  78
  79   function possiblyAddRow() {
  80     if ( <% $prefix %>rownum == rownum_of(this) ) {
  81       <% $prefix %>addRow();
  82     }
  83   }
  84
  85   function <% $prefix %>addRow() {
  86     var row = <% $prefix %>table.insertRow(<% $prefix %>rownum + 1);
  87 %   my $col = 0;
  88 %   for( $col = 0; $col < scalar @fields; $col++ ) {
  89 %     my $field = $prefix.$fields[$col];
  90     var <% $field %>_cell = document.createElement('TD');
  91       var <% $field %>_input = document.createElement('INPUT');
  92       <% $field %>_input.setAttribute('name', '<% $field %>'+<% $prefix %>rownum);
  93       <% $field %>_input.setAttribute('id',   '<% $field %>'+<% $prefix %>rownum);
  94       <% $field %>_input.setAttribute('type', 'text');
  95       <% $field %>_input.setAttribute('size', <% $size[$col] %>);
  96       <% $field %>_input.setAttribute('maxlength', <% $maxl[$col] %>);
  97       <% $field %>_input.style.textAlign = '<% $align[$col] %>';
  98       <% $field %>_input.onchange = possiblyAddRow;
  99       <% $field %>_cell.appendChild(<% $field %>_input);
 100     row.appendChild(<% $field %>_cell);
 101 %   }
 102     var delcell = document.createElement('TD');
 103       var delinput = document.createElement('IMG');
 104       delinput.setAttribute('src', '<% "${p}images/cross.png" %>');
 105       delinput.setAttribute('alt', 'X');
 106       delinput.setAttribute('onclick', 'deleteThisRow(this);');
 107       delcell.appendChild(delinput);
 108     row.appendChild(delcell);
 109
 110     <% $prefix %>rownum++;
 111   }
 112
 113   function deleteThisRow(obj) {
 114     if(<% $prefix %>rownum == rownum_of(obj))  {
 115       <% $prefix %>addRow();
 116     }
 117     <% $prefix %>table.deleteRow(rownum_of(obj));
 118     <% $prefix %>rownum--;
 119     return(false);
 120   }
 121
 122   <% $prefix %>addRow();
 123 </SCRIPT>
 124
 125 <%init>
 126 my %opt = @_;
 127
 128 my @header = @{ $opt{'header'} };
 129 my @fields = @{ $opt{'fields'} };
 130 my @data = ();
 131 if($opt{'data'}) {
 132   @data = @{ $opt{'data'} };
 133 }
 134 elsif($opt{'records'}) {
 135   foreach my $rec (@{ $opt{'records'} }) {
 136     push @data, [ map { $rec->getfield($_) } @fields ];
 137   }
 138 }
 139 # else @data = ();
 140
 141 my $prefix = $opt{'prefix'};
 142 my @size = $opt{'size'} ? @{ $opt{'size'} } : (map {16} @fields);
 143 my @maxl = $opt{'maxl'} ? @{ $opt{'maxl'} } : @size;
 144 my @align = $opt{'align'} ? @{ $opt{'align'} } : (map {'right'} @fields);
 145
 146 </%init>