Detaillierte Erläuterung des Implementierungscodes für die JQuery-Baumstruktur

Aus beruflichen Gründen ist es erforderlich, die Struktur und Wirkung eines Baums in einer bestimmten Spalte der Tabelle zu implementieren. Dies war das erste Mal, dass ich es verwendete Mach es. Nachdem ich drei Tage lang an einem Programm gearbeitet hatte, habe ich es endlich geschafft

Die funktionalen Anforderungen sind wie folgt folgt:

Klicken Sie auf das +-Zeichen, um die Unterknoten unten zu erweitern und nur die Knoten der nächsten Ebene des aktuellen Knotens zu erweitern. Knoten auf der zweiten Ebene und darunter sind noch ausgeblendet

Klicken Sie auf - Zeichen, und alle untergeordneten Knoten unten werden ausgeblendet

Klicken Sie auf 1 2 3 4, um entsprechend zum Knoten der ersten Ebene zu erweitern, und erweitern Sie dann zum Knoten der ersten Ebene Ebene drei und erweitern Sie ihn zur Ebene vier.

Meine Idee ist: Verwenden Sie das originellste gespleißte HTML und weisen Sie tr nach Erhalt der Datenquelle benutzerdefinierte Attribute zu, z. B. den Code und den übergeordneten Code der aktuellen Datenzeile, unabhängig davon, ob es sich um die Identität handelt des Blattknotens und des Werts der aktuellen Datenzeile und anderer Attribute, die ich verwenden kann. Was die Additions- und Subtraktionszeichen und die Einrückung von Text betrifft, verwende ich JQuery, um sie zu implementieren. Dem zweiten td werden zwei Bereiche hinzugefügt, der erste steuert das Einrückungszeichen und der zweite das +- Zeichen, da die Seitenanforderung darin besteht, nur dann zu falten und zu erweitern, wenn auf +- geklickt wird, anstatt auf td zu klicken, um zu erweitern und Zusammenbruch.

Veröffentlichen Sie ein Programm, das mir hilft, Jquery zu verstehen

function setIndentText() {            
$("#tableData tr:gt(0)").
each(function() {//橘色部分是查找id为
tableData
的DataTable里面除第一行以外的行
                var ifEndNode = $(this).attr("IfEndNode"); //获取行的属性值。是否是根节点 False True
                var costLevel = $(this).attr("CostLevel"); //当然节点的级别
                var tdSubject = $(this).find("td:eq(1)");//在这一行里面定位行的第一个td
                var indentSpace = "  ";
                var tdText = tdSubject.text();//获取这个td的text，里面即使有span nobr 获取的也是文字，不是html 
                for (var i = 0; i < costLevel; i++) {
                    indentSpace += indentSpace;
                }
                if (ifEndNode == "False") {
                    tdSubject.children().html("<span>" + indentSpace + "</span><span class=\"plus\" style=\"CURSOR: hand\" onclick=\"tdClick(this);\">[-]</span>" + tdText);
                }
            })
        }

<td style="cursor:hand">
<nobr 
onmouseover
="this.title = this.innerText.replace(/ /g,&#39;&#39;).replace(/　/g,&#39;&#39;).replace(&#39;[+]&#39;,&#39;&#39;).replace(&#39;[-]&#39;,&#39;&#39;)" >
<span></span>
<span style="CURSOR: hand" onclick="appGridTree.doExp(this);"></span>
项目成本</nobr>
</td>

Wenn es sich um ein solches td handelt, holen Sie sich das Objekt des td,

tdSubject .children () ist fdeac769c087bf1a692c7dd9e01feadf9c46f421c188c45fb09e606d3bbae378

tdSubject.children().html( ) ist der HTML-Code der beiden Bereiche

tdSubject.text(); sind die Wörter Projektkosten

tdSubject.parent() soll tr

1. Fügen Sie tr mithilfe von js einige Attribute hinzu. Ist es möglich, Attribute anzupassen? ?

jquery: $(

"#test").attr("test", "aaa") // Einstellungen

$(

"#test").removeAttr("test") // Löschen

js von : var testEle = document.getElementById("test")

testEle.setAttribute(

"test","aaa"); // Einstellungen

testEle.attributes[

"test"].nodeValue; // Holen Sie sich die Auswahl von

2.jquery Device$("#btnConfirm")

Ereignisbindungsfunktion: bind();

Anzeigefunktion ausblenden: show(), hide();

Ändern Sie das Innere von das Element html: html("hello world");

3 Alle TDS in der Tabelle durchlaufen, deren ID tableData ist

$("#tableData").find("tr").each(function() {
                $(this).find("td").each(function() {
                    alert($(this).text());
                });
            });

undefinierter Typ

var name;

alert(

typeof name);//Die Ausgabe ist undefiniert

alert(

typeof myname); / /Die Ausgabe ist undefiniert

alert(name==

"undefiniert");/ /Die Ausgabe ist falsch

alert(name==undefiniert);

//Die Ausgabe ist wahr

undefiniert ist ein Typ, nicht

String

Es gibt fünf Grundwerte in JavaScript: Undefiniert, Null, Boolean, Zahl, String,

5, Elementanzeige, Ausblenden

$(this).show(); $(this).toggle(); Automatisch zum Ausblenden der Anzeige wechseln

Anzeigen: umschalten (wahr);

Ausblenden: umschalten (falsch);

 $(this).slideDown("slow")；缓慢滑动的效果显示

$(this).slideUp("slow")缓慢滑动的效果隐藏

 $(this).slideToggle();缓慢滑动的显示或隐藏 

6、增加css

如果是css，$(this).css("background", "#f9edf1");
如果是class，  $(this).addClass("classname");

7 append 与appendto用法的区别

$("#button1").click(function(){$("<input type=&#39;text&#39; name=&#39;ddd&#39; id=&#39;ddd&#39; value=&#39;hello ,cssrain..&#39; ><br>").appendTo("#p1");});
$("#button1").click(function(){$("#p1").append("<input type=&#39;text&#39; name=&#39;ddd&#39; id=&#39;ddd&#39; value=&#39;hello ,cssrain..&#39; ><br>");});

$(html字符串).appendTo(某个控件)；$(某个控件).append(html字符串);

8、调试同事的一个bug，发现Append这个方法的真正用法

append() 方法在被选元素的结尾（仍然在内部）插入指定内容

关键就在这个“仍然在内部”，比如tr.append ，就是在fd273fcf5bcad3dfdad3c41bd81ad3e5这个结束标记里面附加字符串，不是在外面

9、今天使用了after函数，跟append（）相对应的 ，在某个元素后面附加相应的东东；$("#tblId").find("tr[id]:last") 查找table中凡是有id属性的最后一个tr元素

10、$("#tableId").find(tr[id]:last)  遍历table下面的tr 不仅遍历table中tr，也遍历table里面嵌套的table的tr，也就是说遍历table里面所有的tr标签，不分层级关系

11、Query.each(obj,callback) //这个函数用了很多次了，没有真正理解其中的意思，现在了解了 

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Implementierungscodes für die JQuery-Baumstruktur. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!