首頁  >  文章  >  web前端  >  jquery 樹形結構實作程式碼詳解

jquery 樹形結構實作程式碼詳解

伊谢尔伦
伊谢尔伦原創
2017-06-17 10:45:042643瀏覽

 由於工作需要,要求實現在table中的某一列有樹的結構和效果,不得已使用jquery,第一次用,寸步難行 一段程序憋三天,終於湊合著實作了

 

 功能要求如下:

點選+號,下面的子節點展開,只展開目前節點的下一層節點,二級及以下節點仍隱藏

點擊-號,下面的所有子節點隱藏

#點擊1 2 3 4 會對應的展開到第一級節點,展開到第三級,展開到第四級。

我的想法是:使用最原始的拼接html ,取得資料來源以後,給tr賦值自訂屬性,例如目前行資料的code 、parentcode,是否是葉子節點的標識,目前資料行的level 等等我能用到的屬性,至於加減號以及文字的縮排我是用jquery實現的。第二個td裡面加入兩個span,第一個控制縮排字符,第二個控制+-號,因為頁面的要求是點擊+-時才折疊、展開,而不是點擊td展開折疊。

 貼一段程序,幫助我理解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>

如果是這樣一個td,取得到td的對象,

tdSubject.children()就是fdeac769c087bf1a692c7dd9e01feadf9c46f421c188c45fb09e606d3bbae378

 tdSubject.children().html() 就是兩個span的html

  tdSubject.text();就是專案成本這幾個字

tdSubject.parent()  是取得tr

#1、 js為tr 增加一些屬性,自訂屬性不知道行不行? ?

jquery 的:$(##"#test").attr("test", "aaa"##// 設定 #  $(

"#test").removeAttr("test"#// 刪除 

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

"test","aaa"); // 設定    #testEle.attributes[

"test"].nodeValue; // 取得 #2.jquery 的選擇器$("#btnConfirm")

事件綁定函數:bind();

隱藏顯示函數:show() 、hide();

##修改元素內部html :html("hello world");

3  遍歷  id 為tableData 的table裡面所有td

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

4、 undefined 類型

var name;   alert(

typeof name); //輸出為undefined   alert(

typeof## myname);#//輸出為undefined   alert(name==#"undefined"

);##//輸出為false   alert(name==undefined);//輸出為true

  

undefined是一種類型,不是字串

javascript 中有五種原始值:Undefined,Null,Boolean,Number,String,

5、元素顯示、隱藏

 $(this).show();     $(this).hide();   $(this).toggle();自動切換隱藏顯示

顯示:toggle(true);

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

以上是jquery 樹形結構實作程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn