ym.7in6.com/application/admin/view/area/index.html

<style>
    .form-commonsearch .form-group {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    form.form-commonsearch .control-label {
        padding-right: 0;
    }

    .tdtitle {
        margin-bottom: 5px;
        font-weight: 600;
    }

    #channeltree {
        margin-left: -6px;
    }

    #channelbar .panel-heading {
        height: 55px;
        line-height: 25px;
        font-size: 14px;
    }

    @media (max-width: 1230px) {
        .fixed-table-toolbar .search .form-control {
            display: none;
        }
    }

    @media (min-width: 1200px) {
    }

    .archives-label span.label {
        font-weight: normal;
    }

    .archives-title {
        max-width: 400px;
        min-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .setflag label {
        font-weight: 400;
    }

    .nav > li.toggle-channel {
        display: none;
    }

    .col-full-width .nav > li.toggle-channel {
        display: inline-block;
    }

    #myTabContent {
        background-color: #fff;
    }

    #channeloperate > span {
        font-size: 14px;
        color: #777;
    }

    #channeloperate > span:first-child {
        margin-right: 10px;
    }

    #channeloperate > span label {
        font-weight: 400;
    }

    .row-eq-height {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

</style>

<style data-render="darktheme">
    body.darktheme #myTabContent {
        background-color: #333;
    }

    body.darktheme .tagsinput {
        background-color: #3c3e3d;
        border-color: #444;
        color: #ccc;
    }

    body.darktheme .sim-tree a {
        color: #ccc;
    }

    body.darktheme .sim-tree .sim-icon-d:before {
        border-top-color: #ccc;
    }

    body.darktheme .sim-tree .sim-icon-r:before {
        border-left-color: #ccc;
    }
</style>
<style>
    .form-commonsearch .form-group {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    form.form-commonsearch .control-label {
        padding-right: 0;
    }

    .tdtitle {
        margin-bottom: 5px;
        font-weight: 600;
    }

    #channeltree {
        margin-left: -6px;
    }

    #channelbar .panel-heading {
        height: 55px;
        line-height: 25px;
        font-size: 14px;
    }

    @media (max-width: 1230px) {
        .fixed-table-toolbar .search .form-control {
            display: none;
        }
    }

    @media (min-width: 1200px) {
    }

    .archives-label span.label {
        font-weight: normal;
    }

    .archives-title {
        max-width: 400px;
        min-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .setflag label {
        font-weight: 400;
    }

    .nav > li.toggle-channel {
        display: none;
    }

    .col-full-width .nav > li.toggle-channel {
        display: inline-block;
    }

    #myTabContent {
        background-color: #fff;
    }

    #channeloperate > span {
        font-size: 14px;
        color: #777;
    }

    #channeloperate > span:first-child {
        margin-right: 10px;
    }

    #channeloperate > span label {
        font-weight: 400;
    }

    .row-eq-height {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    /* 树形菜单样式 */
    .channel-tree {
        font-size: 13px;
        line-height: 1.4;
    }

    .tree-node {
        position: relative;
        padding: 0;
        margin: 0;
    }

    .tree-item {
        display: flex;
        align-items: center;
        padding: 6px 8px;
        cursor: pointer;
        border-radius: 3px;
        transition: background-color 0.2s;
        margin: 1px 0;
    }

    .tree-item:hover {
        background-color: #f5f5f5;
    }

    .tree-item.active {
        background-color: #3c8dbc;
        color: white;
    }

    .tree-item.active:hover {
        background-color: #357ca5;
    }

    .tree-toggle {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        cursor: pointer;
        font-size: 10px;
        color: #666;
    }

    .tree-toggle:before {
        content: "▶";
        transition: transform 0.2s;
    }

    .tree-toggle.expanded:before {
        transform: rotate(90deg);
    }

    .tree-toggle.empty {
        visibility: hidden;
    }

    .tree-checkbox {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        cursor: pointer;
    }

    .tree-icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #666;
    }

    .tree-label {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tree-children {
        margin-left: 20px;
        display: none;
    }

    .tree-node.expanded > .tree-children {
        display: block;
    }

    /* 连接线样式 */
    .tree-node:before {
        content: "";
        position: absolute;
        left: 8px;
        top: 28px;
        bottom: 0;
        width: 1px;
        background-color: #ddd;
    }

    .tree-node:last-child:before {
        height: 22px;
    }

    .tree-node > .tree-item:before {
        content: "";
        position: absolute;
        left: 8px;
        top: 50%;
        width: 12px;
        height: 1px;
        background-color: #ddd;
        margin-top: -0.5px;
    }

    .tree-node.root:before,
    .tree-node.root > .tree-item:before {
        display: none;
    }

    /* 暗色主题支持 */
    body.darktheme #myTabContent {
        background-color: #333;
    }

    body.darktheme .tree-item:hover {
        background-color: #404040;
    }

    body.darktheme .tree-item {
        color: #ccc;
    }

    body.darktheme .tree-node:before,
    body.darktheme .tree-node > .tree-item:before {
        background-color: #555;
    }
</style>
<link rel="stylesheet" href="__CDN__/assets/addons/cms/css/simtree.css"/>

<div class="row row-eq-height">
    <div class="col-md-2 pr-0" id="channelbar">
        <div class="panel panel-default panel-intro" style="height: 100%;">
            <div class="panel-heading">
                <div class="panel-lead">
                    <div class="pull-left">
                        <em>{:__('Channel list')}</em>
                    </div>
                    <div class="pull-right">
                        <a href="javascript:;" class="btn btn-link btn-xs btn-channel hidden-xs hidden-sm"><i class="fa fa-bars"></i></a>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div id="channeltree">
                    <!-- 树形菜单内容 -->
                    <div class="channel-tree">
                        <!-- 正确的结构：每个一级节点都是独立的 tree-node -->
                        {foreach $tree as $k=>$v}
                        <div class="tree-node root expanded">
                            <div class="tree-item" data-id="{$v['id']}" onclick="toggleNode(this)">
                                <span class="tree-toggle {if !empty($v['children'])}expanded{else}empty{/if}" onclick="event.stopPropagation(); toggleNode(this.parentNode)"></span>
                                <span class="tree-label">{$v['name']}</span>
                            </div>

                            {if !empty($v['children'])}
                            <div class="tree-children">
                                <!-- 二级节点 -->
                                {foreach $v["children"] as $kk=>$vv}
                                <div class="tree-node expanded">
                                    <div class="tree-item" data-id="{$vv['id']}" onclick="toggleNode(this)">
                                        <span class="tree-toggle {if !empty($vv['children'])}expanded{else}empty{/if}" onclick="event.stopPropagation(); toggleNode(this.parentNode)"></span>
                                        <span class="tree-label">{$vv['name']}</span>
                                    </div>

                                    {if !empty($vv['children'])}
                                    <div class="tree-children">
                                        <!-- 三级节点 -->
                                        {foreach $vv['children'] as $kkk=>$vvv}
                                        <div class="tree-node">
                                            <div class="tree-item" data-id="{$vvv['id']}" onclick='refreshTableData("{$v["id"]}", "{$vv["id"]}", "{$vvv["id"]}")'>
                                                <span class="tree-toggle empty"></span>
                                                <span class="tree-label">{$vvv['name']}</span>
                                            </div>
                                        </div>
                                        {/foreach}
                                    </div>
                                    {/if}
                                </div>
                                {/foreach}
                            </div>
                            {/if}
                        </div>
                        {/foreach}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        if (window.innerWidth < 768) {
            document.getElementById('channelbar').className = document.getElementById('channelbar').className.replace("pr-0", "hidden");
        }
    </script>
    <div class="col-xs-12 col-md-10" id="archivespanel">
        <div class="panel panel-default panel-intro">
            <div class="panel-heading">
                {:build_heading(null,FALSE)}
                <ul class="nav nav-tabs" data-field="status">
                    <li class="toggle-channel"><a href="javascript:;" class="btn-channel"><i class="fa fa-bars"></i></a></li>

                </ul>
            </div>
            <div class="panel-body">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="one">
                        <div class="widget-body no-padding">
                            <div id="toolbar" class="toolbar">
                                {:build_toolbar('refresh,edit,del')}
                                <div class="dropdown btn-group {:$auth->check('user/user/multi')?'':'hide'}">
                                    <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                                    <ul class="dropdown-menu text-left" role="menu">
                                        <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>
                                        <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>
                                    </ul>
                                </div>
                            </div>
                            <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                                   data-operate-edit="{:$auth->check('user/user/edit')}"
                                   data-operate-del="{:$auth->check('user/user/del')}"
                                   width="100%">
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
    // 切换节点展开/收起
    function toggleNode(element) {
        const treeNode = element.closest('.tree-node');
        const toggle = element.querySelector('.tree-toggle') || element.closest('.tree-item').querySelector('.tree-toggle');

        if (treeNode) {
            treeNode.classList.toggle('expanded');

            if (toggle && !toggle.classList.contains('empty')) {
                toggle.classList.toggle('expanded');
            }
        }
    }

    // 选择节点
    function selectNode(element, nodeId) {
        // 移除所有活动状态
        document.querySelectorAll('.tree-item').forEach(item => {
            item.classList.remove('active');
        });

        // 添加当前节点的活动状态
        element.classList.add('active');

        console.log('选择了频道:', nodeId);

        // 这里可以触发数据加载
        if (typeof loadChannelData === 'function') {
            loadChannelData(nodeId);
        }

        // 如果有FastAdmin的表格刷新方法
        // if (typeof Table !== 'undefined' && Table.api) {
        //     Table.api.ajax.reload();
        // }
    }

    // 复选框变化事件
    $(document).on('change', '.tree-checkbox', function() {
        const checked = this.checked;
        const treeNode = $(this).closest('.tree-node');

        // 选中/取消选中所有子节点
        treeNode.find('.tree-children .tree-checkbox').prop('checked', checked);

        // 向上更新父节点状态
        updateParentCheckbox(treeNode);
    });

    // 更新父节点复选框状态
    function updateParentCheckbox(treeNode) {
        const parentNode = treeNode.parent().closest('.tree-node');
        if (parentNode.length) {
            const siblings = parentNode.find('> .tree-children > .tree-node');
            const checkedSiblings = siblings.find('> .tree-item .tree-checkbox:checked');
            const parentCheckbox = parentNode.find('> .tree-item .tree-checkbox');

            if (checkedSiblings.length === 0) {
                parentCheckbox.prop('checked', false).prop('indeterminate', false);
            } else if (checkedSiblings.length === siblings.length) {
                parentCheckbox.prop('checked', true).prop('indeterminate', false);
            } else {
                parentCheckbox.prop('checked', false).prop('indeterminate', true);
            }

            updateParentCheckbox(parentNode);
        }
    }

    // 初始化
    $(document).ready(function() {
        // 初始化树形结构的展开状态
        $('.tree-node.expanded').each(function() {
            const toggle = $(this).find('> .tree-item .tree-toggle');
            if (!toggle.hasClass('empty')) {
                toggle.addClass('expanded');
            }
        });
    });
    function refreshTableData(level1Id, level2Id, level3Id) {
        // 解析参数
        var yearMonth = level1Id; // 如：2025-06
        var test2 = level2Id.split('_')[1]; // 如：asdf
        var test3 = level3Id.split('_')[2]; // 如：ewww

        console.log('筛选条件:', {
            yearMonth: yearMonth,
            test2: test2,
            test3: test3
        });

        // 直接刷新表格，传递筛选参数
        $("#table").bootstrapTable('refresh', {
            query: {
                yearMonth: yearMonth,
                test2: test2,
                test3: test3
            }
        });

        // 更新选中状态
        $('.tree-item').removeClass('active');
        $(event.target).closest('.tree-item').addClass('active');
    }
</script>