52 - 尚硅谷-RBAC权限实战-许可维护 - 改变节点数据的图标.avi原创

许可信息我们已经查询出来了，并且我们构建了塑形结构，那么我们采用了不同的一种方式啊，有嵌套服务循环，有map，有递归，还有最普通的方式啊，不管用哪种方式，其实我们的结果都是对的啊，那既然我们的数据查询都没问题了，那我现在啊，准备增加我们的许可数据，修改还有删除，把这些节点数据呢，动态进行操作啊。那我们如何操作呢？难道我们像之前那个用户维户一样也要增加按钮吗？不是啊，不是，那我们这里呢也是增加按钮，但不像我们的用户维护一样增加一个大的按钮，不是那么做的，那我们这里该如何处理呢？其实大家看我们静态页面当中，其实已经给大家准备好了，我鼠标放上去，你会发现在每个节点的后面其实就有按钮。

啊，有按钮，当我鼠标一离开呢，它又没有了，那也就意味着我可以呢，在某个节点的下面来增加它的按钮，并且修改或者删除，这都是可以的。那这个我们该如何才能够做到呢？我们一起来看一看啊，我们就看它的页面，我们打开啊源代码，源代码当中大家可以看到我们这里它会有一个setting啊，这个setting的内容是非常多的，因为这个settinging里面提供了一些我们的事件啊和方法，它这些方法可以增加我们的页面元素的操作啊，所以我们原封不动的把它塞里面的内容我们拿过来，这里面会有个view啊，咱们原封不动给它拷贝吧，嗯，拷贝完成以后，先把效果展现出来，咱们再来看其他的，所以在我们的这个位置呀，在我们这里，我把那个settinging给它补充一下，来写个逗号，诶，往这边好。

写完了以后，那接下来我们现在就来看一看效果啊，看一看效果是什么样子的，刷新，刷新以后鼠标放上去，诶，你会发现没有问题，我们这儿也会出现一些按钮，那它怎么实现的呢？我们一拷贝过来它就能用了，我们就来分析一下啊来，首先我们来看一看我们这有个view，它表述的就是当前我们的树形结构的展现方式是什么样子的，它的视图嘛，嗯，然后这里呢，有一个叫selected market，表示的是多选的意思，给个force就是不支持多选，还有一个叫增加DIY do，就是我们自己来控制我们的元素啊，那它里面在做什么呢？我们简单的分析一下，首先它里面会有一个回调方法，里面传着两个参数，这两个参数去ID和去node，它们分别表示什么含义呢？我们一块。

来看一看我们的说明文档。我们的说明文档呢，在我们的这个位置，我们可以打开，打开以后来点击，点击以后我们这是J的API文档，那么我们把刚才的代码呢，我们搜索一下，叫做它拷贝，拷贝之后我们来咱们找一下。好，那其中我们就看一看吧，点点完以后，它表述的是在节点上固定显示用户自定义的空间，其实就自己动手做一些事情，那它有两个参数，第一个叫tree ID，它对应了我们j tree的ID，便于用户的操控，还有第二个叫去no的，它表述的是自定义控件的节点接省数据，也就意味着我们当前节点的数据它是可以拿到的啊好，那咱们现在看到两个参数的含义了，一个是我们去的ID，一个是我们当前节点的阶层数据，那好，咱们往下来看。

下面这个位置呢，它里面是一个j corry的ID选择器，只不过这个ID呢，它是拼接出来的，那么这里有个叫去no的点TID，那这个TD是什么呢？我们一块儿再来看一看啊，来我们文档当中我们可以去看一看，有个叫ch no的啊，在我们这个位置它就有一个TID啊，我们来找一下，在这个位置叫TID点，点完之后他说了去no的节点的唯一标识ID初始化节点数据时由J增加此属性，请勿提前赋值，那么也就意味着我们当前的这个属性不是我们来控制的，它是由塑形组件来控制的，它的格式呢，是我们的去ID加个下划线，加个内部的计数器啊，有这么一个操作，那好，我们现在就看看它到底是怎么回事，所以把咱们这个打开，我点击它点点完。

之后检查你会发现在我们这边都会有ID，这个ID有个叫permission tree，这个permission tree呢，是我们容器的ID来容纳我们的塑形结构，然后每个节点的后面，它会有个下划线来增加一个计数器，表述的是第几个节点，比方说它就是第一个，那我们控制面板呢，点击检查你会发现它就是第二个，那么权限管理呢，点击检查它就是第三个啊，所以123有个顺序号在里面啊，那么我们这里拿到的TD就是那个下划线三啊，就是那个什么permi tree_三把那个拿到了，拿到了以后下划线ICO是哪里呢？咱们看一看。其实啊，咱们这个小图标文件夹的这个图标，你会发现它就是我们下划线ICO，所以啊，我们当前这句话其实就等同于把那个图标的元素取到了，那么取到了以后，它这里呢，就问你了，你的那个贴身里面啊，有没有这个icon的属性。

那我们现在是没有的啊，因为最起码我们后台的程序当中，这个杰森呢，没有那个属性，那没有的话他就走不进去了，那如果他要有呢，那也就意味着呀，如果在我们这里它要有呢，他如果有的话，咱们看一看啊，比方说我们写上咱们叫做string啊，咱们叫icon。好了，如果你有不为空，那我们现在就可以呢，走我们的逻辑了啊，所以把它增加上OK啊，然后你这有的话，那如果数据库里面我们也对应的添加一个字段叫做它的图标啊嗯，好，点击确定，那这样的话，如果我们添加对应的图标，那么我们的菜单的图标其实就会发生变化，为什么呢？我们一块儿来看一看来。

一旦他点击是吧之后，那么我们说他这边的图标是有了的，有了的话图标对象remove class，他把它样式删掉了，这个样式就是它默认的样式，然后他在增加样式，这个我们暂时不要，那就等同于他把你数据库当中的那个图标给它放过来了，放过来以后又设定了它的背景是空的。所以你可以简单的理解为他是把数据库当中的样式给它增加到我当前的结构当中啊，那这个数据库当中的样式我们应该怎么来写，怎么来用呢？首先我们当前的页面，我们采用的是bootstrap框架当中的。

图标，那所以我们可以参考一下文档，咱们打开。打开之后我们这里呢，就会有对应的图标，那所以比方说我现在就准备给大家把这个咱们拷贝，拷贝过来之后，那我现在就把它放到数据库里面，我就给它改一个，我改一个之后我点击刷新，那我现在看一看我的数据，咱们得重启一下。把服务器给它重新启动一下，因为我添加了我们的一些属性啊，好重启。重启之后啊，我们来看一看我们的这个图标有没有发生变化啊。好，然后呢，我们刷新。刷新之后大家观察一下，你会发现是不是图标发生了变化，诶只有它一个变了，为什么只有它一个有值呀，别的没有值它就没有变化啊，所以我们的这个方法可以改变我们菜单的图标。