1.下载插件 网址：https://plugins.jquery.com/treetable/
2.引入文件
我是把js，和css都引入了
<link rel="stylesheet" href="/treetable/css/screen.css">
<link href="/treetable/css/jquery.treetable.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/treetable/css/jquery.treetable.theme.default.css">
<script src="/treetable/js/jquery.treetable.js"></script>
<script src="/mustache/js/mustache.js"></script>复制
mustache.js是需要使用到的一个模板引擎，需要自己下载。
3.前端
myTreeTable 是一个treetable要用的一个容器，treeTableList是需要从后端拿到数据后，用js动态生成相应的dom结构,在添加进去
<body>复制
<table id="myTreeTable">
<thead>
<tr>
<th >城市</th>
<th >人数</th>
</tr>
</thead>
<tbody id="treeTableList">
</tbody>
</table>复制
<script type="text/template" id="treeTableTpl">
<tr data-tt-id="{{row.id}}" data-tt-parent-id="{{pid}}">
<td>{{row.name}}</td>
<td style="text-align: center;">{{row.total}}</td>
</tr>
</script>复制
</body>复制
4.相关js
$(document).ready(function () {
$("body").taLayout();
var data=temp.lists.dg2.list
//成功后刷新表格
var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
var data=temp.lists.dg2.list//数据
var root='0' //根节点
if (data.length>0){
root=data[0].pid
}
addRow("#treeTableList", tpl, data,root ,true);//添加dom元素
tree=$('#myTreeTable').treetable({
expandable: true, // 是否允许展开/折叠，默认为 true
initialState: 'collapsed', // 初始展开状态，默认为 'collapsed'
indent: 20 , // 每个层级的缩进量，默认为 19
clickableNodeNames:true,
onInitialized:function () {
$("#treeTableList tr:first a").trigger('click');
}//这个展示第一级
},true); //这个true，如果是会刷新树的话，要带上
});
复制
function addRow(list, tpl, data, pid, root){
for (var i=0; i<data.length; i++){
var row = data[i];
if (row.pid==pid){
$(list).append(Mustache.render(tpl, { pid: (root?0:pid), row: row}) );
addRow(list, tpl, data, row.id);
}
}
}复制
5.默认的样式比较原始，表格相关样式优化要自己加了。
参考【doge】：
https://blog.csdn.net/Java_monkeys/article/details/81281605?ops_request_misc=%7B%22request%5Fid%22%3A%22169079642616800192219326%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=169079642616800192219326&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-81281605-null-null.142^v91^control_2,239^v12^control&utm_term=jquery treetable 使用&spm=1018.2226.3001.4187
