Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>HTML Table Filter Generator - Large HTML table with external filters grid</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/trackcode.js" language="javascript" type="text/javascript"></script>

<style type="text/css" media="screen">

@import "file:///C|/Documents and Settings/patrice/Bureau/filtergrid.css";
	/*====================================================
		- html elements
	=====================================================*/
	body{ 
		margin:15px; padding:15px; border:1px solid #666;
		font-family:Arial, Helvetica, sans-serif; font-size:88%; 
	}
	h2{ margin-top: 50px; }
	table{ border:1px solid #ccc; font-size:85%; }
	caption{ margin:10px 0 0 5px; padding:10px; text-align:left; }
	th{
		background:#4A4A4A url(file:///C|/Documents%20and%20Settings/images/bg_th.jpg) left top repeat-x; 
		border-left:1px solid #C7C7C7;
		padding:5px; color:#fff; height:25px;
	}
	td{ padding:2px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; }
	pre{ margin:5px; padding:5px; background-color:#f4f4f4; border:1px solid #ccc; }
	label{ font-weight:bold; font-size:12px; }
	.div_checklist label{ font-weight:normal; font-size:10px; }
	.font10{ font-size:10px; }

#extGrid{  
		float:left; background:#E4FAE4; 
		border:1px solid #999; width:250px; 
		margin-right:20px; padding:10px;
	}
	
	/* status bar container */
	#statusDiv{
		float:left;	width:auto;
		background:#fff;
		margin:1px 5px 0 10px; 
		padding:3px 3px 3px 3px;
		font-size:11px;
	}

</style>
<script src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/tablefilter.js" language="javascript" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/SyntaxHighlighter.css">
<script src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/shCore.js" language="javascript" type="text/javascript"></script>
<script src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/shBrushJScript.js" language="javascript" type="text/javascript"></script>
<script src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/shBrushXml.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript"> 
//<![CDATA[
	tf_addEvent(window,'load',initHighlighter);
	function initHighlighter()
	{
		dp.SyntaxHighlighter.ClipboardSwf = "includes/SyntaxHighlighter/Scripts/clipboard.swf";  
		dp.SyntaxHighlighter.HighlightAll("code"); 
	}
//]]>
</script>

<script src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/sortabletable.js" type="text/javascript" id="sortabletable"></script><script src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/tfAdapter.js" type="text/javascript" id="sortabletable_adapter"></script></head><body>
<h1>HTML Table Filter Generator</h1>
<p> This demo shows how to create an external grid and change programmatically some behaviours.</p>
<div id="extGrid">

<p>
	  <label>Marque:</label>
	  <br>
	  
	  <span id="selection_marque">
	    <select class="flt" filled="1" ct="1" id="id_marque">
	      <option selected="selected" value="[ Tout voir ]"> [ Tout voir ] </option>
	      <option value="Ariston">Ariston</option>
	      <option value="Arthur Martin">Arthur Martin</option>
	      <option value="Bosch">Bosch</option>
	      <option value="Brandt">Brandt</option>
	      <option value="Electrolux">Electrolux</option>
	      <option value="Siemens">Siemens</option>
	      <option value="Vedette">Vedette</option>
	      <option value="Wirlpool">Wirlpool</option>
      </select>
  </span></p>
  
  <p>
      <label>Chargement:</label>
    <br>
      <span id="selection_chargement">
      <select name="filtre_chargement" multiple="multiple" class="flt_multi" id="filtre_chargement" title="Use Ctrl key for multiple selections"
       filled="1" ct="0">
        <option value="Dessus"> [ Tout voir ] </option>
        <option value="Dessus">Dessus</option>
         <option value="Frontal">Frontal</option>
      </select>
  </span></p>
  
  
  
  <span id="selection_capacite">
    <label>Capacit�:</label>
   
  <div class="div_checklist" filled="1" ct="2" id="checklist_capacite">
    <ul class="flt_checklist" colindex="2" id="filtre_capacite">
      <li class="flt_checklist_item">
        <label for="filtre_capacite_tout">
          <input value="" name="filtre_capacite_tout" id="filtre_capacite_tout" type="checkbox" /> [ Tout voir ] </label>
      </li>
      <li class="flt_checklist_item">
        <label for="filtre_capacite_5kg">
          <input value="5" name="filtre_capacite_5kg" id="filtre_capacite_5kg" type="checkbox" />5Kg</label>
      </li>
      <li class="flt_checklist_item">
        <label for="filtre_capacite_6kg">
          <input value="6" name="filtre_capacite_6kg" id="filtre_capacite_6kg" type="checkbox" />6Kg</label>
      </li>
      <li class="flt_checklist_item">
        <label for="filtre_capacite_6kg">
          <input value="7" name="filtre_capacite_7kg" id="filtre_capacite_7kg" type="checkbox" />7Kg</label>
      </li>
      <li class="flt_checklist_item">
        <label for="filtre_capacite_8kg">
          <input value="8Kg" name="filtre_capacite_8kg" id="filtre_capacite_8kg" type="checkbox" />8Kg</label>
      </li>
    </ul>
  </div>
  </span>
    
    
    
     <span id="selection_classe">
    <label><br />Classe �nerg�tique:</label>
   
  <div class="div_checklist" filled="1" ct="2" id="checklist_classe">
    <ul class="flt_checklist" colindex="2" id="filtre_classe">
      <li class="flt_checklist_item">
        <label for="filtre_classe_tout">
          <input value="" name="filtre_classe_tout" id="filtre_classe_tout" type="checkbox" />
          [ Tout voir ] </label>
      </li>
      <li class="flt_checklist_item">
        <label for="filtre_classe_A+++">
          <input value="A+++" name="filtre_classe_A+++" id="filtre_classe_A+++" type="checkbox" />
          A+++</label>
      </li>
      <li class="flt_checklist_item">
        <label for="flt2_demo_8">
          <input value="A++" name="filtre_classe_A++" id="filtre_classe_A++" type="checkbox" />
          A++</label>
      </li>
      <li class="flt_checklist_item">
        <label for="filtre_classe_A+">
          <input value="7" name="filtre_classe_A+" id="filtre_classe_A+" type="checkbox" />
          A+</label>
      </li>
     
    </ul>
  </div>
  </span>
      
   
    
  
    CI:</label><br>
  <input id="chkCI" name="chkCI" value="5" onclick=" 	if(this.checked){
							tf_demo.SetFilterValue(8, this.value);
						}" type="radio"> 5Kg
  <input id="chkCI" name="chkCI" value="7" onclick=" 	if(this.checked){
							tf_demo.SetFilterValue(8, this.value);
						}" type="radio"> 7Kg
		
        
    
   
  </p>
  </p>
    <hr>
	<div style="float: left;">
		<input id="btnFlt" value="Filter" onclick="tf_demo.Filter();" type="button">&nbsp;
		<input id="btnClr" value="Clear" onclick="tf_demo.ClearFilters(); 
				//clears radio btns				
				for( var o=frmRadioInps.elements, p=o.length - 1; p > -1; p--) {
				  if ( o[p].type ) o[p].checked = false;
				}" type="button">
	</div>
	<div id="statusDiv"><span id="statusText_demo"></span><span id="statusSpan_demo"></span></div>
	<div style="clear: both;"></div>
	<hr>
	<input id="paging" onclick="if(this.checked){
				if( tf_demo.paging ) return;
				tf_Id('pagingFeatures').style.display = '';
				tf_demo.AddPaging(true); //easy way to add paging when filter grid bar is already set
			}else{
				if( !tf_demo.paging ) return;
				tf_Id('pagingFeatures').style.display = 'none';
				tf_demo.paging = false; //behaviour is removed here
				tf_demo.RemovePaging();
				tf_demo.Filter();
			} " type="checkbox"> Paging 
	<br>
	<input id="slcChange" checked="checked" onclick="if(this.checked){
				tf_demo.onSlcChange = true;
			}else{
				tf_demo.onSlcChange = false;
			}" type="checkbox"> Filter on drop-down value change
	<br>
	<input id="bg" checked="checked" onclick="if(this.checked){
				tf_demo.alternateBgs = true; 
				tf_demo.SetAlternateRows();
			}else{
				tf_demo.alternateBgs = false; 
				tf_demo.RemoveAlternateRows();
			}" type="checkbox"> Alternate background
	<br>
	<input id="highlight" onclick="if(this.checked){
				tf_demo.highlightKeywords = true; 
			}else{
				tf_demo.highlightKeywords = false;
			}" type="checkbox"> Highlight keyword(s)
	<br>	
	<hr>
	<div id="pagingFeatures" style="display: none; font-size: 10px;">
		Go to page 
		<input id="goto" name="goto" size="3" type="text"><input value="Go" onclick="javascript: 
				if(!tf_demo.paging) return; 
				tf_demo.SetPage(parseInt(tf_Id('goto').value));" type="button">
		<br>
		
		<a href="javascript:tf_demo.SetPage('Previous');">Previous page</a> |
		<a href="javascript:tf_demo.SetPage('first');">First page</a> |
		<a href="javascript:tf_demo.SetPage('last');">Last page</a> |
		<a href="javascript:tf_demo.SetPage('Next');">Next page</a>
		
	</div>
</div>
<div style="border: 1px solid rgb(51, 51, 51); float: left; width: 680px;">
<div style="display: none;" class="loader" id="load_demo"><img src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/loader.gif" alt="" style="vertical-align: middle; margin-right: 5px;">Loading...</div><div class="inf" id="inf_demo"><div class="ldiv" id="ldiv_demo"><div class="tot" id="counter_demo"><span id="totRowsTextSpan_demo">Displayed rows: </span><span id="totrows_span_demo">436</span></div></div><div class="rdiv" id="rdiv_demo"></div><div class="mdiv" id="mdiv_demo"></div></div><table id="demo" width="100%" cellpadding="2" cellspacing="0">
<thead>
<tr style="display: none;" class="fltrow"><td></td><td></td><td></td><td></td><td><input class="flt" ct="4" id="flt4_demo" type="hidden"></td><td><input class="flt" ct="5" id="flt5_demo" type="text"></td><td><input class="flt" ct="6" id="flt6_demo" type="text"></td><td><input class="flt" ct="7" id="flt7_demo" type="text"></td><td><input class="flt" ct="8" id="flt8_demo" type="hidden"></td></tr><tr>
	<th _sorttype="String" style="cursor: pointer;" width="15%" nowrap="nowrap">country<img class="sort-arrow" src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/blank.png"></th>
	<th _sorttype="String" style="cursor: pointer;" width="10%" nowrap="nowrap">country isocode<img class="sort-arrow" src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/blank.png"></th>
	<th _sorttype="us" style="cursor: pointer;" width="10%" align="right" nowrap="nowrap">year<img class="sort-arrow" src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/blank.png"></th>
	<th _sorttype="us" style="cursor: pointer;" width="10%" align="right" nowrap="nowrap">POP<img class="sort-arrow" src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/blank.png"></th>
	<th _sorttype="us" style="cursor: pointer;" width="13%" align="right" nowrap="nowrap">XRAT<img class="sort-arrow" src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/blank.png"></th>
	<th _sorttype="us" style="cursor: pointer;" width="10%" align="right" nowrap="nowrap">PPP<img class="sort-arrow" src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/blank.png"></th>
	<th _sorttype="us" style="cursor: pointer;" width="12%" align="right" nowrap="nowrap">cgdp<img class="sort-arrow" src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/blank.png"></th>
	<th _sorttype="us" style="cursor: pointer;" width="10%" align="right" nowrap="nowrap">cc<img class="sort-arrow" src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/blank.png"></th>
	<th _sorttype="us" style="cursor: pointer;" width="10%" align="right" nowrap="nowrap">ci<img class="sort-arrow" src="file:///C|/Documents and Settings/patrice/Bureau/external-grid_fichiers/blank.png"></th>
</tr>
</thead>
<tbody>
<tr class=" even">
  <td><div align="center">Aeg</div></td>
  <td><div align="center">Dessus</div></td>
  <td align="right"><div align="center">5</div></td>
  <td align="right">A+++</td>
<td align="right">59.51499939</td>
<td align="right">53.32</td><td align="right">1095.94</td>
<td align="right">34.66</td>
<td align="right"><p>5</p></td>
</tr><tr class=" odd">
  <td><div align="center">Aeg</div></td>
  <td><div align="center">Frontal</div></td>
  <td align="right"><div align="center">7</div></td>
  <td align="right">A+</td><td align="right">2750.22998</td><td align="right">1007.53</td><td align="right">1244.73</td><td align="right">41.86</td><td align="right">5</td></tr><tr class=" even">
    <td><div align="center">Ariston</div></td>
    <td><div align="center">Dessus</div></td>
    <td align="right"><div align="center">6</div></td>
    <td align="right">A++</td>
<td align="right">128029.2031</td>
<td align="right">54873.28</td><td align="right">1362.32</td>
<td align="right">37.17</td>
<td align="right">7</td>
</tr><tr class=" odd">
  <td><div align="center">Ariston</div></td>
  <td><div align="center">Frontal</div></td>
  <td align="right"><div align="center">5</div></td>
  <td align="right">A++</td>
<td align="right">na</td>
<td align="right">na</td><td align="right">na</td>
<td align="right">na</td>
<td align="right">na</td>
</tr><tr class=" even">
  <td><div align="center">Arthur Martin</div></td>
  <td><div align="center">Dessus</div></td>
  <td align="right"><div align="center">8</div></td>
  <td align="right">A+</td>
<td align="right">na</td>
<td align="right">na</td><td align="right">na</td>
<td align="right">na</td>
<td align="right">na</td>
</tr><tr class=" odd">
  <td><div align="center">Arthur Martin</div></td>
  <td><div align="center">Frontal</div></td>
  <td align="right" class=" even"><div align="center">5</div></td>
  <td align="right">A+</td>
<td align="right">na</td>
<td align="right">na</td><td align="right">na</td>
<td align="right">na</td>
<td align="right">na</td>
</tr><tr class=" even">
  <td><div align="center">Bosch</div></td>
  <td><div align="center">Dessus</div></td>
  <td align="right" class=" odd"><div align="center">7</div></td>
  <td align="right">A++</td>
<td align="right">na</td>
<td align="right">na</td><td align="right">na</td>
<td align="right">na</td>
<td align="right">na</td>
</tr><tr class=" odd">
  <td><div align="center">Bosch</div></td>
  <td><div align="center">Frontal</div></td>
  <td align="right" class=" even"><div align="center">6</div></td>
  <td align="right" class=" even">A+++</td>
  <td align="right">94.62332916</td>
<td align="right">23.45</td><td align="right">2514.79</td>
<td align="right">87.78</td>
<td align="right">14.42</td>
</tr><tr class=" even">
  <td><div align="center">Brandt</div></td>
  <td><div align="center">Dessus</div></td>
  <td align="right" class=" odd"><div align="center">5</div></td>
  <td align="right" class=" odd">A+</td>
  <td align="right">92.69750214</td>
<td align="right">25.05</td><td align="right">2775.98</td>
<td align="right">83.34</td>
<td align="right">13.10</td>
</tr><tr class=" odd">
  <td><div align="center">Brandt</div></td>
  <td><div align="center">Frontal</div></td>
  <td align="right" class=" even"><div align="center">8</div></td>
  <td align="right" class=" even">A++</td>
  <td align="right">104.4989014</td>
<td align="right">28.05</td><td align="right">3070.84</td>
<td align="right">93.06</td>
<td align="right">10.65</td>
</tr><tr class=" even">
  <td><div align="center">Electrolux</div></td>
  <td><div align="center">Dessus</div></td>
  <td align="right"><div align="center">5</div></td>
  <td align="right" class=" odd">A++</td>
  <td align="right">148.9329071</td>
<td align="right">36.63</td><td align="right">2789.13</td>
<td align="right">92.89</td>
<td align="right">11.02</td>
</tr><tr class=" odd">
  <td><div align="center">Electrolux</div></td>
  <td><div align="center">Frontal</div></td>
  <td align="right"><div align="center">7</div></td>
  <td align="right" class=" even">A+</td>
  <td align="right">150.6333008</td>
<td align="right">44.67</td><td align="right">3067.52</td>
<td align="right">91.21</td>
<td align="right">11.00</td>
</tr><tr class=" even">
  <td><div align="center">Siemens</div></td>
  <td><div align="center">Dessus</div></td>
  <td align="right"><div align="center">6</div></td>
  <td align="right" class=" odd">A+</td>
  <td align="right">137.6905975</td>
<td align="right">43.84</td><td align="right">3413.65</td>
<td align="right">89.94</td>
<td align="right">11.23</td>
</tr><tr class=" odd">
  <td><div align="center">Siemens</div></td>
  <td><div align="center">Frontal</div></td>
  <td align="right"><div align="center">5</div></td>
  <td align="right" class=" even">A++</td>
  <td align="right">143.7093964</td>
<td align="right">43.16</td><td align="right">3657.99</td>
<td align="right">85.45</td>
<td align="right">12.70</td>
</tr><tr class=" even">
  <td><div align="center">Vedette</div></td>
  <td><div align="center">Dessus</div></td>
  <td align="right"><div align="center">8</div></td>
  <td align="right">A+</td>
<td align="right">0.999008298</td>
<td align="right">0.74</td><td align="right">10193.49</td>
<td align="right">68.89</td>
<td align="right">17.41</td>
</tr><tr class=" odd">
  <td><div align="center">Vedette</div></td>
  <td><div align="center">Frontal</div></td>
  <td align="right"><div align="center">7</div></td>
  <td align="right">A+++</td>
<td align="right">0.999750018</td>
<td align="right">0.74</td><td align="right">10024.12</td>
<td align="right">67.44</td>
<td align="right">15.45</td>
</tr><tr class=" even">
  <td><div align="center">Whirlpool</div></td>
  <td><div align="center">Dessus</div></td>
  <td align="right"><div align="center">8</div></td>
  <td align="right">A+++</td>
<td align="right">0.999662519</td>
<td align="right">0.73</td><td align="right">10671.53</td>
<td align="right">68.21</td>
<td align="right">15.75</td>
</tr><tr class=" odd">
  <td><div align="center">Whirlpool</div></td>
  <td><div align="center">Frontal</div></td>
  <td align="right"><div align="center">8</div></td>
  <td align="right">A+++</td>
<td align="right">0.999499977</td>
<td align="right">0.71</td><td align="right">11545.19</td>
<td align="right">69.18</td>
<td align="right">17.09</td>
</tr>
</tbody>
</table>
</div>

</body></html>