Jquery 트리 구조 구현 코드에 대한 자세한 설명-JS 튜토리얼-php.cn

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

伊谢尔伦

풀어 주다： 2017-06-17 10:45:04

원래의

2684명이 탐색했습니다.

작업 요구로 인해 테이블의 특정 열에 트리의 구조와 효과를 구현해야 했습니다. 처음 사용하는 것이어서 어려웠습니다. 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()은

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 ，就是在这个结束标记里面附加字符串，不是在外面

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!