tpextbuilder- 左側樹形導航

左側樹形導航,主要有３種方式

最原始的，使用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();
  }
}

使用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 協議》，轉載必須註明作者和本文連結

tpextbuilder- 左側樹形導航

左側樹形導航,主要有３種方式

相關文章