jqueryツリー構造の実装コードの詳細説明-jsチュートリアル-php.cn

jqueryツリー構造の実装コードの詳細説明

伊谢尔伦

リリース： 2017-06-17 10:45:04

オリジナル

2685 人が閲覧しました

作業の都合上、テーブルの特定の列にツリーの構造と効果を実装する必要がありました。初めて使用しましたが、難しかったです。 3 日間かけてプログラムを作成しました

機能要件は次のとおりです:

+ 記号をクリックすると、次のサブノードのみが展開されます。現在のノードのレベルノードは展開されます。2 番目のレベル以下のノードは引き続き非表示になります。

下のすべてのサブノードが非表示になります。

1 2 3 4 をクリックすると展開されます。それに応じて、第 1 レベルのノード、第 3 レベル、そして第 4 レベルのノードに接続されます。

私のアイデアは次のとおりです: 最もオリジナルのスプライスされた HTML を使用し、データソースを取得した後、現在のデータ行のコードと親コード、リーフノードの ID などのカスタム属性を tr に割り当てます。、現在のデータ行のレベルなど。使用できる属性、プラス記号とマイナス記号、テキストのインデントについては、jqueryを使用して実装します。 2 つのスパンが 2 番目の td に追加されます。最初のスパンはインデント文字を制御し、2 番目のスパンは +- 記号を制御します。これは、ページの要件が、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() は 2 つのスパンの HTML です

tdSubject.text(); は単語です

プロジェクトコスト

tdSubject.parent() は tr

を取得します1. js は tr にいくつかの属性を追加しますが、カスタム属性を使用することはできますか? ?

jquery: $(

"#test").attr("test","aaa") // 設定

" # テスト").removeAttr("test") //

jsを削除します: var testEle = document.getElementById( "test" ) テストエレ.setAttribute(

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

"test"] ; // を入手してください 2.jquery

の selector $("#btnconfirm"); イベントバインディング関数:bind();

非表示関数: show(), hide();

要素の内部 HTML を変更します。 html("hello world");

3 ID tableData

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

ログイン後にコピー

4 の未定義の type

var name; 名前);

//出力は未定義です

alert(typeof myname);

//出力は未定義です

alert(name=="unknown" ); //出力は false です

alert(name==unknown);// 出力は true です未定義は文字列ではなく型です

javascript元の値: Unknown、Null、Boolean、Number、String、

5、要素表示、非表示

$(this).show(); $(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 ，就是在这个结束标记里面附加字符串，不是在外面

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 中国語 Web サイトの他の関連記事を参照してください。