zoukankan      html  css  js  c++  java
  • 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>

    ==============================================================
  • 相关阅读:
    如何在iTerm2中配置oh my zsh?
    sublime中格式化jsx文件
    ES6 new syntax of Literal
    ES6 new syntax of Rest and Spread Operators
    How to preview html file in our browser at sublime text?
    ES6 new syntax of Default Function Parameters
    ES6 new syntax of Arrow Function
    七牛云2018春招笔试题
    Spring-使用注解开发(十二)
    Spring-声明式事物(十一)
  • 原文地址:https://www.cnblogs.com/cly84920/p/4426945.html
Copyright © 2011-2022 走看看