Detailed explanation of jquery tree structure implementation code

Due to work needs, it is required to realize the structure and effect of a tree in a certain column of the table. I have to use jquery. It is the first time I use it and it is difficult to do it. After holding on for three days, I finally made do with it. The functional requirements of

are implemented as follows:

Click the + sign to expand the sub-nodes below and only expand the next-level nodes of the current node. Nodes at the second level and below are still hidden

Click the - sign, and all sub-nodes below are hidden

Click 1 2 3 4 to expand to the first-level node accordingly, and then expand to the first-level node Level three, expand to level four.

My idea is: use the most original spliced ​​html, and after obtaining the data source, assign custom attributes to tr, such as the code and parentcode of the current row of data, whether it is the identity of the leaf node, and the current data row's level and other attributes that I can use. As for the addition and subtraction signs and the indentation of text, I use jquery to implement it. Two spans are added to the second td, the first one controls the indentation character, and the second one controls the +- sign, because the page requirement is to fold and expand only when +- is clicked, instead of clicking td to expand and collapse.

Post a program to help me understand 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>

If it is such a td, to get the object of the td,

tdSubject.children() isfdeac769c087bf1a692c7dd9e01feadf9c46f421c188c45fb09e606d3bbae378

tdSubject.children().html() is the html of two spans

tdSubject.text(); is the words project cost

tdSubject.parent() is to get tr

1, js adds some attributes to tr. Is it possible to customize attributes? ?

jquery: $("#test").attr("test", "aaa") // Settings

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

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

testEle.setAttribute( "test","aaa"); // Settings

testEle.attributes["test"].nodeValue; // Get the selection of

2.jquery Device$("#btnConfirm")

Event binding function: bind();

Hide display function: show(), hide();

Modify the inside of the element html: html("hello world");

3 Traverse all tds in the table with id tableData

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

4, undefined type

var## name;

alert(

typeof name); //The output is undefined

alert(

typeof myname);//Output is undefined

alert(name==

"undefined");//The output is false

alert(name==undefined);

//The output is true

undefined is a type, not

There are five primitive values ​​​​in string

javascript: Undefined, Null, Boolean, Number, String,

5, element display and hiding

$(this).show(); $(this).hide(); $(this).toggle();Automatically switch to hide and display

Display: toggle(true);

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

The above is the detailed content of Detailed explanation of jquery tree structure implementation code. For more information, please follow other related articles on the PHP Chinese website!