Per far eseguire queste due operazioni a ErgoDataGrid c'è un lavoro preparativo a livello di stesura di codice da fare:
- nell' inizializzazione dell' oggetto Grid, bisogna mettere il parametro canHelp uguale a true e inserire una funzione OnHelp richiamata alla pressione del tasto
che fa apparire una finestra del browser senza menubar,toolbar, ecc;
- nella pagina html richiamata dal browser possono essere elencate le possibili scelte predefinite per filtro e ordinamento, il codice per ognuna delle quali deve essere fatto eseguire da uno script separato incluso nella pagina;
- lo script con le operazioni da eseguire fa sicuramente riferimento alla funzione SetFilterSort.
L' esempio seguente mostra i tre passi di sopra applicati alla tabella "Cars", che prevede la possibilità di far apparire all' utente finale alcune scelte predefinite per il filtro e l' ordinamento.
file Cars.js
...
function Cars_init() {
params=new Object();
...
params.canHelp=true;
params.OnHelp=OnHelp;
...
Cars=new Grid(params);
}
function OnHelp() {
var height=300;
var width=400;
window.open('','',"height="+height+",width="+width+",top="+(screen.height-height)/2+
",left="+(screen.width-width)/2+",toolbar=no,directories=no,status=no,location=no,menubar=no,resizable=no,scrollbars=no").location.href="helpCartridgesEnglish.htm";
}
...
Cars_init();
|
<HEAD>
<TITLE>HELP</TITLE>
<STYLE>
A { text-decoration:none }
A:visited { color: blue }
</STYLE>
<SCRIPT SRC=helpCars.js></SCRIPT>
</HEAD>
<BODY BGCOLOR=#ffffcc>
<FONT FACE=Arial STYLE="font-size:9pt">
<CENTER>Show only the cars:</CENTER><BR>
<FORM ACTION=javascript:DoHelpCars() ID=form1>
<INPUT TYPE=RADIO ID=menuCars NAME=menuCars VALUE=0 CHECKED>of
<SELECT ID=carsModel STYLE="font-face:Arial;font-size:9pt">
<OPTION VALUE=0>Audi</OPTION>
<OPTION VALUE=1>BMW</OPTION>
<OPTION VALUE=2>Volkswagen</OPTION></SELECT><BR><BR>
<INPUT TYPE=RADIO ID=menuCars NAME=menuCars VALUE=1>with a power
<SELECT ID=carsPower STYLE="font-face:Arial;font-size:9pt">
<OPTION VALUE=0>< 80 cc</OPTION>
<OPTION VALUE=1>between 80 cc and 100cc</OPTION>
<OPTION VALUE=2>> 100 cc</OPTION></SELECT><BR><BR>
<INPUT TYPE=RADIO ID=menuCars NAME=menuCars VALUE=2>of price
<SELECT ID=carsPrice STYLE="font-face:Arial;font-size:9pt">
<OPTION VALUE=0>< 10.000 $</OPTION>
<OPTION VALUE=1>between 10.000 $ and 20.000 $</OPTION>
<OPTION VALUE=2>> 20.000 $</OPTION></SELECT><BR><BR>
<INPUT TYPE=RADIO ID=menuCars NAME=menuCars VALUE=3>with a percorrence
<SELECT ID=carsKm STYLE="font-face:Arial;font-size:9pt">
<OPTION VALUE=0>< 4.000 miles</OPTION>
<OPTION VALUE=1>between 4.000 and 60.000 miles</OPTION>
<OPTION VALUE=2>> 60.000 miles</OPTION></SELECT><BR><BR>
<INPUT TYPE=RADIO ID=menuCars NAME=menuCars VALUE=4>older </A>
<SELECT ID=carsRegistration STYLE="font-face:Arial;font-size:9pt">
<OPTION VALUE=0>than 3 years</OPTION>
<OPTION VALUE=1>between 3 and 5 years</OPTION>
<OPTION VALUE=2>more than 5 years</OPTION>
</SELECT>
<BR><BR><BR>
<CENTER>Sort by <SELECT ID=sortCars STYLE="font-face:Arial;font-size:9pt">
<OPTION VALUE=2>model</OPTION>
<OPTION VALUE=3>displacement</OPTION>
<OPTION VALUE=4>registration date</OPTION>
<OPTION VALUE=5>covered miles</OPTION>
<OPTION VALUE=6>power</OPTION>
<OPTION VALUE=7>kind of fuel</OPTION>
<OPTION VALUE=8 SELECTED>price</OPTION>
</SELECT>
in mode<SELECT ID=sortCarsMode STYLE="font-face:Arial;font-size:9pt">
<OPTION VALUE=A>ascending</OPTION>
<OPTION VALUE=D>descending</OPTION>
</SELECT><BR><BR>
<INPUT TYPE=SUBMIT STYLE="font-face:Arial;font-size:9pt" VALUE=Filter>
</CENTER>
</FONT>
</BODY>
|
function DoHelpCars() {
var sort=document.getElementById("sortCarsMode").value+document.getElementById("sortCars").value;
if (document.getElementById("form1").menuCars[0].checked) {
if (document.getElementById("carsModel").value==0)
opener.Cars.SetFilterSort([[2,14,"audi"]],sort);
if (document.getElementById("carsModel").value==1)
opener.Cars.SetFilterSort([[2,14,"bmw"]],sort);
if (document.getElementById("carsModel").value==2)
opener.Cars.SetFilterSort([[2,14,"volkswagen"]],sort);
} else if (document.getElementById("form1").menuCars[1].checked) {
if (document.getElementById("carsPower").value==0)
opener.Cars.SetFilterSort([[6,4,80]],sort);
if (document.getElementById("carsPower").value==1)
opener.Cars.SetFilterSort([[6,6,"80_100"]],sort);
if (document.getElementById("carsPower").value==2)
opener.Cars.SetFilterSort([[6,2,100]],sort);
} else if (document.getElementById("form1").menuCars[2].checked) {
if (document.getElementById("carsPrice").value==0)
opener.Cars.SetFilterSort([[8,4,10000]],sort);
if (document.getElementById("carsPrice").value==1)
opener.Cars.SetFilterSort([[8,6,"10000_20000"]],sort);
if (document.getElementById("carsPrice").value==2)
opener.Cars.SetFilterSort([[8,2,20000]],sort);
} else if (document.getElementById("form1").menuCars[3].checked) {
if (document.getElementById("carsKm").value==0)
opener.Cars.SetFilterSort([[5,4,4000]],sort);
if (document.getElementById("carsKm").value==1)
opener.Cars.SetFilterSort([[5,6,"4000_60000"]],sort);
if (document.getElementById("carsKm").value==2)
opener.Cars.SetFilterSort([[5,2,60000]],sort);
} else if (document.getElementById("form1").menuCars[4].checked) {
var d=new Date();
if (document.getElementById("carsRegistration").value==0)
opener.Cars.SetFilterSort([[4,2,d.getDate()+"/"+(d.getMonth()+1)+"/"+(Number(d.getFullYear())-3)]],sort);
if (document.getElementById("carsRegistration").value==1)
opener.Cars.SetFilterSort([[4,6,d.getDate()+"/"+(d.getMonth()+1)+"/"+(Number(d.getFullYear())-5)+"_"+d.getDate()+"/"+(d.getMonth()+1)+"/"+(Number(d.getFullYear())-3)]],sort);
if (document.getElementById("carsRegistration").value==2)
opener.Cars.SetFilterSort([[4,4,d.getDate()+"/"+(d.getMonth()+1)+"/"+(Number(d.getFullYear())-5)]],sort);
}
window.close();
}
|