zoukankan      html  css  js  c++  java
  • 解决jquery easyui combotree(下拉树)点击文字无法展开下级菜单的解决方法

    <div style="cursor: pointer;" class="tree-node" node-id="1001">
    <span class="tree-indent"></span>  //这个是展开图片前面的空白部分
    <span class="tree-hit tree-collapsed"></span> //这个是展开图片
    <span class="tree-icon tree-folder"></span> //这个是展开图片后面的文件夹图片
    <span class="tree-title">总裁办</span> //这个事最后的文本文字(如下图)
    </div>
    一般考虑只要把第4个span追加上第2个span的功能就可以了,不过考虑到4个span只有文本的大小,所以点击前后的空白部分依然下拉树会消失,所以考虑开始吧span的父div追加功能是最好的
     
    其中有一个combotree(下拉树)的功能,但是只有点击树前面的展开三角才会展开下级菜单,点击文字则会使下拉书隐藏~
    因为这些代码都是动态生成的,所以只有修改jquery.easyui.min.js里的方法,最可气的是easyui的js代码是经过加密的,看起来非常麻烦~~
     
     
    找到jquery.easyui.min.js里相应展开树的代码,
    function _88(_89) {
        var _8a = $.data(_89, "tree").options;
        var _8b = $.data(_89, "tree").tree; ("div.tree-node", _8b).unbind(".tree").bind("dblclick.tree",function() {
            _132(_89, this);
            _8a.onDblClick.call(_89, _117(_89));
        }).bind("click.tree",function() {
     //这里是点击其他部分导致下拉树被隐藏的代码
    
            _132(_89, this);
            _8a.onClick.call(_89, _117(_89));
        }).bind("mouseenter.tree",function() {
            $(this).addClass("tree-node-hover");
            return false;
        }).bind("mouseleave.tree",function() {
            $(this).removeClass("tree-node-hover");
            return false;
        }).bind("contextmenu.tree",function(e) {
            _8a.onContextMenu.call(_89, e, _b3(_89, this));
        }) $("span.tree-hit", _8b).unbind(".tree").bind("click.tree",function() {
     //这里是点击展开图片的代码
            var _8c = $(this).parent();
            _f7(_89, _8c[0]);
            return false;
        }).bind("mouseenter.tree",function() {
            if ($(this).hasClass("tree-expanded")) {
                $(this).addClass("tree-expanded-hover");
            } else {
                $(this).addClass("tree-collapsed-hover");
            }
        }).bind("mouseleave.tree",function() {
            if ($(this).hasClass("tree-expanded")) {
                $(this).removeClass("tree-expanded-hover");
            } else {
                $(this).removeClass("tree-collapsed-hover");
            }
        }).bind("mousedown.tree",function() {
            return false;
        });
        $("span.tree-checkbox", _8b).unbind(".tree").bind("click.tree",function() {
            var _8d = $(this).parent();
            _aa(_89, _8d[0], !$(this).hasClass("tree-checkbox1"));
            return false;
        }).bind("mousedown.tree",function() {
            return false;
        });
    };

    如果看懂以上部分的人就不需要再往下看了,下面继续说明,为了给span的父div追加相同的功能,所以我们要根据上面红字的第二部分修改红字的第一部分

    .....bind("click.tree",function() {
     //这里我们要得到的不是span所以不需要parent()方法,直接this就可以,当然,如果你要修改的是span,那还是要使用parent()
            var _8c = $(this);
    
    
     //下面需要判断是否是叶子节点,不是展开,是则显示在input上,这部分也可以直接修改_f7方法里的代码
            var hit = $(_8c[0]).children("span.tree-hit");
            if (hit.length == 0) {
         //如果等于0则说明是叶子节点,直接使用原来的代码就可以
                _132(_89, this);
                _8a.onClick.call(_89, _117(_89));
            } else {
         //否则就是有下级数据的节点,展开树
                _f7(_89, _8c[0]);
                return false;
            }
        }).bind("mouseenter.tree",function.....
  • 相关阅读:
    Linux常用命令解释
    RAID 10 配置流程
    VMware workstation Windows 10虚拟机安装步骤
    yum仓库配置
    vi 常用命令
    Linux设备驱动动态插入内核与直接集成到内核方式的利弊分析
    常用的Linux命令行文本处理工具总结
    CentOS使用总结(不断更新)
    vsftpd出现“Response: 500 OOPS: cannot change directory”解决方法
    NFS共享服务挂载时出现“access denied by server while mounting”的解决方法
  • 原文地址:https://www.cnblogs.com/flytogalaxy/p/7597569.html
Copyright © 2011-2022 走看看