javascript - 如何使用 laravel 制作分层表？

Question

我正在开发一个简单的功课平台。该平台有两个表: themes - 将保存每个作业的主题

id
parent_id
name

works - 这里会是每个学生的作品

id
theme_id
description

好吧，我正在尝试制作一个分层表。每行都有主题，当您打开该行时，它会显示该主题的作品，如果有子主题，它会显示该主题的链接……等等!

是这样的:

在模型中，我有:

public function childs() {
    return $this->hasMany(self::class,'parent_id','id') ;
}

在我的 Controller 中(我需要改进它):

public function index(){
    $themes = DB::table('themes', DB::raw('SELECT * WHERE lft IS BETWEEN parent.lft AND parent.rgt'))->get();
    $works = Work::all();

    $themes = array_map(function($theme){
        $theme->works = [];
        return $theme;
    }, $themes->toArray());

    foreach($themes as $theme){
        foreach($works as $work){
            if($theme->id === $work->theme_id){
                $theme->works[] = $work;
            }
        }
    }
    return view('dashboard.trabalhos.index', ['themes' => $themes]);
}

Controller 函数的返回值是:

array:3 [▼
  0 => {#275 ▼
    +"id": 1
    +"parent_id": null
    +"name": "Tema1"
    +"description": "asdasdasd"
    +"lft": 1
    +"rgt": 6
    +"depth": 0
    +"created_at": null
    +"updated_at": null
    +"works": array:1 [▼
      0 => Work {#287 ▶}
    ]
  }
  1 => {#278 ▶}
  2 => {#279 ▶}
]

在 View 中，我上次的测试是这样的:

<table id="asd" class="highlight">
    <thead>
    <tr>
        <th>Tema</th>
    </tr>
    </thead>
    <tbody>
    @forelse($themes as $theme)
        @php($asd = $theme->depth)
        @if($theme->depth === 0)
            <tr data-tt-id="{{$theme->id}}" class="branch collapsed">
                <td>

                    @if(count($theme->works) > 0)
                        <?php
                        foreach($theme->works as $work){
                            echo "nome: " . $work->title;
                        }
                        ?>
                    @endif
                    {{$theme->name}}
                </td>
            </tr>
        @elseif($theme->depth > 0)
            <tr data-tt-id="{{$theme->id}}" data-tt-parent-id="{{$theme->parent_id}}"  class="branch collapsed" style="display: none;">

                <td>
                    {{$theme->name}}
                </td>
            </tr>
        @endif
    @empty

    @endforelse
    <tr></tr>
    </tbody>
</table>

我试过使用 bootstrap-treeview 和 treetable 但也许我的问题是前端的逻辑。有人可以帮我点灯吗？

Answer 1

你可以看看组件“kalnoy/nestedset”，它是一个用于构建树结构的组件，它包含了所有必要的方法。 如果要使用它，则需要将指定的列添加到这样的表中

Schema::create('items', function (Blueprint $table) {
    $table->increments('id');
    ...
    NestedSet::columns($table);
    ...
});

并且您可以使用该组件的所有方法来生成这样的树结构:

$root = Item::findOrFail($rootId);
$nodes = $root->descendants->toTree($root);

$traverse = function ($items, $prefix = '-') use (&$traverse) {
    $html = '';
    foreach ($items as $item) {
        $html .= ... (html structure)
        $html .= $traverse($item->children, $prefix . '-');
    }
    return $html;
};

$html .= $traverse($nodes);