TP5无限级分类的实现思路与实践

一，数据库设计

CREATE TABLE `user_area` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL COMMENT '区域代理名称',
  `pid` int(11) DEFAULT NULL COMMENT '父级代理ID',
  PRIMARY KEY (`id`) USING BTREE,
  UNIQUE KEY `name` (`name`) USING BTREE
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=utf8 COMMENT='区域代理表';

INSERT INTO `user_area` VALUES ('1', '广东省', '0', null, null, '2019-07-04 18:48:46');
INSERT INTO `user_area` VALUES ('2', '广州市', '1', null, null, null);
INSERT INTO `user_area` VALUES ('3', '海珠区', '2', null, null, null);
INSERT INTO `user_area` VALUES ('4', '新港东路', '3', null, null, null);
INSERT INTO `user_area` VALUES ('5', '东莞市', '1', null, null, null);
INSERT INTO `user_area` VALUES ('6', '莞城', '5', null, null, null);
INSERT INTO `user_area` VALUES ('7', '惠州市', '1', null, null, null);
INSERT INTO `user_area` VALUES ('8', '惠城', '7', null, null, null);
INSERT INTO `user_area` VALUES ('9', '浙江省', '0', null, '2019-07-04 17:21:38', null);

二，控制器代码

<?php

namespace app\admin\controller;



use app\admin\model\UserArea as UserAreaModel;
use think\Request;

class UserArea extends BaseController
{

    public function edit($id)
    {
        $UserArea=UserAreaModel::get($id);
        $data=UserAreaModel::all();
        $info=UserAreaModel::tree($data);
        $this->assign('UserArea',$UserArea);
        $this->assign('info',$info);
        return $this->fetch('/admin/userarea/edit');
    }
}

三，Model层代码

    /*
     * @param    $data   表的全部数据
     * @param    $level  用于前端显示
     * @return   $arr    返回排序后的结果  
     * */
    public static function tree($data=array(),$pid=0,$level=0)
    {
        static $arr=array();
        foreach ($data as $key=>$val)
        {
            if($val['pid']==$pid){
                $val['level']=$level;
                $arr[]=$val;
                self::tree($data,$val['id'],$level+1);
            }
        }
        return $arr;
    }

四，前端页面显示

   str_repeat()函数，str_repeat() 函数把字符串重复指定的次数，语法格式: str_repeat(string,repeat);

核心代码:

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">区域名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" placeholder="如:地理名称广东" autocomplete="off" class="layui-input" value="{$UserArea.name}">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">上级区域</label>
                <div class="layui-input-block">
                    <select name="pid" lay-verify="required" >
                        <option value="0">顶级区域</option>
                        {foreach $info as $key=>$val}
                        <option value="{$val.id}" {if $UserArea.pid==$val.id} selected {/if}><?php echo str_repeat('&nbsp;&nbsp;┗━━',$val['level']); ?>{$val.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-back-submit" value="确认">
                <input type="hidden" name="id" value="{$UserArea.id}">
            </div>
        </form>
    </div>
</div>

 

五，递归删除函数(根据当前的类寻找子类的id)

获取子类id函数思路:参数1: 总的数组进去; 参数2:当前ID;

    //获取某个分类的当前分类及所有子分类id
    //递归删除
   public static  function getSonIds($data,$id=0,$level=1){
        $subs[]=$id;
        foreach($data as $item){
            if($item['pid']==$id){
                $item['level']=$level;
                $subs[]=$item['id'];
                $subs=array_merge($subs,self::getSonIds($data,$item['id'],$level+1));
            }
        }
        return $subs;
    }

 

六，layui.tree.js组件的使用 

tree.js文档  https://whvse.gitee.io/treetable-lay/index.html 

这个组件要求返回的数据格式:

{
  "code": 0,
  "msg": "ok",
  "data": [
    {
      "id": 1,
      "name": "xx",
      "sex": "male",
      "pid": -1
    },
    {
      "id": 2,
      "name": "xx",
      "sex": "male",
      "pid": 1
    },
    {
      "id": 3,
      "name": "xx",
      "sex": "male",
      "pid": 1
    },
    {
      "id": 4,
      "name": "xx",
      "sex": "male",
      "pid": 1
    },
    {
      "id": 5,
      "name": "xx",
      "sex": "male",
      "pid": -1
    },
    {
      "id": 6,
      "name": "xx",
      "sex": "male",
      "pid": 5
    },
    {
      "id": 7,
      "name": "xx",
      "sex": "male",
      "pid": 5
    },
    {
      "id": 8,
      "name": "xx",
      "sex": "male",
      "pid": 6
    },
    {
      "id": 9,
      "name": "xx",
      "sex": "male",
      "pid": 6
    },
    {
      "id": 10,
      "name": "xx",
      "sex": "male",
      "pid": 9
    },
    {
      "id": 11,
      "name": "xx",
      "sex": "male",
      "pid": 9
    }
  ],
  "count": 11
}

由于我们的数据库没有pid=-1的值，这时只需改一下前端的配置部分。小编在这个地方踩坑了

 

最终效果: