layUI表格树的使用

最新推荐文章于 2023-08-02 10:19:17 发布
最新推荐文章于 2023-08-02 10:19:17 发布
阅读量470 收藏 1
点赞数
文章标签： json javascript ViewUI
原文链接：https://my.oschina.net/u/3748375/blog/3102652
版权

项目下载地址：

https://pan.baidu.com/s/1NCRud1H6-qjGOz3V55ICkg
提取码：ugto

demo1

<!DOCTYPE html>
<html>
        
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">
        p {
            margin-bottom: 20px; 
        }
        .layui-form-checkbox[lay-skin=primary] {
            padding-left: 0
        }
    </style>
</head>

<body class="layui-row">
    <div class="layui-col-md3" style="padding: 10px 10px;">
        <!-- <div id="demo"></div> -->
    </div>
    <a href='https://gitee.com/shaojiepeng/layui-treetable'><img src='https://gitee.com/shaojiepeng/layui-treetable/widgets/widget_5.svg' alt='Fork me on Gitee'></img></a>
    <div class="layui-col-md6" style="padding: 10px 10px;">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>基本功能</legend>
            <div class="layui-field-box">
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="expand" onmouseover="showTips1()">展开</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="collapse" onmouseover="showTips2()">收起</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="destory" onmouseover="showTips10()">销毁</button>
                </p>
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="all" onmouseover="showTips8()">获取所有节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="selected" onmouseover="showTips3()">获取选中节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="unSelected" onmouseover="showTips17()">获取未选中节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="getNode" onmouseover="showTips9()">获取节点信息</button>
                </p>
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="expandNode" onmouseover="showTips11()">展开节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="collapseNode" onmouseover="showTips12()">折叠节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="checkNode" onmouseover="showTips13()">勾选节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="uncheckNode" onmouseover="showTips14()">取消勾选节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="checkAllNode" onmouseover="showTips18()">勾选全部节点</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="unCheckAllNode" onmouseover="showTips19()">取消勾选全部节点</button>
                </p>
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="disableNode" onmouseover="showTips15()">禁用checkbox</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="ableNode" onmouseover="showTips16()">解禁checkbox</button>
                </p>
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="getNodeByParam" onmouseover="showTips20()">查找节点</button>
                    
                </p>
            </div>
        </fieldset>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>编辑功能</legend>
            <div class="layui-field-box">
                <p>
                    <button class="layui-btn layui-btn-sm" id="addNode2" onmouseover="showTips4()">添加根节点</button>
                    <button class="layui-btn layui-btn-sm" id="addNode" onmouseover="showTips5()">添加子节点</button>
                </p>
                
                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="editNode" onmouseover="showTips6()">编辑节点</button>
                </p>

                <p>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" id="removeNode" onmouseover="showTips7()">删除节点</button>
                </p>
            </div>
        </fieldset>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>使用手册</legend>
            <div class="layui-field-box">
                请点击<a href="https://gitee.com/shaojiepeng/layui-treetable/wikis/pages" target="_blank" style="color: #009bff;">Wiki</a>
            </div>
        </fieldset>

        <div id="demo"></div>
    </div>
    <div class="layui-col-md3" style="padding: 10px 10px;"></div>
</body>
<script src="layui/layui.js"></script>
<script src="demo.js"></script>
<script type="text/javascript">

function del(row) {
    alert(row.id)
}

var layout = [
    { name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: '' },
    { name: 'id', field: 'id', headerClass: 'value_col', colClass: 'value_col', style: ''},
    { name: '文本', field: 'text', headerClass: 'value_col', colClass: 'value_col', style: ''},
    {
        name: '操作',
        headerClass: 'value_col',
        colClass: 'value_col',
        style: 'width: 20%',
        render: function(row) {
            return "<a class='layui-btn layui-btn-danger layui-btn-sm' onclick='del(" + row + ")'><i class='layui-icon'>&#xe640;</i> 删除</a>"; //列渲染
        }
    },
];

layui.use(['form', 'treetable', 'layer'], function() {
    var layer = layui.layer, form = layui.form, $ = layui.jquery;

    var tree = layui.treetable({
        elem: '#demo', //传入元素选择器
        spreadable: false, //设置是否全展开，默认不展开
        checkbox : true,
        nodes: [{
                "id": "1",
                "name": "父节点1",
                "text":"测试",
                "checked" : false,
                "children": [{
                        "id": "11",
                        "name": "子节点11",
                        "text":""
                    },
                    {
                        "id": "12",
                        "name": "子节点12",
                        "text":""
                    }
                ]
            },
            {
                "id": "2",
                "name": "父节点2",
                "text":"",
                "checked" : true,
                "children": [{
                    "id": "21",
                    "name": "子节点21",
                    "text":"",
                    "children": [{
                        "id": "211",
                        "name": "子节点211",
                        "text":""
                    }]
                }]
            },
            {
                "id": "3",
                "name": "父节点3",
                "text":"",
            }
        ],
        layout: layout,
        callback: {
            beforeCheck : treetableBeforeCheck,
            onCheck : treetableOnCheck,
            beforeCollapse : treetableBeforeCollapse,
            onCollapse : treetableOnCollapse,
            beforeExpand : treetableBeforeExpand,
            onExpand : treetableOnExpand,
        }
    });

    function treetableBeforeCheck(node){
        alert("回调方法treetableBeforeCheck");
        return true;
    };
    function treetableOnCheck(node){
        alert("回调方法treetableOnCheck");
    };
    function treetableBeforeCollapse(){
        alert("回调方法treetableBeforeCollapse");
        return true;
    };
    function treetableOnCollapse(){
        alert("回调方法treetableOnCollapse");
    };
    function treetableBeforeExpand(){
        alert("回调方法treetableBeforeExpand");
        return true;
    };
    function treetableOnExpand(){
        alert("回调方法treetableOnExpand");
    };

    form.render();

    $('#collapse').on('click', function() {
        tree.collapse();
    });

    $('#expand').on('click', function() {
        tree.expand();
    });

    $('#selected').on('click', function() {
        console.log(tree.getSelected());
        alert(JSON.stringify(tree.getSelected()));
    });

    $('#unSelected').on('click', function() {
        console.log(tree.getUnSelected());
        alert(JSON.stringify(tree.getUnSelected()));
    });

    $('#editNode').on('click', function() {
        var node = tree.getNode("3");
        node.name = '我就是变个名字';
        tree.editNodeName(node);
    });

    $('#removeNode').on('click', function() {
        var node = tree.getNode("2");
        tree.removeNode(node);
    });

    $('#getNode').on('click', function() {
        var node = tree.getNode("2");
        alert(JSON.stringify(node));
    });

    $('#getNodeByParam').on('click', function() {
        var node = tree.getNodeByParam("name", "子节点21", null);
        alert(JSON.stringify(node));
    });

    $('#all').on('click', function() {
        alert(JSON.stringify(tree.getNodes()));
    });

    $('#addNode').on('click', function() {
        tree.addNode(tree.getNode("2"), {
            "id": "22", "name": "子节点22", "text":"", "children": [{
                "id": "221",
                "name": "子节点221",
                "text":"",
                "children": [{
                    "id": "2211",
                    "name": "子节点2211",
                    "text":"",
                    "children": [{
                        "id": "22111",
                        "name": "子节点22111",
                        "text":"",
                    }]
                }]
            },
            {
                "id": "222",
                "name": "子节点222",
                "text":"",
                "children": [{
                    "id": "2221",
                    "name": "子节点2221",
                    "text":"",
                    "children": [{
                        "id": "22211",
                        "name": "子节点22211",
                        "text":"",
                    }]
                }]
            }]
        });
    });

    $('#addNode2').on('click', function() {
        tree.addNode(null, {
            "id": "4", "name": "父节点4", "text":"", "children": [{
                "id": "41",
                "name": "子节点41",
                "text":"",
                "children": [{
                    "id": "411",
                    "name": "子节点411",
                    "text":"",
                    "children": [{
                        "id": "4111",
                        "name": "子节点4111",
                        "text":"",
                    }]
                }]
            },
            {
                "id": "42",
                "name": "子节点42",
                "text":"",
                "children": [{
                    "id": "421",
                    "name": "子节点421",
                    "text":"",
                    "children": [{
                        "id": "4211",
                        "name": "子节点4211",
                        "text":"",
                    }]
                }]
            }]
        });
    });

    $('#destory').on('click', function() {
        tree.destory();
    });
    
    $('#expandNode').on('click', function() {
        tree.expandNode(tree.getNode("2"), false);
    });

    $('#collapseNode').on('click', function() {
        tree.collapseNode(tree.getNode("2"), false);
    });

    $('#checkNode').on('click', function() {
        tree.checkNode(tree.getNode("1"), true);
    });

    $('#uncheckNode').on('click', function() {
        tree.checkNode(tree.getNode("1"), false);
    });

    $('#disableNode').on('click', function() {
        tree.setChkDisabled(tree.getNode("1"), true);
    });

    $('#ableNode').on('click', function() {
        tree.setChkDisabled(tree.getNode("1"), false);
    });

    $('#checkAllNode').on('click', function() {
        tree.checkAllNodes(true);
    });

    $('#unCheckAllNode').on('click', function() {
        tree.checkAllNodes(false);
    });

});


</script>

</html>

效果图：

34e6993c1455eb1cb3f8b0b5943fc7f1c7d.jpg

demo2

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body style="width: 50%; padding: 10px 10px;">
    <div id="demo"></div>
    <div id="demo2"></div>
</body>
<script src="layui/layui.js"></script>
<script type="text/javascript">
function del(row) {
    alert(row)
}

var layout = [
    { name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: '' },
    {
        name: '操作',
        headerClass: 'value_col',
        colClass: 'value_col',
        style: 'width: 20%',
        render: function(row) {
            return "<a class='layui-btn layui-btn-danger layui-btn-sm' onclick='del(" + row + ")'><i class='layui-icon'>&#xe640;</i> 删除</a>"; //列渲染
        }
    },
];

layui.use(['form', 'treetable', 'layer'], function() {
    var layer = layui.layer, form = layui.form, $ = layui.jquery;

    var tree1 = layui.treetable({
        elem: '#demo', //传入元素选择器
        checkbox: true,
        nodes: [{
                "id": "1",
                "name": "父节点1",
                "children": [{
                        "id": "11",
                        "name": "子节点11"
                    },
                    {
                        "id": "12",
                        "name": "子节点12"
                    }
                ]
            },
            {
                "id": "2",
                "name": "父节点2",
                "children": [{
                    "id": "21",
                    "name": "子节点21",
                    "children": [{
                        "id": "211",
                        "name": "子节点211"
                    }]
                }]
            }
        ],
        layout: layout
    });

    var tree2 = layui.treeGird({
        elem: '#demo2', //传入元素选择器
        spreadable: true, //设置是否全展开，默认不展开
        checkbox: false,
        nodes: [{
            "id": "d1",
            "name": "父节点1",
            "children": [{
                "id": "d11",
                "name": "子节点11",
                "checked": true
            }
            ]
        },
        {
            "id": "d2",
            "name": "父节点2",
            "children": [{
                "id": "d21",
                "name": "子节点21",
                "children": [{
                    "id": "d211",
                    "name": "子节点211"
                }]
            }]
        }
        ],
        layout: layout
    });

    form.render();
});

    

</script>

</html>

 效果图：

21c92388302539edd94014b98b3992c7b1a.jpg

demo3

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body>
    <div id="demo"></div>
</body>
<script src="layui/layui.js"></script>
<script type="text/javascript">

layui.use(['tree', 'layer'], function(){
    var layer = layui.layer;

    layui.tree({
        elem: '#demo',
        check: 'checkbox',              //输入checkbox则生成带checkbox的tree, 默认不带checkbox
        skin: 'as',                     //设定皮肤
        drag: true,                     //点击每一项时是否生成提示信息
        checkboxName: 'selectedArr',    //复选框的name属性值
        checkboxStyle: "",              //设置复选框的样式，必须为字符串，css样式怎么写就怎么写
        click: function(item){          //节点点击事件
            layer.msg('当前节名称：'+ item.name + '<br>全部参数：'+ JSON.stringify(item));
            console.log(item);
        },
        nodes: [{
                "id": "1",
                "name": "父节点1",
                "children": [{
                        "id": "11",
                        "name": "子节点11"
                    },
                    {
                        "id": "12",
                        "name": "子节点12"
                    }
                ]
            },
            {
                "id": "2",
                "name": "父节点2",
                "children": [{
                    "id": "21",
                    "name": "子节点21",
                    "children": [{
                        "id": "211",
                        "name": "子节点211"
                    }]
                }]
            }
        ],
    });
});
</script>

</html>

 效果图：

展开：

6690f6cfb301397419ccf165cc242bf9687.jpg

缩回：

fea78fb3dd2d98f70d6826f01dda8054e52.jpg

转载于:https://my.oschina.net/u/3748375/blog/3102652

chiai2298
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui2.5.6树形表格TreeTable使用
雾林小妖的博客
06-03 447
Layui树形表格TreeTable使用
Layui树形表格.rar
06-11
本篇文章将深入探讨Layui树形表格的特性和使用方法。 首先，Layui树形表格结合了表格和树状结构的优点，使得在单一的视图中可以清晰地展示具有层次关系的数据。它继承了Layui数据表格的大部分功能，如分页、排序、...
Layui的树形表格treeTable
06-20
Layui、treeTable、树形表格、无限层级
LayUI树形表格treetable使用详解
热门推荐
小马同学
04-29 14万+
LayUI是现在比较流行的一款前端框架，也有很多人基于LayUI开发了很多不错的组件，比如treetable树形表格。因为treetable是第三方基于LayUI开发的，所以需要先用Layui引入一下文件。 layui.config({ base : 'static/layui/' }).extend({ treetable : 'treetable-lay/treetab...
Layui实现TreeTable(树形数据表格)
RoyRaoHR的博客
10-21 1万+
参考 Layui实现TreeTable(树形数据表格) LayUI树形表格treetable使用详解 gitee：ele-admin / treetable-lay 开发背景 在开源项目看到layui-treetable实现的菜单配置，页面简洁，手上刚好又有个菜单页面可以进行优化（整活）。但是尽管已经有上面三个案例，因为和现业务并不是很匹配、treetable.js版本等原因，整合的过程还是有些波折。 优化结果： 原页面 treetable实现的页面 实现 下载引入treetable.js 我用的版本是
lay-treeTable开发文档
奋斗的新丁
04-20 4237
简介 Layui的树形表格treeTable，支持异步加载(懒加载)、复选框联动、折叠状态记忆。 演示地址：https://whvse.gitee.io/treetable-lay/ 更新日志 不定期增加 增加单元格溢出省略，点击悬浮展开全部(2019-12-27) 解决空数据时刷新后空提示不移除的bug(2019-12-21) 优化固定表头及固定宽度(2019-12-21) 获取选中数据增加可获取非半选的选中数据(2019-12-21) 2019-11-18 (v2.0) 重构treeTab
layui treeTable
闪耀星星的窝
08-20 2553
layui table结构不能很直观的展示层级信息，所以参考"https://fly.layui.com/extend/treeTable/"组件（layui版本为v2.5.6），修改为树形展示，修改了treeTable.js，保留了一些原table定义； 修改如下：支持reload,post方式拉取数据,参考table配置（操作列支持toolbar,cols结构,checkStatus）,check_mode(0上下级联勾选默认，1单选，2多选[不级联])，open_all(默认展开全部)，level_
Layui树形表格treetable
12-13
在这些组件中，树形表格（TreeTable）是一个功能强大的工具，尤其适用于展示具有层级关系的数据。在本篇文章中，我们将深入探讨如何在LayUI中实现和使用TreeTable。 首先，LayUI的TreeTable是在基础的数据表格...
基于layui实现树形穿梭框
最新发布
05-22
- 加载数据：使用layui的API加载树形结构的数据，通常是从服务器获取JSON格式的数据，然后调用`layui.tree`方法生成树形结构。 - 绑定事件：监听用户的点击操作，通过`layui.form.on('select')`方法捕获选择变化，...
layui 树形表格.rar
09-10
在本项目中，"layui 树形表格.rar"是一个包含layui实现的树形表格功能的压缩包，它允许用户从后台动态加载数据，并支持对数据进行增删改查操作。下面我们将详细探讨这个功能的实现及其相关知识点。 首先，树形表格...
＜笔记＞layUI树状treetable树形表格
简析的博客
08-28 1437
树形表格treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致， 支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。 演示地址：https://whvse.gitee.io/treetable-lay/demo/ 开发文档：https://gitee.com/whvse/treetable-lay/wikis/pages ...
layui 树形表格 treeTable使用详细指南，不能折叠解决办法
Java开发，人工智能，边缘计算，致力于掌握前沿技术
09-25 1万+
最近在写一个商品分类管理的功能，本来想用layui的树形组件来写，但发现layui原生的tree只能展示title，而分类的其他字段无法展示，这就有点不适用了，无意中看到一位大神自定义写的一个树形表格组件，正好满足我的要求，特此将使用方法以及其中遇到的一些坑记录下来。。。 首先看下treeTable的 演示地址 项目地址 好了，如果看完演示到这里你觉得正好符合你的功能要求，就可以继续往下看了， 虽...
LayUI treetable树形表格的实现， 数据格式正确，不显示的解决方案 和在这个过程中遇到的坑~ 认真看 你会得到一些想要的答案。
csdn2990的博客
12-14 1万+
先给大家看下效果吧！ 我这边只是针对数据显示的问题做了解释。并没有增删改查。找增删改查的同学可以不用看了。 做出这样的效果，首先我们要借用LayUI的内置插件，treetable.js 网上有很多，之前看一个文档里说LayUI不自带这个插件，其实是有的。。。可能他没下载对。 —网上百度的用的基本都是这2个文件。 但其实LAYUI下载下来的插件里面其实是有的。可能之前没有，最近更新就有了吧...
Layui树形列表，Layui树形菜单列表
weixin_43992507的博客
10-06 4599
Layui树形列表 比较简单请耐心查看 效果图 实现方式 首先引入组件（代码放到最后面了） layui.config({ base: $projectPath+"/js/util/layui-module/" }).extend({ treeSelect: "treeSelect", treeTable: "treeTable", }); js 中 var layer; var form; var table; var treeTable; var interUrl = {
通过C#MVC和layui2.8.11自带的treetable传的数据格式问题
weixin_45901262的博客
08-02 543
因为查看了一下先前第三方的treetable的使用方法，返回的数据只需要标注ID和parentid就行，然后我就试了一下官方的可不可以，发现不行，于是看了一下demo-1.json这个文件。https://blog.csdn.net/qq_35077107/article/details/104271365该作者的博客。layui文档地址：https://layui.dev/docs/2.8/treeTable/gitee地址：https://gitee.com/layui/layui。
layui树形表格treetable
peppa_pig的博客
07-27 3572
treetable树形表格是基于LayUI开发的组件，所以需要先用Layui引入一下文件。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev.
转载layui树形表格
絮落锦乡的博客
03-18 4021
README.md treetable-lay  实现layui的树形表格treeTable 1.简介  在layui数据表格之上进行扩展实现。 演示地址：https://whvse.gitee.io/treetable-lay/  还有一个BOM表结构的树形表格，树形表格2，欢迎查看。 2.使用方法 2.1.引入模块  下载module/treetable-lay整个...
LAYUI 树形表格（tree table）
qq_17627195的博客
12-22 2635
属性表格，主要是引入了下面的JS，文档里面也很详细 下载地址：https://gitee.com/whvse/treetable-lay 案例地址：https://whvse.gitee.io/treetable-lay/demo/ 文档地址：https://gitee.com/whvse/treetable-lay/wikis/pages 先上一张效果图吧 下面贴一下代码： // 记得引入LAYUI layui.config({ // treeTable.js 的根目录 base: '_
layui 树形表格
08-09
通过引入layui的相关资源文件，我们可以使用layui的treeTable模块来创建树形表格。 使用layui树形表格的步骤如下： 1. 引入layui的样式文件和脚本文件： ```html <link rel="stylesheet" href="layui/css/layui....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值