Ich hatte Probleme bei der Auswahl der Knoten meines IE Web Control TreeView. Ich führe den Code im IE8-Kompatibilitätsmodus (IE7-Standardmodus) aus.

Ich versuche, die Baumknoten wie folgt auszuwählen:

$("tvns\\:treenode").css("color", "red");

Ich habe versucht, diesen Selektor sowohl innerhalb einer $ (document) .ready () -Funktion als auch innerhalb einer Funktion zu verwenden, die beim Drücken einer Taste aufgerufen wird, nachdem die TreeView gefüllt wurde. Die beiden \ Backspaces dienen dazu, dem Doppelpunkt zu entkommen.

Das TreeView-HTML sieht folgendermaßen aus:

<ciswc:TreeView ID="tvWorkArea1" onfocus="fn(this);" 
ondragstart="javascript:captureNode1();" class="ui-widget ui-widget-content" 
onclick="fnStoreEID(0)" 
runat="server"SystemImagesPath="Common/webctrl_client/1_0/treeimages/" 
onunhover="unHoverFunction('WorkArea')" EnableViewState="False" 
onhover="selectNode('Smart');" Height="100%" width="100%">
</ciswc:TreeView>

Ich sollte beachten, dass aus irgendeinem Grund der TreeView-HTML-Code beim Ausführen der Anwendung in den IE Developer Tools als tvns: TreeView angezeigt wird. Die Auswahl der Knoten im Baum sollte jedoch nicht beeinflusst werden.

Jeder Knoten sieht ungefähr so aus:

<tvns:treenode Expanded="True" Selected="true" NavigateUrl="#" NodeData="0">
New Entity:
</tvns:treenode>

Beim ersten Laden der Seite ist die Baumansicht vorhanden, es sind jedoch noch keine Baumknoten vorhanden. Später, nachdem der Benutzer einige Vorgänge ausgeführt hat, wurde die TreeView von den Baumknoten gefüllt.

Ich habe eine Schaltfläche, die eine Funktion aufruft, die den JQuery-Selektor enthält. Ich habe das Javascript getestet und kann sehen, dass die Codefunktion aufgerufen wird, aber sie scheint die Knoten nicht zu finden.

Irgendwelche Ideen?

Ich habe versucht, die Baumknoten mit reinem Javascript auszuwählen, aber es wird nichts zurückgegeben:

var nodes = document.getElementsByTagName("tvns:treenode");

for (i = 0; i < nodes.length; i++) {
    nodes[i].style.colour = "red";
}

Ich stelle fest, dass der HTML-Code das Attribut runat = "server" hat. Könnte dies der Grund sein, warum ich die TreeView-Knoten nicht auswählen kann?

1
Ciaran Gallagher 21 Nov. 2013 im 16:29

3 Antworten

Beste Antwort

Es scheint, dass ich nicht richtig verstanden habe, wie die ASP.NET-Webserver-Steuerelemente funktionieren.

Der Grund, warum ich die Elemente nicht auswählen konnte, ist, dass sie im DOM nicht vorhanden sind und dies niemals getan hätten. Der Grund dafür ist, dass das von mir verwendete IE-Websteuerelement (es scheint eine ASP.NET 1.0-Komponente zu sein) die Baumansicht auf der Clientseite dynamisch generiert (es ist in reinem Javascript implementiert).

Die Daten in den Baumknoten sind zwar im DOM vorhanden, sie sind jedoch tatsächlich im Attribut value eines HTML-Tags input in einem durch Kommas getrennten Format enthalten. Ich vermute, dass dies vom Server zurückgegeben wird. Dann liegt es an der clientseitigen IE-Websteuerung, die TreeView basierend darauf zu rendern. Ich gehe von einem Großteil dieses Wissens aus dem aus, was ich im Quellcode sehen kann, weil ich online keine andere Dokumentation für dieses Websteuerelement finden kann, wahrscheinlich weil es so alt ist.

Ich prüfe derzeit die Machbarkeit des Ersetzens des IE Web Control durch das ASP.NET 2.0 System.Web.UI.WebControls.Treeview. Ich habe ein wenig damit experimentiert und es scheint, dass der HTML-Code dieses Mal serverseitig und nicht clientseitig generiert wird. Daher ist der generierte HTML-Code im HTML-DOM für die Seite verfügbar. und so kann ich die Baumknoten auswählen und damit machen, was ich will!

0
Ciaran Gallagher 22 Nov. 2013 im 14:29

Ich denke, das Problem liegt in den Schrägstrichen im Selektor. Sie können versuchen, Ihren Baumknoten ein Dummy-Attribut wie "data-treenode" auf jedem Knoten hinzuzufügen. Beispiel (Ich habe kein IE8, getestet auf IE11 mit IE7 User Agent):

<tvns:treenode Expanded="True" data-treenode="true" Selected="true" NavigateUrl="#"  NodeData="0">
        New Entity:
</tvns:treenode>

$("[data-treenode]").css("color", "red");

// another solution
$("[NavigateUrl][NodeData]").css("color", "red");

http://jsfiddle.net/FdgR4/

-1
Sami Racho 25 Nov. 2013 im 15:19

Ihre Auswahl ist im IE in Ordnung, aber .css() ist aus irgendeinem Grund für dieses Objekt nicht verfügbar.
Aber .attr() funktioniert gut:

alert($("tvns\\:treeview").html());
$("tvns\\:treeview").attr("style", "color: red;");

Meine DEMO.

upd. bessere reine js-Lösung:

var els = document.getElementsByTagName("tvns:treeview");
for (i = 0; i < els.length; i++)
{
    els[i].style.color = "red";
}

DEMO

1
Enam 21 Nov. 2013 im 13:14