模型树
<h1>模型树</h1>
<p>这个功能可以实现一个树状组件，可以用拖拽的方式实现数据的层级、排序等操作，下面是基本的用法。</p>
<p><img src="https://cdn.learnku.com/uploads/images/202004/26/38389/RfWVwRHMs7.png!large" alt="" /></p>
<h2>表结构和模型</h2>
<p>要使用<code>model-tree</code>，要遵守约定的表结构：</p>
<p>> {tip} <code>parent_id</code>字段一定要默认为<code>0</code>！！！</p>
<pre><code class="language-sql">CREATE TABLE `demo_categories` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`parent_id` int(11) NOT NULL DEFAULT '0',
`order` int(11) NOT NULL DEFAULT '0',
`title` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
`updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci</code></pre>
<p>上面的表格结构里面有三个必要的字段<code>parent_id</code>、<code>order</code>、<code>title</code>,其它字段没有要求。</p>
<p>对应的模型为<code>app/Models/Category.php</code>:</p>
<pre><code class="language-php">&lt;?php
namespace App\Models\Demo;
use Dcat\Admin\Traits\ModelTree;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
use ModelTree;
protected $table = 'demo_categories';
}</code></pre>
<p>表结构中的三个字段<code>parent_id</code>、<code>order</code>、<code>title</code>的字段名也是可以修改的：</p>
<p>> {tip} 为了便于阅读，这里不再展示 <code>Repository</code> 代码。</p>
<pre><code class="language-php">&lt;?php
namespace App\Models\Demo;
use Dcat\Admin\Traits\ModelTree;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
use ModelTree;
protected $table = 'demo_categories';
// 父级ID字段名称，默认值为 parent_id
protected $parentColumn = 'pid';
// 排序字段名称，默认值为 order
protected $orderColumn = 'sort';
// 标题字段名称，默认值为 title
protected $titleColumn = 'name';
// Since v2.1.6-beta，定义depthColumn属性后，将会在数据表保存当前行的层级
protected $depthColumn = 'depth';
}</code></pre>
<h2>使用方法</h2>
<p>然后就是在页面中使用<code>model-tree</code>了：</p>
<pre><code class="language-php">&lt;?php
namespace App\Admin\Controllers\Demo;
use App\Models\Category;
use Dcat\Admin\Layout\Row;
use Dcat\Admin\Layout\Content;
use Dcat\Admin\Tree;
use Dcat\Admin\Controllers\AdminController;
class CategoryController extends AdminController
{
public function index(Content $content)
{
return $content-&gt;header('树状模型')
-&gt;body(function (Row $row) {
$tree = new Tree(new Category);
$row-&gt;column(12, $tree);
});
}
}</code></pre>
<p>可以通过下面的方式来修改行数据的显示：</p>
<pre><code class="language-php">$tree = new Tree(new Category);
$tree-&gt;branch(function ($branch) {
$src = config('admin.upload.host') . '/' . $branch['logo'] ;
$logo = &quot;&lt;img src='$src' style='max-width:30px;max-height:30px' class='img'/&gt;&quot;;
return &quot;{$branch['id']} - {$branch['title']} $logo&quot;;
});</code></pre>
<p>在回调函数中返回的字符串类型数据，就是在树状组件中的每一行的显示内容，<code>$branch</code>参数是当前行的数据数组。</p>
<h3>修改模型查询条件</h3>
<p>如果要修改模型的查询，用下面的方式</p>
<pre><code class="language-php">$tree-&gt;query(function ($model) {
return $model-&gt;where('type', 1);
});</code></pre>
<h3>限制最大层级数</h3>
<p>默认 <code>5</code></p>
<pre><code class="language-php">$tree-&gt;maxDepth(3);</code></pre>
<h2>自定义行操作</h2>
<pre><code class="language-php">use Dcat\Admin\Tree;
$tree-&gt;actions(function (Tree\Actions $actions) {
if ($actions-&gt;row-&gt;id &gt; 5) {
$actions-&gt;disableDelete(); // 禁用删除按钮
}
// 添加新的action
$actions-&gt;append(...);
});
// 批量添加action
$tree-&gt;actions([
new Action1(),
&quot;&lt;div&gt;...&lt;/div&gt;&quot;,
...
]);</code></pre>
<p>自定义复杂操作，参考<a href="action-tree.md#row-action">模型树动作</a></p>
<h2>自定义工具栏按钮</h2>
<p>请参考文档<a href="action-tree.md">模型树动作</a></p>