zoukankan      html  css  js  c++  java
  • 无限极分类试图的 展缩

    image

    image

    实现的效果为:点击主类收缩所有的子类,再次点击,逐层次的展开对应的子类

    实现的过程:

    1,数据库中增加了字段,储存上一层次的id,level_one_id 字段

    image

    2,html代码中,增加class,利用level_one_id,id的字段信息

    <div class="row">
                <table class="table table-hover">
                    <Volist id="vo" name="info">
                        <tr class="<?php echo $vo['parent_id'] != 0 ? $vo['level_one_id'] : $vo['level_one_id'];?>" num="{$vo['id']}">
                            <td ban_id="{$vo.id}">
                                <?php echo str_repeat('  ', $vo['level']);?><span class="toggle-but" style="cursor:pointer;">[+]</span>{$vo.name}<span class="f-right del_ban">[删除]</span>
                            </td>
                        </tr>
                    </Volist>
                </table>
            </div>
        </div>

    image

    3,js代码中进行判断展缩

    <script type="text/javascript">
            $('.toggle-but').on('click',function() {
                var _this         = $(this);
                var parent         = $(this).parent().parent();
                var text         = $(this).text();
                var _class         = $(parent).attr('class');
                var num         = $(parent).attr('num');
                var find_class     = _class + '-' + num;
    
                if(text == '[+]') {
                    $('tr[class^="'+find_class+'"]').hide();
                    $(this).html('[-]');
                } else {
                    $.each($('tr[class^="'+find_class+'"]'),function(i,v) {
                        $('tr[class^="'+find_class+'"]').hide();
                        $('tr[class="'+find_class+'"]').show();
                        $('tr[class="'+find_class+'"]').find('.toggle-but').html('[-]');
                        _this.html('[+]');
                    });
                }
            });
        </script>
    没有实现的功能,收缩前是啥样,展开后依旧是啥样。
  • 相关阅读:
    bzoj2815: [ZJOI2012]灾难
    bzoj1188: [HNOI2007]分裂游戏
    bzoj4538: [Hnoi2016]网络
    bzoj3594: [Scoi2014]方伯伯的玉米田
    bzoj2595: [Wc2008]游览计划
    bzoj3277: 串
    Django开发:(3.2)ORM:多表操作
    Django开发:(3.1)ORM:单表操作
    Django:(2)视图层&模板层
    Django开发:(1)django基础 & url控制器
  • 原文地址:https://www.cnblogs.com/lxdd/p/4111462.html
Copyright © 2011-2022 走看看