• YUI的treeview组件——带checkbox类型的treeview如何实现disabled功能


    这两天要实现树形目录,功能中要求树形目录带checkbox,而且有默认状态,默认带勾选的,不允许取消。

    YUI带checkbox的treeview是通过样式实现的,其实是不带input的,所以没办法实现disabled。选中状态其实是通过挂上高亮的class,treeview本身提供禁止高亮的功能,但一旦禁止,就显示不了勾选,所以不能使用yui的禁止高亮功能完成disabled。

    写了个demo,可以模拟disabled功能。如下:

    ====================================================

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>阿当制作</title>
    <script src="http://assets.taobaocdn.com/yui/2.7.0/build/yuiloader/yuiloader-min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var loader = new YAHOO.util.YUILoader();  
    </script>
    </head>

    <body class="yui-skin-sam">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/treeview/assets/skins/sam/treeview.css" />
    <div id="tree" class="ygtv-checkbox">
    <ul>
    <li>1
    <ul>
    <li>1-1</li>
    <li>1-2
    <ul>
    <li>1-2-1</li>
    <li>1-2-2</li>
    </ul>
    </li>
    </ul>   
    </li>
    <li myid="345">2</li>
    <li class="expanded">3
    <ul>
    <li yuiConfig='{"highlightState":1}'>02/01/2009</li>
    <li>3-2</li>
    </ul>
    </li>
    </ul>
    </div>
    <input type="button" value="确定" id="btn" />
    <script type="text/javascript">
    function init(){
    var tree1 = new YAHOO.widget.TreeView("tree");
    tree1.subscribe('clickEvent',tree1.onEventToggleHighlight);
    tree1.setNodesProperty('propagateHighlightUp',true);
    tree1.setNodesProperty('propagateHighlightDown',true);
    tree1.render();
    tree1.subscribe('dblClickEvent',tree1.onEventEditNode);

    var hiLit = tree1.getNodesByProperty('highlightState',1);
    if(YAHOO.lang.isArray(hiLit)){
    for(var i=0,n=hiLit.length;i<n;i++){
    hiLit[i].openFlag = true;
    }
    }
    tree1.subscribe("highlightEvent", function(node) {
    if(node.openFlag){
    node.highlight();
    }
    });

    YAHOO.util.Event.on("btn","click",function(){
    var hiLit = tree1.getNodesByProperty('highlightState',1);
    if(hiLit[0].isLeaf ){
    alert(hiLit[0].index);
    }
    });
    }
    </script>


    <script type="text/javascript">
    loader.require(['dom', 'event','treeview','json']);
    if(init){
    loader.onSuccess = init;
    }
    loader.insert();
    </script>
    </body>
    </html>

    ==============================================================
  • 相关阅读:
    抽象工厂模式
    外观模式
    策略模式
    状态模式
    观察者模式
    装饰者模式
    模板方法模式
    适配器模式
    中介者模式
    组合模式
  • 原文地址:https://www.cnblogs.com/cly84920/p/4426944.html
Copyright © 2020-2023  润新知