zoukankan      html  css  js  c++  java
  • easyui tree节点设置disabled的功能

    有个项目准备换个框架,研究了一周的dojo,东西是好,就是国内使用的人太少,奈何我英语水平有限,看不懂文档...所以转而研究easyui,字如其名,的确很easy,api非常详细。

        老板说要让tree加载后让无权限的节点disabled状态,所以我在生成树的json里面加如了 "disabled",

     
    {
            "id":11,
            "text":"搜索引擎",
            "state":"closed",
            "children":[{
                "id":11,
                "url":"http://www.baidu.com",
                "text":"百度一下",
                "disabled":"false"
            }

    就像酱紫了,然后在easyui.css 新加了2个样式

     
    .tree-title-disabled {
      font-size: 12px;
      display: inline-block;
      text-decoration: none;
      vertical-align: top;
      white-space: nowrap;
      padding:02px;
      height: 18px;
      line-height: 18px;
      color:#ccc;
    }
    .tree-file-disabled {
      background: url('images/tree_icons.png') no-repeat -256px0;
    }

    很明显,第一个就是字体是灰色,第二个就是换个图片而已

     
    cc.push("<span class="tree-indent"></span>");
        if(item.disabled=="false"){//设置节点不可选
            cc.push("<span class="tree-icon tree-file tree-dnd-no "+(item.iconCls?item.iconCls:"")+""></span>");
        }
        else{
            cc.push("<span class="tree-icon tree-file "+(item.iconCls?item.iconCls:"")+""></span>");
        }
    _1a2=true;
    }
    }
    if(opts.checkbox){
    if((!opts.onlyLeafCheck)||_1a2){
    cc.push("<span class="tree-checkbox tree-checkbox0"></span>");
    }
    }
        if(item.disabled=="false"){//设置节点不可选
            cc.push("<span title='无权进行操作' class="tree-title-disabled">"+opts.formatter.call(_19d,item)+"</span>");
        }
        else{
            cc.push("<span class="tree-title">"+opts.formatter.call(_19d,item)+"</span>");
        }
    cc.push("</div>");

    然后就是对节点进行设置啦,item.disabled=="false"的时候就加载 -disabled样式,人性话一点呢,就在 <span>里面加个title,

    最后呢就是前台选中节点的时候呢,如果disabled=="false",返回false就可了

     
    functionaddPanel(node) {
                if(node.disabled =="false") {
                    returnfalse;
                }
                else{
                    if($(".easyui-tabs").tabs("exists", node.text + node.id)) {
                        $(".easyui-tabs").tabs("select", node.text + node.id);
                    }
                    else{
                        index++;
                        $('.easyui-tabs').tabs('add', {
                            title: node.text + node.id,
                            content:'<div id='+ index +"_"+ node.id +' style="padding:10px;'+ $("#easyui-tabs").width() + 'px; height:600px"><iframe src=' + node.url +' width="100%" height="100%" style="border:solid 0px"></iframe></div>',
                            closable:true
                        });
                    }
                }
            }

    呐,就是这样的,这呢还实现了,如果有打开的tab,在节点选择的时候呢,已经打开的tab就呈选中状态,而不是在重新打开一个tab,最后就是这个效果了

    记下来,免得以后忘了,刚开始研究,不要喷我哈....

  • 相关阅读:
    Centos6.5下搭建nagios详解
    Centos6.5下升级Python版本
    Python生成随机密码
    配置apache使用https访问
    Irrlicht 论坛好贴 精选(不断补充中...)
    [原创]一个在Irrlicht中会常用的字符串转换函数
    [转]Scrolling Credits Code
    [原创]Irrlicht中的Texture透明色(colorkey)
    [原创]IrrLicht的GUI使用
    [转](C++) How to animate and move an entity
  • 原文地址:https://www.cnblogs.com/ff-king/p/3876813.html
Copyright © 2011-2022 走看看