Explication détaillée du code d'implémentation de la structure arborescente jquery

En raison de besoins professionnels, il est nécessaire d'implémenter la structure et l'effet d'un arbre dans une certaine colonne du tableau. J'ai dû utiliser jquery. C'était la première fois que je l'utilisais et c'était difficile de le faire. faites-le. Après trois jours d'attente pour un programme, je me suis finalement contenté de celui-ci

Les exigences fonctionnelles sont les mêmes. suit :

Cliquez sur le signe + pour développer les sous-nœuds ci-dessous et développez uniquement les nœuds de niveau suivant du nœud actuel. Les nœuds du deuxième niveau et inférieurs sont toujours masqués

Cliquez sur le signe +. - signe, et tous les nœuds enfants ci-dessous sont masqués

Cliquez sur 1 2 3 4 pour développer le nœud de premier niveau en conséquence, puis développez jusqu'au nœud de premier niveau Niveau trois, développez jusqu'au niveau quatre.

Mon idée est la suivante : utilisez le code HTML épissé le plus original, et après avoir obtenu la source de données, attribuez des attributs personnalisés à tr, tels que le code et le code parent de la ligne de données actuelle, qu'il s'agisse de l'identité du nœud feuille, et la valeur du niveau de données actuel et d'autres attributs que je peux utiliser. Quant aux signes d'addition et de soustraction et à l'indentation du texte, j'utilise jquery pour l'implémenter. Deux travées sont ajoutées au deuxième td, le premier contrôle le caractère d'indentation et le second contrôle le signe +-, car l'exigence de la page est de se plier et de se développer uniquement lorsque l'on clique sur +-, au lieu de cliquer sur td pour développer et effondrement.

Publiez un programme pour m'aider à comprendre jquery

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>

S'il s'agit d'un tel td, récupérez l'objet du td,

tdSubject .children () est fdeac769c087bf1a692c7dd9e01feadf9c46f421c188c45fb09e606d3bbae378

tdSubject.children().html( ) est le code HTML des deux travées

tdSubject.text(); est les mots Coût du projet

tdSubject.parent() doit obtenir tr

1. Ajouter quelques attributs à tr en utilisant js. Est-il possible de personnaliser les attributs ? ?

jquery : $("#test").attr("test", "aaa") // Paramètres

$("#test").removeAttr("test") // Supprimer

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

testEle.setAttribute( "test","aaa"); // Paramètres

testEle.attributes["test"].nodeValue // Obtenez la sélection de

2.jquery Device$("#btnConfirm")

Fonction de liaison d'événement : bind();

Fonction de masquage d'affichage : show(), hide();

Modifier l'intérieur de l'élément html: html("hello world");

3 Parcourez tous les tds de la table dont l'identifiant est tableData

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

4 type non défini

var nom;

alerte(

type de nom);//La sortie n'est pas définie

alert(

typeof myname); / /La sortie n'est pas définie

alert(name==

"undefined");/ /La sortie est fausse

alert(name==undefined);

//La sortie est vraie

undefined est un type, pas

String

javascript Il existe cinq valeurs primitives : Undefined, Null, Boolean, Number, String,

5, element afficher, masquer

$(this).show(); $(this).hide(); $(this).toggle(); Basculer automatiquement pour masquer l'affichage

Afficher : basculer (true);

Masquer : basculer(false);

 $(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) //这个函数用了很多次了，没有真正理解其中的意思，现在了解了 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!