在Yii2框架中使用netstedsets与ztree实现无限极分类管理教程

无限极分类

无限极分类的方式很多种，例如可以使用pid为父节点id的方式，只是这样的方式读取的时候使用递归，比较麻烦，且影响性能。

而现在我们要说的是netstedsets来解决无限极分类的问题。

先来看看netstedsets的原理：

如图所示：家用电器分类为1-6，大家电2-3，小家电4-5，电脑手机分类为7-12，台式机8-9，笔记本10-11。

我们在设计数据库的时候，就可以通过left_key,right_key来界定属于某个分类。同样我们可以使用deep来界定分类的等级。

在Yii2中，加载netstedsets包。

我们这里使用:https://packagist.org/packages/creocoder/yii2-nested-sets
通过composer将包加载到我们的项目中。

具体使用过程：

1.在使用前，我们需要准备工作。先创建一个新的类，我们可以放在models中。

创建一个GoodsCategoryQuery类，必须继承ActiveQuery类

然后：

我们需要在商品分类的类里面需要添加新的行为，并且需要重写一下find()方法。

2. 创建商品分类的根节点

让我们首先创建一个根节点，我们的商品分类表有更多的其他字段，我们可以通过如下代码实现创建：

这个时候我们需要添加子节点了，我们需要考虑前端怎么去展示我们的节点。我们可以选择使用前端插件zTree来实现分类的回显。

3. 加载zTree插件

我们可以通过网站下载zTree插件：http://www.treejs.cn/v3/main.php#_zTreeInfo
然后将zTree放在静态文件插件目录下，例如/statics/plugins/ztree
通过demo，我们可以知道zTree需要获取的前端json格式为：

var zNodes =[        {id:1, pId:0, name:"[core] 基本功能 演示", open:true},        {id:101, pId:1, name:"最简单的树 --  标准 JSON 数据", file:"core/standardData"},        {id:102, pId:1, name:"最简单的树 --  简单 JSON 数据", file:"core/simpleData"},        {id:103, pId:1, name:"不显示 连接线", file:"core/noline"},        {id:104, pId:1, name:"不显示 节点 图标", file:"core/noicon"},        {id:105, pId:1, name:"自定义图标 --  icon 属性", file:"core/custom_icon"},        {id:106, pId:1, name:"自定义图标 --  iconSkin 属性", file:"core/custom_iconSkin"},        ] 

那么，我们可以在商品的分类的model里添加一个获取该数据格式的方法：

然后根据demo在前端加载zTree插件。代码太多，可以参照demo文件，这里就不列举代码了。
demo位置:/statics/plugins/zTree/demo/cn/index.html

4.增加子节点

首先在渲染添加界面时，需要传zTree需要的数据。
渲染添加页面：

然后就可以创建子节点了：

我们就可以实现如下效果：