jquery treetable，初步使用

最新推荐文章于 2024-04-12 09:59:41 发布

被迫学习前端

最新推荐文章于 2024-04-12 09:59:41 发布

阅读量479

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_52877804/article/details/132026862

版权

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=%257B%2522request%255Fid%2522%253A%2522169079642616800192219326%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&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%20treetable%20%E4%BD%BF%E7%94%A8&spm=1018.2226.3001.4187

被迫学习前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery treetable，初步使用

myTreeTable 是一个treetable要用的一个容器，treeTableList是需要从后端拿到数据后，用js动态生成相应的dom结构,在添加进去。initialState: 'collapsed', // 初始展开状态，默认为 'collapsed'expandable: true, // 是否允许展开/折叠，默认为 true。indent: 20 , // 每个层级的缩进量，默认为 19。//这个true，如果是会刷新树的话，要带上。var root='0' //根节点。
复制链接

扫一扫