day05【后台】菜单维护/10-尚硅谷-尚筹网-菜单维护-页面显示树形结构-前端-显示图标-分析思路

好嘞，哎，我们有了它以后呢，下一步哈，我们看一下这个文档里边，它关于这个图节点图标这方面哈。呃，这个肯定咱们就没办法带着大家一个一个去看了哈，只能是说我根据我以前看的结果，现在告诉大家我们现在看的。呃，那么实际说你如果开发的时候需要学一个新的技术，需要看这个文档啊去学，其实不太可能说特别精准的，你一下子能够找到一个地方。你只能说先看哪个比较像，跟你这需求比较像，然后呢，再去点开，再去看，详细去去仔细看一看，然后你再去琢磨琢磨这是不是你要的，如果不是的话，再另外再去找啊。嗯。我们现在要去看的呢，是这个在settings里边呢，有一个view，哎，视图啊，它显示效果。然后呢，这里边儿呢，有一个爱的DIY do。

添加我们自定义的倒元素啊第位。DIY是哪几个单词大家知道吗？都。Do it yourself。对吧，呃，其实挺简单的一个单词，VIP是啥。Very important pig。非常重要的猪啊。呃，这个。添加自定义的DOM，大家注意啊，它得给它一个函数啊，这是一个函数，哎，函数，你看它下边有例子吗？哎，DIY do这边这是那个函数。哎，这是那个函数。这个函数呢，需要传两个参数，这个参数一个是TRYD，一个是吹node tryd是谁呢？对应Z的traded，便于用户操控，他这个说的我们很费解哈，不知道他这什么意思。

吹no的，这是需要显示自定义控件的节点接数据对象，这个我们看着也很费解，所以说呢，其实不如呢，我们实际上咱们就来写一下，把这个纸打印出来，实打实的把它打印出来啊，然后去看一下这个效果。呃，需要在setting里边呢，去设置一下。啊，这样我们把这个版本呢，也保存一下啊。哎，这个就是我们三的bak。三。哎，然后这回呢，咱们可以做一些修改，嗯。那我们这儿又需要有函数了，这个函数呢，将来后边还会有好几个函数啊，这几个函数呢，我们为了大家方便去。呃，咱们还是抽取到这个外边的JS文件里边哈。来一个my menu。

Javascript。Javascript fair啊是这个。嗯，这里边先声明一个函数叫做MYDIY。买I的吧，它叫I的DIY do，这是咱们的爱的DIY do，然后在这儿呢，咱们呢，一个一个是TRYD，他说一个是吹node。然后呢，咱们就在控制台呀，咱们去打印一下啊这个。嗯。这是诺的，然后呢，我们这个函数要想用。就得在这儿呢，我们去做一个引入。诶，引入我们自己的这个外部的JS文件。

这个叫做C下边的这个menu点介。好引入进来以后呢，这里边儿哈，我们去给它设置一下。他说这个属性呢，是这样的。是从这个setting下边先写个，然后呢，At DIY do。为U啊，这里边儿呢，数学名叫I的DIY do，然后呢，这个给它赋值是我们这个函数的引用。呃，有了这个以后哈，咱们跑一下。不是这个。咱们为了节约一点这个空间呢，咱们就回到都回到Chrome这来来来来来来做。F12。我们打开看一下啊。这打印了很多很多，哎，这个打印很多呢，是因为每一个节点，每一个节点啊，它生成这个节点的时候，它都要来调用一下这个函数啊，它都要来调一下这个函数。

呃，所以说呢，每个都打印了，那我们其实就看一个就行了啊，这个TRYD你看它等于DEMO。是谁呢？CTRLC，你看啊，非CTRLF。就是他，也就是我们这个ul。就是整个数形结构附着的这个静态节点的ID啊，所以出ID就是就是这个值。垂ID啊，是整个树形结构。附着的ul。标签的ID啊，是他。吹的是谁呢？我们往中间一点放一放啊。

Object这里边你看有children。哎，这里边儿有I孔。这里边儿有ID，嗯，这里边儿呢，有这个name是控制面板PID啊。也就是说呢，这其实就是我们当前的节点，每一个吹no啊，就是一个节点，每一个吹not是一个节点，你看这个呢，是用户维护。你看这个呢，它是角色维护。诶，你看这个呢，它是这个项目标签等等啊，所以说这个每一个trade not就是当前当前我们正在生成的这个节点啊，全部的数据都在吹node里边。当前啊，这个我们树形节点的全部的数据。都在这里边，这个全部的数据包括什么呢？包括我们从后端。查询得到的menu对象的全部属性。

Menu对象的属性。只要在man对象里边有，在这里边就都能够去得到啊，用它去点那个属性名就可以去得到那个对应的值。哎，这样的话我们就知道啊，这两个东西呢，他们对应的具体是一个什么样的，呃，数据啊，它这个传的是什么。呃，下边呢，我们说啊。它里边具体他要怎么做呢。他这做法呢，就我就不不是说我们这儿就不能够照搬了哈，这个时候就得我们自己去看一下啊，我们自己看一下我们需要的是什么。嗯。看一下这个，我们现在的这个，看一下这个图标，在图标上点右键检查。这个图标是怎么控制的呢？这有一个SPASPA，它的ID呢，是垂下划线五_ICO。

诶，然后呢，这里边儿有一个class。叫做button do do呢就是document document，你看这个图标呢，这不就是一个文档的图标吗？你要是这个黄色的这个呢。这个呢是一个open，这是一个打开的目录的一个样子。哎，然后把它收起来的话。收起来的话，你看这是close，这是一个关闭的目录，诶所以说呢，这个图标呢，就是由这个span来进行控制的。我们把这个span呢给它拿出来，CTRLC。咱们研究研究这个SPA啊。呃。首先来说这个span，它有一个ID，然后呢，它的样式呢，其实是由这个class来控制的。哎，是由这个class来控制的。这个style呢，其实是这个东西不用管它啊，这个它会。

嗯。这是它的一个背景啊，这是背景，这不是这个还不是这个图标啊，这这个只是一个背景，所以style这个不用管它。那么我们接下来这事就好办了，通过它的ID呢？找到对应的SPA。然后呢，把他的class换成我们的class，你比如说我们的class呢。比如说是来一个这个哈。呃，复制一下。然后我们到这个页面上哈。把这儿改一下哈。CTRLV。呃，怎么让它这个生效呢。没改了哈，我想想啊。呃，那就是改这边哈。哎，人家有办法是在这儿改一下啊。

Delete edit。嗯。嗯，能够，这能改，那怎么让它生效呢。嗯，不是保存。嗯。点别地啊，它这个就保存下来了，保存下来以后你看这儿。这个就变成这个锁子了是吧，就这个lock这个图标，哎，也就是说这个我们在这是改完以后就发现哈，只要把它的class值一换，换成我们的。就这图标就改过来了。所以说下边这事呢，我们就知道我们要怎么干了。大方向啊，大方向就就是这样的，先根据。根据。呃，首先来说哈，它控制图标呢，是有一个span来控制的。根据控制图标的。

Span标签的ID，找到这个，嗯，Span标签。诶，第二步呢是删除。删除旧的这个class。哎，添加新的class。把这个搞定啊，把这把这三步做了，这图标就就能够。改过来了，那下一步下边就是看这三步具体的这个怎么去怎么怎么去做。