Layui(十三) Layui treeTable的表格嵌套树形数据+时间控件与layer控件互斥

最新推荐文章于 2025-04-15 09:15:49 发布

宗乐平

最新推荐文章于 2025-04-15 09:15:49 发布

阅读量1.8k

点赞数

分类专栏： layui treeTable

本文链接：https://blog.youkuaiyun.com/qq_42142258/article/details/104833778

版权

本文主要介绍在Layui中如何将treeTable与时间控件结合，并解决表格嵌套数据展示以及时间控件与layer控件互斥的问题。目标是实现父级单元格仅显示名称和操作，子级显示完整数据。目前存在的两个待解问题是如何隐藏父级单元格的时间控件，以及取消复选框和序号而不影响展开按钮的位置。欢迎了解的大佬提供解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的：

1、原效果

2、目的效果

ps:父级数据只显示名称+操作，子级显示数据

过程：

1、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui树形表格2.x演示</title>
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="../layuiadmin/modules/treeTable/treeTable.css">
</head>
<style>
    /*去除秒这一列*/
    .layui-laydate-content > .layui-laydate-list {
        padding-bottom: 0;
        overflow: hidden;
    }

    /*去除时间框的边线    */
    .layui-input-date {
        border: none;
    }

</style>
<body class="page-no-scroll">

<div class="layui-layout layui-layout-admin" style="margin:5px 15px">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>Layui树形表格2.x演示</legend>
                    </fieldset>
                    <div class="layui-btn-container" style="display: inline-block;">
                        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe668;</i>展开全部
                        </button>
                        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe66b;</i>折叠全部
                        </button>
                        <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe625;</i>展开2
                        </button>
                        <button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe623;</i>折叠2
                        </button>
                        <button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe605;</i>勾选1_1_2
                        </button>
                    </div>
                    <input class="layui-input" id="edtSearch" value="1_1_2" placeholder="输入关键字"
                           style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
                    <div class="layui-btn-container" style="display: inline-block;">
                        <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#x1006;</i>清除搜索
                        </button>
                    </div>
                    <div class="layui-btn-container" style="display: inline-block;">
                        <a href="async.html" class="layui-btn layui-btn-sm layui-btn-primary" lay-tips="千呼万唤始出来~"
                           style="position: relative;">
                            <i class="layui-icon">&#xe64d;</i>异步加载&nbsp;&nbsp;
                            <span class="layui-badge-dot" style="position: absolute;right: 3px;top: 3px;"></span>
                        </a>
                        <a href="fixed.html" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe62d;</i>固定表头
                        </a>
                        <a href="edit.html" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe642;</i>单

最低0.47元/天解锁文章