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>
    没有实现的功能,收缩前是啥样,展开后依旧是啥样。
  • 相关阅读:
    find 用法
    linux 查看链接库的版本
    虚函数重载(overwrite) 继承覆盖问题
    将iso mount 到nfs 目录问题
    centos 下使用 pytesseract 识别文字
    nginx 报错Malformed HTTP request line, git 报错fatal: git-write-tree: error building trees
    nfs 支持ipv6
    数位操作
    二分图(最小顶点覆盖 最大匹配 最大独立集 )
    欧几里得算法
  • 原文地址:https://www.cnblogs.com/lxdd/p/4111462.html
Copyright © 2011-2022 走看看