treetable php,jQuery树型表格插件jQuery treetable

TreeTable是一款基于jQuery的树型表格插件，可以让我们方便地展示具有层级关系的数据，如分类、部门等等。

以下是使用TreeTable实现树型表格的PHP代码示例：

<?php
// 模拟数据
$data = [
    [
        'id' => 1,
        'name' => '分类1',
        'parent_id' => 0,
    ],
    [
        'id' => 2,
        'name' => '分类2',
        'parent_id' => 0,
    ],
    [
        'id' => 3,
        'name' => '子分类1',
        'parent_id' => 1,
    ],
    [
        'id' => 4,
        'name' => '子分类2',
        'parent_id' => 1,
    ],
    [
        'id' => 5,
        'name' => '子分类3',
        'parent_id' => 2,
    ],
];

// 生成树状结构数据
function buildTree($data, $parentId = 0)
{
    $tree = [];
    foreach ($data as $item) {
        if ($item['parent_id'] == $parentId) {
            $children = buildTree($data, $item['id']);
            if ($children) {
                $item['children'] = $children;
            }
            $tree[] = $item;
        }
    }
    return $tree;
}

// 生成HTML表格
function buildTable($tree)
{
    $html = '';
    foreach ($tree as $item) {
        $html .= '<tr data-tt-id="' . $item['id'] . '"';
        if (isset($item['children'])) {
            $html .= ' data-tt-parent-id="' . $item['parent_id'] . '"';
        }
        $html .= '>';
        $html .= '<td>' . $item['name'] . '</td>';
        $html .= '</tr>';
        if (isset($item['children'])) {
            $html .= buildTable($item['children']);
        }
    }
    return $html;
}

// 生成树状结构数据
$tree = buildTree($data);

// 生成HTML表格
$table = '<table class="table table-bordered" id="tree-table">';
$table .= '<thead><tr><th>名称</th></tr></thead>';
$table .= '<tbody>' . buildTable($tree) . '</tbody>';
$table .= '</table>';

echo $table;
?>

然后我们来看一下如何使用jQuery TreeTable插件来渲染这个树型表格：

首先，我们需要引入jQuery和TreeTable插件的js和css文件：

<link href="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>

然后，在页面加载完成后，执行以下代码来渲染树型表格：

$(function () {
  $('#tree-table').treetable();
});

这样，我们就可以使用TreeTable插件来渲染树型表格了。