jQuery 树型菜单插件(Treeview)

jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航,支持基于 cookie 的持久性菜单。

<ul id="browser" class="filetree treeview-famfamfam">
    <li><span class="folder">Folder 1</span>
        <ul>
            <li><span class="folder">Item 1.1</span>
                <ul>
                    <li><span class="file">Item 1.1.1</span></li>
                </ul>
            </li>
            <li><span class="folder">Folder 2</span>
                <ul>
                    <li><span class="folder">Subfolder 2.1</span>
                        <ul id="folder21">
                            <li><span class="file">File 2.1.1</span></li>
                            <li><span class="file">File 2.1.2</span></li>
                        </ul>
                    </li>
                    <li><span class="folder">Subfolder 2.2</span>
                        <ul>
                            <li><span class="file">File 2.2.1</span></li>
                            <li><span class="file">File 2.2.2</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="closed"><span class="folder">Folder 3 (closed at start)</span>
                <ul>
                    <li><span class="file">File 3.1</span></li>
                </ul>
            </li>
            <li><span class="file">File 4</span></li>
        </ul>
    </li>
</ul>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
TreeTable是一款基于jQuery树型表格插件,可以让我们方便地展示具有层级关系的数据,如分类、部门等等。 以下是使用TreeTable实现树型表格的PHP代码示例: ```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文件: ```html <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> ``` 然后,在页面加载完成后,执行以下代码来渲染树型表格: ```js $(function () { $('#tree-table').treetable(); }); ``` 这样,我们就可以使用TreeTable插件来渲染树型表格了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

智慧浩海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值