Der Grund, warum der Client DHTML verwendet, ist hauptsächlich, um eine Fernbedienung zu erreichen. Setzen Sie ihn einfach als aktualisiert-freie Effekt aus.
Datei: study.htm
<! docType html public -// w3c // dtd html 4.0 transitional // en>
<html>
<kopf>
<title> </title>
<meta name = Generator content = Microsoft Visual Studio 7.0>
</head>
<script Language = jscript>
var otblmain; // Haupttabelle
var strhtml =; // Verwenden Sie vorübergehend globale Variablen
var bsavestatus = true; // Ist der Speichern erfolgreich?
var icallid; // die eindeutige Nummer, die den Webservice aufruft
// Erhalten Sie alle Elemente über WebService
// dann die Ausgabe über die Rückruffunktion ongetItems formatieren
Funktion getitems ()
{
// Aufrufen der GetItem -Methode des Webservice
service.myService.callService (OngetItems, getItems);
}
// WebService -Rückruffunktion
Funktion ongetItems (Ergebnis)
{
if (result.Error)
{
alert (result.errordetail.code +: + result.errordetail.String);
zurückkehren ;
}
bbxml.loadxml (result.raw.xml);
var sxml = bbxml.transformNode (bbxsl.xmldocument);
if (bbxml.parseerror.reason ==)
{
strhtml = sxml;
}
anders
{
strhtml = bbxml.parseerror.reason;
}
}
// Seiteninitialisierung
Funktion onload ()
{
// Vorbereitung auf die Verwendung von WebService
service.usseService (Studie.asmx? WSDL, MyService);
// Definieren Sie das Rekordtabellenobjekt
OTBlMain = document.getElementById (tBlMain);
}
// Fügen Sie einen neuen Datensatz hinzu
// Die Funktion besteht darin, der Tabelle eine neue Zeile hinzuzufügen und 3 TD -Stile und Ereignisse zu definieren
Funktion Onadd ()
{
var row = otblmain.insertrow ();
row.bgcolor = #ffffff;
var cellId = row.insertcell ();
cellId.innerhtml = otblmain.rows.length - 1;
cellId.onclick = function () {onidclick (this);};
CellId.Style.Cursor = Hand;
cellId.title = ausgewählter Datensatz;
var cellItem = row.insertcell ();
CellItem.Style.Cursor = Crosshair;
cellItem.onclick = function () {onitemclick (this);};
var cellDemo = row.insertcell ();
CellDemo.Style.Cursor = Hilfe;
cellDemo.onclick = function () {onDemoclick (this);};
}
// TD -Element Klicken Sie auf Ereignis
// Die Funktion besteht darin, eine Ebene aufzunehmen und dann alle Elemente über die GetItem -Methode zu erhalten
// Nach der Formatierung als innerhtml als diese neue Ebene
Funktion onitemclick (Zelle)
{
getItems ();
var odiv = document.createelement (div);
odiv.zindex = 1;
odiv.style.position = absolut;
odiv.style.height = 200;
odiv.style.width = 300;
odiv.style.left = cell.style.left;
odiv.style.top = cell.style.top;
odiv.style.backgroundcolor = #99eeeff;
Odiv.Style.Border = '0,1 cm Rille blau';
Odiv.Style.Overflow = Auto;
odiv.innerhtml = strhtml;
//document.body.appendchild(odiv);
cell.Appendchild (odiv);
}
// TD Element Auswahlereignis
Funktion onItemSelected (Zelle)
{
var otr = cell.Parentelement;
var otable = otr.Parentelement;
var otbody = otable.Parentelement;
var odiv = otbody.Parentelement;
odiv.style.display = none;
var ocell = odiv.Parentelement;
ocell.removechild (odiv);
ocell.Innertext = Cell.InnerText;
odiv = null;
}
// Ausgewählter Datensatz
Funktion onidclick (Zelle)
{
var tr = cell.Parentelement;
if (tr.bgcolor == #99ccff)
{
tr.bgcolor = #ffffff;
}
anders
{
für (var i = 0; i <otblmain.rows.length; i ++)
{
otblmain.rows [i] .bgcolor = #ffffff;
otblmain.rows [i] .cells [0] .title = ausgewählter Datensatz;
}
tr.bgcolor = #99ccff;
cell.title = nicht ausgewählt;
}
}
// Schaltfläche löschen Klicken Sie auf Ereignis
// Löschen Sie die vom Benutzer ausgewählte Zeile und nummerieren Sie die Zeile aus
Funktion ONDELETE ()
{
var i = getSelectedIndex ();
if (i == 0)
{
ALERT (Es wird kein Datensatz ausgewählt!);
false zurückgeben;
}
anders
{
otblmain.deletero (i);
für (var j = 1; j <otblmain.rows.length; j ++)
{
otblmain.rows [j] .cells [0] .InNeText = j;
}
}
}
// Holen Sie sich die vom Benutzer ausgewählte Zeile
Funktion getSelectedIndex ()
{
für (var i = 0; i <otblmain.rows.length; i ++)
{
if (otblmain.rows [i] .bgcolor == #99ccff)
{
kehre I zurück;
}
}
Rückkehr 0;
}
// Die Klickzeit der Demo TD in der Tabelle klicken
// Die Funktion besteht darin, ein gemustertes Fenster aufzunehmen, und der Benutzer gibt mehrere Werte ein
Funktion Ondemoclick (Zelle)
{
//alert(cell.InNeText);
var odemo = window.showmodaldialog (Demo.htm, Cell.InNerText, Dialogwidth: 200px; DialogHeight: 200px; resizierbar: nein; Status: nein; Scroll: no);
if (odemo! = undefiniert)
{
Cell.InnerText = odemo.name + - + odemo.amount;
}
}
// So klicken Sie auf die Schaltfläche Speichern
// Die aktuelle Methode besteht darin, den Webservice anzurufen, um jeden Datensatz nacheinander zu speichern.
// Löschen Sie die gespeicherten Datensätze über die Rückruffunktion OnSavereCords (Ergebnis)
Funktion onsave ()
{
if (otblmain.rows.length <2)
{
Alarm (kann kein Aufzeichnung gespeichert werden!);
false zurückgeben;
}
für (var i = 1; i <otblmain.rows.length && bsavestatus; i ++)
{
var Stritemname;
var strDemoname;
var intdemoamount;
stritemname = otblmain.rows [i] .cells [1] .InNerText;
var arr = otblmain.rows [i] .cells [2] .InNertext.Split (-);
if (arr.length! = 2)
{
Alarm (jede Aufzeichnung muss ausgefüllt werden);
false zurückgeben;
}
anders
{
strDemoname = arr [0];
intDemoamount = arr [1];
// alarm (stritemname +, + strDemoname +, + intDeMoamount);
Fenster.Status =;
icallid = service.myService.callService (OnSavercords, Savevercord, Stritemname, StrDemonName, ParseInt (intdemoamount, 10));
Fenster.Status = Saving + i + Record ...;
}
}
}
// Speichern Sie den Datensatz
Funktion Onsavercords (Ergebnis)
{
if (result.Error)
{
alert (result.errordetail.code +: + result.errordetail.String);
bsavestatus = false;
zurückkehren ;
}
anders
{
if (result.value)
{
window.status = window.status + Erfolg! ;
otblmain.deletero (1);
}
anders
{
bsavestatus = false;
Alarm (Save fehlgeschlagen aus unbekannten Gründen!);
window.status = window.status + fehlgeschlagen! Save! ;
}
}
}
</script>
<body onload = onload ();>
<div id = Service style = Verhalten: URL (WebService.htc)>
<xml id = bbxml> </xml>
<xml id = bbxsl src = item1.xsl> </xml>
<br>
<H3 Align = Center> WebService -Beispiel </H3>
<br>
<br>
<Tabellenbreite = 600 Align = CENTER ID = TBLMAIN BGCOLOR =#000000 Cellpacing = 1>
<tr bgcolor =#ffffff>
<td width = 50> nummer </td>
<td width = 200> item </td>
<td> Demo </td>
</tr>
</table>
<P Align = Center>
<Eingabe type = Taste Wert = add onclick = onAdd ()> <Eingabetyp = Taste Wert = delete Onclick = ONDELETE ()>
<Eingabe type = Taste Wert = speichern aufclick = onsave ()>
</p>
</body>
</html>
Das obige HTM wird verwendet, um über Microsofts WebService.htc auf die WebService -Seife zuzugreifen. Es ist sehr gut eingekapselt. Die Arbeit, die wir leisten müssen, ist, den übergebenen Rücken XML zu analysieren. Ich habe XSL verwendet, um es zu analysieren. Das Folgende ist der Inhalt dieser Datei
Datei item1.xsl
<xml Version = 1.0 coding = utf-8?>
<XSL: Stylesheet Version = 1.0 xmlns: xsl = http: //www.w3.org/1999/xsl/transform xmlns: soap = http: //schemas.xmlsoap.org/soap/envelope/ xmlns: xsi = http: //www.w3.org/2001/xmlschema-instance xmlns: xsd = http: //www.w3.org/2001/xmlschema>
<XSL: Ausgabemethode = HTML/>
<XSL: Template Match =/>
<XSL: Templates select = // SOAP: Körper/>
</xsl: Vorlage>
<XSL: Template Match = Soap: Body>
<xsl: anwenden-templates select =*[lokal-name () = 'getItemSResponse']/*[Local-name () = 'getItemSresult'] //>
</xsl: Vorlage>
<xsl: template match =*[lokal-name () = 'getItemSresult']>
<html>
<body>
<Table Border = 1>
<tr>
<Th> Name </th>
<Th> Wert </th>
</tr>
<XSL: for-Each select =*[Local-name () = 'AnyType' und @xsi: type = 'item']>
<XSL: Templates select =./>
</xsl: for-leec>
</table>
</body>
</html>
</xsl: Vorlage>
<XSL: Template Match =*[Local-name () = 'Anytype' und @xsi: type = 'item']>
<tr>
<td style = cursor: Hand onclick = ONItemSelected (this);>
<XSL: Text Disable-Output-Escaping = Ja> & nbsp; </xsl: text>
<XSL: Wert von Select =*[lokaler-name () = 'name']/>
</td>
<td>
<XSL: Text Disable-Output-Escaping = Ja> & nbsp; </xsl: text>
<XSL: Wert von Select =*[lokaler-name () = 'Wert']/>
</td>
</tr>
</xsl: Vorlage>
</xsl: Stylesheet>
Das obige Beispiel ist sehr einfach, die Hauptschwierigkeit liegt in diesen DHTML. Wenn Sie es jedoch erweitern, können Sie viele Funktionen ausfüllen, die Sie zuvor mit ActiveX implementieren mussten.