tpextbuilder- 左侧树形导航

左侧树形导航,主要有３种方式

1. 最原始的，使用column分割左右

class User extends Controller
{
    public function index()
    {
        $builder = $this->builder($this->pageTitle, $this->indexText);
        //****
        $left = $builder->column(1);
        $right = $builder->olumn(11);

        $treeData = $this->getTree();//以某种方式获取的数据 

        //渲染一个自定义模板，在其中完成树形结构
        // /admin/view/user/tree.html
        $left->content()->fetch('tree',['treeData' => $treeData]);

        /*或者通过拼接html的形式 */
        //$html ='<ul>';
        //foreach($treeData as $d)
        //{
        //   $html .= "<li>{$d['name']}</li>";
        //}
        //$html .='</ul>';
        //$left->content()->display($html);
        //display/fetch 和 think框架的`Controller`类似，只能使用其中一种，`fetch`渲染模板文件，`display`直接输出html

        $table = $right->table();
        //略
        return $builder->render();
  }
}

2. 使用ZTree

use tpext\builder\traits\HasBuilder;

class User extends Controller
{

   public function index()
    {

        $builder = $this->builder($this->pageTitle, $this->indexText);

        $tree = $builder->tree('left');
        $tree->fill($this->categModel->all(), 'title');// categModel 中　`parent_id`为上级id字段

        $tree->trigger('.row-category_id');//被点击时，触发元素

        $builder->addStyleSheet('
        .col-md-left
        {
            width:13%;
            float:left;
        }
        .col-md-right
        {
            width:87%;
            float:right;
        }
        ');

        $table = $builder->table('right');//灵活运用，正常情况下此处参数是数字，但传字符串也行。
        //***************

        return $builder->render();
    }
}

３.　使用HasBuilder时可使用封装好的，是对方法２的进一步封装。

namespace app\admin\controller;

use tpext\builder\traits\HasBuilder;
use think\Controller;

/**
 * Undocumented class
 * @title 产品管理
 */
class Shopgoods extends Controller
{
    protected function initialize()
    {
　　　　　$this->dataModel = new GoodsModel;//商品模型，其中 `category_id`字段关联的到分类模型
　　　　　$this->categoryModel = new ShopCategory;//商品分类模型

        // 其他初始化...

        //左侧树
        $this->treeType = 'ztree'; //js插件类型，ztree或jstree
        $this->treeModel = $this->categoryModel;//分类模型
        $this->treeTextField = 'name';//分类模型中的分类名称字段
        $this->treeKey = 'category_id';//关联的键　localKey
    }
}

本作品采用《CC 协议》，转载必须注明作者和本文链接