Jquery 트리 구조 구현 코드에 대한 자세한 설명

작업 요구로 인해 테이블의 특정 열에 트리의 구조와 효과를 구현해야 했습니다. 처음 사용하는 것이어서 어려웠습니다. 3일간의 프로그램 작업 끝에 드디어 해냈습니다

기능 요구 사항은 다음과 같습니다.

+ 기호를 클릭하면 아래 하위 노드만 확장됩니다. 현재 노드의 레벨 노드는 계속 숨겨집니다.

- 기호를 클릭하면 아래의 모든 하위 노드가 숨겨집니다. 1 2 3 4를 클릭하면 확장됩니다. 첫 번째 수준 노드, 세 번째 수준, 그에 따라 네 번째 수준으로 이동합니다.

내 생각은: 가장 독창적인 스플라이스된 ​​html을 사용하고, 데이터 소스를 얻은 후 리프 노드의 ID인지 여부에 관계없이 현재 데이터 행의 코드 및 상위 코드와 같은 사용자 정의 속성을 tr에 할당하는 것입니다. , 현재 데이터 행의 레벨 등 사용할 수 있는 속성, 더하기 및 빼기 기호, 텍스트 들여쓰기 등은 jquery를 사용하여 구현합니다. 두 번째 td에 두 개의 범위가 추가됩니다. 첫 번째 범위는 들여쓰기 문자를 제어하고 두 번째 범위는 +- 기호를 제어합니다. 왜냐하면 페이지 요구 사항은 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()은

128091c9fd09094dc3093bc2a3e792ae

46e2d9c29a69813dbf842d7efd353df9 tdSubject.children().html()은 두 범위의 HTML입니다

tdSubject.text()는

project cost

tdSubject.parent()가 tr

을 얻는 단어입니다. 1. js는 tr에 일부 속성을 추가합니다. 사용자 정의 속성을 사용할 수 있습니까? ?

jquery: $(

"#test"

).attr("test","aaa") // 설정 $(

"# 테스트 "

).removeAttr("test") //

js 제거: var

testEle = document.getElementById( "test ") testEle .setAttribute(

"test"

,"aaa") // 설정 testEle.attributes[

"test"

].nodeValue; 는 selector $("#btnConfirm") of 2.jquery이벤트 바인딩 함수: 바인딩();

표시 함수 표시: show(), hide()

요소의 내부 HTML을 수정합니다. html("hello world");

3 ID가 tableData

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

4.undefine type

var

alert(typeof

)인 테이블의 모든 td를 탐색합니다. 이름 ; ); //출력은 false입니다. alert(name==undefine);//출력은 true입니다.

undefine은 문자열이 아닌 유형입니다. 다섯 가지 유형이 있습니다. 원래 값: Undefine, Null, Boolean, Number, String, 5, 요소 표시, 숨기기

$(this).show() $(this).hide(); .toggle(); 숨기기 및 표시로 자동 전환Display: 전환(true);Hide: 전환(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!