javascript树表,js语法树

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

JS树结构生成与获取到根节点的路径

我们仅仅知道用户点击的那一条数据，所以这条数据必须是唯一的才能构建一颗唯一的树结构，如果后端给不到你唯一的值，一定要让他给你生成一个唯一值id

我采用的string切割插入值

table初始化进来只有一层，并且是固定的

此时生成的是

相关问答

Q1: asp.net中的树形表格怎么实现？麻烦高手指点。

楼主您好，树形菜单要靠JavaScript来实现，所以，您可以从网上找来JavaScript版的或者jquery版的树形菜单然后放到您的aspx页面里面

Q2: JavaScript 文件目录树

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

meta name="author" content="心梦缘ocean ocl" /

titleMy tree demo/title

style type="text/css"

/*主页面样式*/

.leftNav {

width: 20%;

height:500px;

border:#B9E0F7 1px solid;

margin-left: 1%;

margin-right: 1%;

}

#footer {

color:#808080;

line-height: 1.6em;

padding: 0 0 1em 0;

}

/*我的树样式表*/

.treeDiv {

color: #636363;

font-size: 14px;

font-weight: normal;

background-color: #fff;

color: black;

overflow: auto;

padding: 0 0 1em 0;

overflow-x: hidden;

}

.treeNode {

white-space: nowrap;

text-indent: -14px;

margin: 6px 2px 5px 14px;

}

a.treeUnselected:hover, a.treeSelected:hover {

background-color: #BFD9ED;

text-decoration: none;

}

a.treeUnselected, a.treeSelected {

color: black;

padding: 1px 3px 1px 0;

text-decoration: none;

}

a.treeSelected {

background-color: #B9E0F7;

}

a.treeUnselected {

background-color: transparent;

}

.treeSubnodes {

display: block;

}

.treeSubnodesHidden {

display: none;

}

.treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {

height: 15px;

margin-left: 5px;

margin-right: 0px;

width: 15px;

}

.treeNode img.treeLinkImage {

cursor: pointer;

}

div.treeNode a, div.treeNode span.apiRoot {

display: inline-block;

margin-left: 24px;

text-indent: 0;

white-space: normal;

width: 95%;

word-wrap: break-word;

}

div.treeNode span.category {

cursor: pointer;

}

/style

/head

body

div class="leftNav"

div id="samplesToc"

div id="tree" style="top: 35px; left: 0px;" class="treeDiv"

div id="treeRoot" onselectstart="return false" ondragstart="return false"

div class="treeNode"

img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage"

span onclick="expandCollapse(this.parentNode)" class="category"目录节点一 /span

div class="treeSubnodesHidden"

div class="treeNode"

img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage"

span onclick="expandCollapse(this.parentNode)" class="category"目录节点一子目录 /span

div class="treeSubnodesHidden"

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"二级叶子结点一/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"二级叶子结点二/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点一/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点二/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点三/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点四/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点五/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点六/a

/div

!--end block--

div class="treeNode"

img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage"

span onclick="expandCollapse(this.parentNode)" class="category"目录节点二/span

div class="treeSubnodesHidden"

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点一/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点二/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点三/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点四/a

/div

div class="treeNode"

a href="#" class="treeUnselected" onclick="clickAnchor(this)"叶子结点五/a

/div

!--end block--

/div

/div !-- end samplesToc --

/div !-- end leftNav --

div class="right content"

/div!-- end main content--

div id="footer" align="center"

/div!-- end footer--

script type="text/javascript"

var treeSelected = null;//选中的树节点

var imgPlus = new Image();

imgPlus.src="../graphics/treenodeplus.gif";

var imgMinus = new Image();

imgMinus.src="../graphics/treenodeminus.gif";

//父节点展开事件

function expandCollapse(el)

{

//如果父节点有字节点（class 属性为treeSubnodesHidden），展开所有子节点

if (el.className!= "treeNode"){

return; //判断父节点是否为一个树节点，如果树节点不能展开，请检查是否节点的class属性是否为treeNode

}

var child;

var imgEl;//图片子节点，在树展开时更换图片

for(var i=0; i el.childNodes.length; i++)

{

child = el.childNodes[i];

if (child.src)

{

imgEl = child;

}

else if (child.className == "treeSubnodesHidden")

{

child.className = "treeSubnodes";//原来若隐藏，则展开

imgEl.src = imgMinus.src;//更换图片

break;

}

else if (child.className == "treeSubnodes")

{

child.className = "treeSubnodesHidden";//原来若展开，则隐藏

imgEl.src = imgPlus.src;//更换图片

break;

}

//子节点点击事件，设置选中节点的样式

function clickAnchor(el)

{

selectNode(el.parentNode);

el.blur();

}

function selectNode(el)

{

if (treeSelected != null)

{

setSubNodeClass(treeSelected, 'A', 'treeUnselected');

}

setSubNodeClass(el, 'A', 'treeSelected');

treeSelected = el;

}

function setSubNodeClass(el, nodeName, className)

{

var child;

for (var i=0; i el.childNodes.length; i++)

{

child = el.childNodes[i];

if (child.nodeName == nodeName)

{

child.className = className;

break;

}

/script

/body

/html

运行效果：

Q3: javascript实现动态加载树形菜单(tree),

页面既然得到从服务器传过来的json数据之后，还要转换为Object

比如，服务器组装好的json数据：

{

id:'001',

nodeMsg:'节点1'

}

这个是ajax成功之后的回调

function(xhr){

var o = eval('(' + xhr.responseText + ')');

alert(o.id + ':' + o.nodeMsg);

}

Q4: 求大神指点js生成树结构

// 生成树结构

function tree(list) {

const result = [];

for (let value of list) {

// 排除空字符串的情况

if (!value) {

continue;

}

const values = value.split('/');

// 查找树结构的当前级别是否已经存在，不存在则创建对象，并添加入列表。

let current = result.find(item = item.name === values[0]);

if (current === void 0) {

current = {};

result.push(current);

}

for (let i = 0, length = values.length; i length; i++) {

current.name = values[i];

if (i length - 1) {

// 如果还有下一级内容，判断当前是否有 children，没有则构建.

if (current.children === void 0) {

current.children = [];

}

// 查找下一级对象，为下一遍遍历构建对象

let nextCurrent = current.children.find(item = item.name === values[i + 1]);

if (nextCurrent === void 0) {

nextCurrent = {};

current.children.push(nextCurrent);

}

current = nextCurrent;

}

return result;

}

============ 假装分割线 ===========

以上代码是生成树的函数，调用 tree 函数并传入你的 input 数据，返回值就是生成的树。百科没找到传代码的地方了。

Q5: JS树结构数据的遍历

title: JS树结构数据的遍历

date: 2022-04-14

description: 针对项目中出现树形结构数据的时候，我们怎样去操作他

项目中我们会经常出现对树形结构的遍历、查找和转换的场景，比如说DOM树、族谱、社会机构、组织架构、权限、菜单、省市区、路由、标签等等。那针对这些场景和数据，我们又如何去遍历和操作，有什么方式或者技巧可以简化我们的实现思路。下面我们将针对常规出现的场景去总结一下我们的遍历方式

树的特点

1、每个节点都只有有限个子节点或无子节点；

2、没有父节点的节点称为根节点；

3、每一个非根节点有且只有一个父节点；

4、除了根节点外，每个子节点可以分为多个不相交的子树；

5、树里面没有环路

下面的图片表示一颗树

在下面的JS中我们由多棵树组成我们的数据

在这数据中我们如何评判数据是否为叶节点（也就是最后一级），我们每个节点都会存在children属性，如果不存在children属性或者children不是一个数组或者children为数组且长度为0我们则认为他是一个叶节点

我们针对树结构的操作离不开遍历，遍历的话又分为广度优先遍历、深度优先遍历。其中深度优先遍历可以通过递归和循环的方式实现，而广度优先遍历的话是非递归的

从上往下对每一层依次访问，在每一层中，从左往右（也可以从右往左）访问结点，访问完一层就进入下一层，直到没有结点可以访问为止。即访问树结构的第n+1层前必须先访问完第n层。

简单的说，BFS是从根节点开始，沿着树的宽度遍历树的节点。如果所有节点均被访问，则算法中止。

所以我们的实现思路是，维护一个队列，队列的初始值为树结构根节点组成的列表，重复执行以下步骤直到队列为空：

取出队列中的第一个元素，进行访问相关操作，然后将其后代元素（如果有）全部追加到队列最后。

深度优先搜索算法（英语：Depth-First-Search，DFS）是一种用于遍历或搜索树或图的算法。这个算法会尽可能深的搜索树的分支。当节点v的所在边都己被探寻过，搜索将回溯到发现节点v的那条边的起始节点。这一过程一直进行到已发现从源节点可达的所有节点为止。如果还存在未被发现的节点，则选择其中一个作为源节点并重复以上过程，整个进程反复进行直到所有节点都被访问为止

1、先序遍历

访问子树的时候，先访问根再访问根的子树

2、后序遍历

访问子树的时候，先访问子树再访问根

1、先序遍历

先序遍历与广度优先循环实现类似，要维护一个队列，不同的是子节点不追加到队列最后，而是加到队列最前面

2、后序遍历

后序遍历就略微复杂一点，我们需要不断将子树扩展到根节点前面去，执行列表遍历，并且通过一个临时对象维护一个id列表，当遍历到某个节点如果它没有子节点或者它本身已经存在于我们的临时id列表，则执行访问操作，否则继续扩展子节点到当前节点前面

对于树结构的遍历操作，其实递归是最基础，也是最容易理解的。递归本身就是循环的思想，所以可以用循环来改写递归,以上的方式在项目中已经廊括了大部分的场景了，我们在日常开发中可以根据场景或者需要去选择我们的遍历方式，或者基于此对他进行调整和优化，至于每种方式的空间复杂度和时间复杂度我们在这个地方就不去尝试了，各位感兴趣可以自己去验证。

广度优先搜索

树的遍历

深度优先搜索

图文详解两种算法：深度优先遍历（DFS）和广度优先遍历（BFS）

二叉树遍历（前序，后序，中序，层次）递归与迭代实现JavaScript

JS树结构操作:查找、遍历、筛选、树和列表相互转换