45 - 尚硅谷-RBAC权限实战-许可维护 - zTree最简单的一颗树.avi原创

嗯，J组件啊，是我们说要可以来做我们的塑形组件功能，来实现我们的许可维护，可是这个组件，这个插件我们如何来使用呢？首先我们事先已经给大家准备好了这个插件的压缩包，给它解压缩，解压缩以后，然后呢，我们里面会有比较详细的一些文档，DEMO它都有啊，然后DEMO呢，有中文的，有英文的，我们打开，打开之后我们双击。呃，双击之后，那么这里面就有一个最简单的一棵树，它采用的是接的方式把树形结构展现出来，所以啊，我们只要把J脆啊，它的一些嗯，准备工作准备好了，那这个塑形结构应该就没有问题了，那好，我们回过头来看这边。他说啊，我们因为组件在页面中有特定的展示效果和样式，所以需要将组件的样式文件和脚本文件引入到页面当中，那么也就意味着它会有样式，会有我们脚本文件，并且呢，J呢，组件是基于j query框架开发的，所以使用前必须引入这块库，那好，我们现在呢，按照他的要求，我们来做一下模仿他的DEMO，把这最简单的一棵树给它展现出来啊好，那么我们来看一看，首先在我们这里呢，我们增加一个控制器叫permission，因为跟许可相关嘛，所以new，我们创建class叫permission controller，好，然后我们点击完成以后增加控制器我们的注解，还有接下来我们在下面我们写上啊，咱们叫request mapping，然后写个斜杠，我们叫promi，那这个位置呢，我们就写上，我们叫public string，我要。

跳转页面啊，跳转到我们的首页上去，然后斜杠index啊好，我们写上叫permission啊，我们写杠index，好写完之后在我们页面当中，我们点击new创建文件夹叫mission，然后里面我们添加new创建我们的index.dsp好，呃，我想想这样吧，我们把这个咱们原封不动，咱们拷贝过来得了，嗯。

呃，拷贝过来以后，把一些我们必要的东西给它改一改啊，首先我们这里就不是表格了，所以我们也不需要这些分页查询的相关内容了啊，这些我们就都不要了，把那个我们的form呢给它去掉，好呃，去掉以后多了个它，诶这个不要了啊好，那么不要了之后保存我们再往下，那么下面这些东西呢，我们也都不要了啊，把这个全去掉，然后呢，把这些我们全都给它去掉就可以了啊好，现在保留一个最简单的一个页面啊行，接下来按照他的要求，他说了我们需要引入样式，并且要增加脚本文件，那么我们的样式和脚本文件在我文这里其实是都有的，那好，我们接下来就准备增加一下第一个把它的样式我们加上，嗯嗯，它这里呢，是我们的z tree，那么我们就直接来了啊，咱们叫z tree好，然后那么z tree的话。

把他的这个样式给他拿过来拷贝，拷贝过来放到这里就可以啊，接下来我们要引入他的脚本文件，那么这里直接拷贝，因为它是基于j query的，所以我们要把他的j query的文件给它放在前面，把它的文件放在后面啊，所以拷贝，嗯。好，我们叫做J吹啊，好，把这个我们放到这就可以啊，行，这个做完了以后，准备工作有了，现在我们看一看它的那个DEMO，它是怎么出来的，最简单的一个数它怎么实现的，来点击右键查看框架的源代码打开，打开以后咱们往下来看，首先它的样式，它的脚本文件我们这里就都有了，咱们接着往下，呃，下面这个地方呀，大家看这边它首先会有一个，我们声明了变量是一个阶层的对象，但是里面没有任何的属性，先不管它，然后下面呢，是一个g no的表述的是一个集合，因为它用的是中括号，是个集合，咱们也先不管它，咱们往下看。

呃，这个是什么意思呢？它表述的是页面内容加载完成以后，我们该如何来做，那么页面内容加载完成，那就得下面的内容呢，就基本上都得解析完毕才可以，那我们会发现里面其实是大量的一些文字，但是其中有一个地方我们需要知道，就是这叫ul，叫做无序列表，那么也就意味着我们当前的塑形结构其实就是依托于它来完成的，因为我们讲过所谓的塑形结构其实就是U标签里面嵌套ul嘛，所以这就是那个ul啊，那么它就是塑形结构的容器，来容纳我们的树形结构数据啊，所以啊，我们这个里面最重要的就是它了，好，那么页面内容加载完成以后，我们要用的就是它，这个是我们插件所提供的一个方法，叫in内叫初始化，然后它要传三个参数，第一个参数就是那个。

容器的ID选择器，通过ID选择器把ul取到，还有setting，这个setting啊，是个空的啊，什么都没有，而第三个是一个gno的，其实就是我们的这个节点数据，也是我们集合数据，只要我们把数据给它准备好，咱们的塑形结构就出来了啊好，那我们现在呢，模仿它来试一试，我们别的不管，我先把它加上拷贝，拷贝之后在我页面内容加载完成的时候，我要有一个我们ul，不过这个ID我改一改，叫promi tree，好了，写完了之后，那我希望页面内容加载完成以后给它粗始发一下，所以我原封不动把它拷贝过来，嗯，拷贝过来以后这个肯定是不对的，咱们叫promition tree，好，那这个setting我们说了，它其实就是一个我们的Jason对象。

再听啊，好，等于大括号就可以了，而这个g node你可不能随便写，因为它数据是有格式要求的，首先它一定要是个集合，那么集合里面是一个一个的结省对象，而且它有特定的属性在里面，咱们先不管它，咱们后面再解释，我们先把这个集合给他拿过来，原封不动参考一下啊，拷贝拷贝以后我拿到这个位置，如果没问题的话，那么我们的塑形结构就应该能够出来，来我们验证一下，嗯，把这个我们启动。

好了，启动完了，启动完了以后，接下来我们要看的其实就是看看我们页面到底对还是不对，所以打开以后把这个地方改一改，叫permission，然后斜杠我们叫index回车，回车以后大家可以看到现在我们的塑形结构已经出来了，跟我们DEMO当中是一模一样，说明我们的例子没有问题啊。