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,'').replace(/ /g,'').replace('[+]','').replace('[-]','')" > <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() is
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, notThere 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 displayDisplay: 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='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>").appendTo("#p1");});
$("#button1").click(function(){$("#p1").append("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><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) //这个函数用了很多次了，没有真正理解其中的意思，现在了解了
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement dual WeChat login on Huawei mobile phones?
Mar 24, 2024 am 11:27 AM
How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously
GE universal remote codes program on any device
Mar 02, 2024 pm 01:58 PM
If you need to program any device remotely, this article will help you. We will share the top GE universal remote codes for programming any device. What is a GE remote control? GEUniversalRemote is a remote control that can be used to control multiple devices such as smart TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, streaming media players and more. GEUniversal remote controls come in various models with different features and functions. GEUniversalRemote can control up to four devices. Top Universal Remote Codes to Program on Any Device GE remotes come with a set of codes that allow them to work with different devices. you may
PHP Programming Guide: Methods to Implement Fibonacci Sequence
Mar 20, 2024 pm 04:54 PM
The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence
How to use Copilot to generate code
Mar 23, 2024 am 10:41 AM
As a programmer, I get excited about tools that simplify the coding experience. With the help of artificial intelligence tools, we can generate demo code and make necessary modifications as per the requirement. The newly introduced Copilot tool in Visual Studio Code allows us to create AI-generated code with natural language chat interactions. By explaining functionality, we can better understand the meaning of existing code. How to use Copilot to generate code? To get started, we first need to get the latest PowerPlatformTools extension. To achieve this, you need to go to the extension page, search for "PowerPlatformTool" and click the Install button
How to implement the WeChat clone function on Huawei mobile phones
Mar 24, 2024 pm 06:03 PM
How to implement the WeChat clone function on Huawei mobile phones With the popularity of social software and people's increasing emphasis on privacy and security, the WeChat clone function has gradually become the focus of people's attention. The WeChat clone function can help users log in to multiple WeChat accounts on the same mobile phone at the same time, making it easier to manage and use. It is not difficult to implement the WeChat clone function on Huawei mobile phones. You only need to follow the following steps. Step 1: Make sure that the mobile phone system version and WeChat version meet the requirements. First, make sure that your Huawei mobile phone system version has been updated to the latest version, as well as the WeChat App.
Master how Golang enables game development possibilities
Mar 16, 2024 pm 12:57 PM
In today's software development field, Golang (Go language), as an efficient, concise and highly concurrency programming language, is increasingly favored by developers. Its rich standard library and efficient concurrency features make it a high-profile choice in the field of game development. This article will explore how to use Golang for game development and demonstrate its powerful possibilities through specific code examples. 1. Golang’s advantages in game development. As a statically typed language, Golang is used in building large-scale game systems.
PHP Game Requirements Implementation Guide
Mar 11, 2024 am 08:45 AM
PHP Game Requirements Implementation Guide With the popularity and development of the Internet, the web game market is becoming more and more popular. Many developers hope to use the PHP language to develop their own web games, and implementing game requirements is a key step. This article will introduce how to use PHP language to implement common game requirements and provide specific code examples. 1. Create game characters In web games, game characters are a very important element. We need to define the attributes of the game character, such as name, level, experience value, etc., and provide methods to operate these
Create and run Linux ".a" files
Mar 20, 2024 pm 04:46 PM
Working with files in the Linux operating system requires the use of various commands and techniques that enable developers to efficiently create and execute files, code, programs, scripts, and other things. In the Linux environment, files with the extension ".a" have great importance as static libraries. These libraries play an important role in software development, allowing developers to efficiently manage and share common functionality across multiple programs. For effective software development in a Linux environment, it is crucial to understand how to create and run ".a" files. This article will introduce how to comprehensively install and configure the Linux ".a" file. Let's explore the definition, purpose, structure, and methods of creating and executing the Linux ".a" file. What is L
