File "work.html"
Full Path: /home/analogde/www/MassageV3/EVAL/work.html
File size: 19.2 KB
MIME-type: text/html
Charset: 8 bit
<!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">
<!-- Do not copy script below: personal tracking code -->
<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>
<!-- Syntax Highlighter - doesn't belong to table filter script - do not copy -->
<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 nergtique:</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">
<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>
<div style="margin: 25px 0pt; clear: both;"> </div>
<script language="javascript" type="text/javascript">
//<![CDATA[
var props = {
sort: true,
alternate_rows: true,
rows_counter: true,
rows_counter_text: "Displayed rows: ",
loader: true,
loader_html: '<img src="loader.gif" alt="" style="vertical-align:middle; margin-right:5px;" />Loading...',
status: true,
status_bar: true,
col_number_format: [null,null,'US','US','US','US','US','US','US'],
display_all_text: " [ Tout voir ] ",
status_bar_target_id: 'statusDiv',
col_0: "select",
col_1: "multiple",
col_2: "checklist",
col_3: "checklist",
col_8: "none",
external_flt_grid: true,
external_flt_grid_ids: ['selection_marque','selection_chargement','selection_capacite','selection_classe']
}
setFilterGrid("demo",props);
//]]>
</script>
</body></html>