🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 思路 一:循环得到数据 二:加载 `jquery` , `treeTable`插件 相关,并初始化 ## 代码 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!--中间内容/start--> <table class="table table-hover table-bordered table-list" id="menus-table"> <thead> <tr> <th width="80">排序</th> <th width="50">ID</th> <th>菜单名称</th> <th>操作</th> <th width="80">状态</th> <th width="180">操作</th> </tr> </thead> <tbody> {$category} </tbody> </table> <!--中间内容/end--> <!--js/start--> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <!--tree/start--> <script src="http://www.ijquery.cn/js/treeTable/treeTable.js"></script> <link href="http://www.ijquery.cn/js/treeTable/treeTable.css" rel="stylesheet"> <!--tree/end--> <script> $(function() { $("#menus-table").treeTable({ expandable: true }); }) </script> <!--js/end--> </body> </html> ``` ## 说明 如果用 `thinkcmf` 的封装内容的话,需要这样加载! ``` <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script> <script src="__STATIC__/js/wind.js"></script> <script> $(document).ready(function() { Wind.css('treeTable'); Wind.use('treeTable', function() { $("#menus-table").treeTable({ indent : 20 }); }); }); </script> ```