Fastadmin框架学习一（Tree树形结构）

Fastadmin的Tree树形结构

一、该文章的背景说明

在学习Fastadmin的下拉选项中，遇到了多级展示的需求。效果是2级及以上的选项作出标示。如下效果：

二、实战操作

以我在使用的话题Topic相关代码为例。

表数据主要字段：

1.使用Fastadmin框架自带的Tree类： 目录 \extend\fast\Tree.php;

2.控制器层 Topic.php 中，增加以下代码：

// 引入Tree类use fast\Tree;    /**
     * 设置pid 的树形结构数据
     *
     * @param array $data 待转换的数据，如果没有则读取数据库
     * @return array
     *              sourcedata：原始数据，只修改展示字段，
     *              treedata：树形结构展示数据
     */
    public function setPidTreeList($data=[]) {
         
        // 添加父级主题Tree形结构
        $ruleList = is_array($data) && !empty($data) ? $data : collection($this->model->order('id', 'asc')->select())->toArray();
        // select的option展示的数据字段，默认是name，我这边用的是topic字段
        $nameFiled = 'topic';
        $tree = Tree::instance();
        $tree->init($ruleList, 'pid');
        $treeList = $tree->getTreeList($tree->getTreeArray(0), $nameFiled);
        $formatTreeList = [];
        foreach ($treeList as $val) {
            $formatTreeList[$val['id']] = $val[$nameFiled];
        }
        $this->view->assign('pidTreeList', $formatTreeList);
        return ['sourcedata' => $treeList, 'treedata' => $formatTreeList];
    }
    
    // add方法中，view视图展示前，增加 `$this->setPidTreeList();`
    public function add(){
    	if (false === $this->request->isPost()) {
    	            $this->setPidTreeList();
    	            return $this->view->fetch();
        }
        	// ...其他代码
      }
      
   // edit方法中同样如此，view视图展示前，增加 `$this->setPidTreeList();`
   public function edit(){
   	// ...其他代码
	if (false === $this->request->isPost()) {
	            $this->setPidTreeList();
	            $this->view->assign('row', $row);
	            return $this->view->fetch();
        }
        // ...其他代码
   }

3.在Model层 Topic.php 中增加代码

public function topicpid()    { 
       return $this->belongsTo('Topic', 'pid', 'id', [], 'LEFT')->setEagerlyType(0);
    }

4.View视图层增加代码

<!-- add.html --><div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Pid')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectpicker('row[pid]', array_merge([0 => __('Toptopic')], $pidTreeList), 0, ['data-rule'=>'required'])} 
        </div>
    </div>
<!-- edit.html --><div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Pid')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectpicker('row[pid]', array_merge([0 => __('Toptopic')], $pidTreeList), $row['pid'], ['data-rule'=>'required'])}
        </div>
    </div>

5.js层增加代码

// 初始化表格
            table.bootstrapTable({
		...		columns: [
		    [
			...
			{field: 'topic', title: __('Topic'), operate: 'LIKE', align: 'left',
			    formatter: function (value, row, index) {
			         return value.toString().replace(/(&|&)nbsp;/g, ' ');
                            }
                        },
			{field: 'topicpid.topic', title: __('Pidname'), align: 'left',
			     formatter: function (value, row, index) {
			         return value ? value : __('Toptopic');
                            },
                        },
			...
		    ]
		]

三、Tree的一个坑点

坑点：
① Article的编辑页，直接使用 data-source="blog/topic/index" 属性，并 不会展示默认选中的话题；

② 还是在Article的编辑页，选择话题后，前面的空格会被转义为  

效果：

其他类如果要使用该Tree树形数据，会出现空格被转为   的问题。下面以文章类 Article.php 举例，来避免被转义

- 首先Article 表和Topic表做了关联， article.topic_id = topic.id

1. Article.php 控制器中

// add方法，增加 `setPidTreeList()` 方法调用
public function add(){
        if (false === $this->request->isPost()) {
                    $topicController = new Topic();
                    $topicController->setPidTreeList(); 
                    return $this->view->fetch();
        }
	...
｝// edit方法同上，也增加 `setPidTreeList()` 方法调用

2.View层add.html 和 edit.html 增加代码

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Topic_id')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:Form::selectpicker('row[topic_id]', $pidTreeList, $row['topic_id'], ['data-rule'=>'required'])}
        </div>
    </div>

3.效果展示：

本文为牛洁原创文章,转载无需和我联系,但请注明来自牛洁博客baobaoo.cn

• 上一篇： 创业者如何选择赛道
• 下一篇： Fastadmin框架学习一（环境搭建）