jsTree - checkbox plugin

by cherif_b

HTML

<link rel="stylesheet" href="http://static.jstree.com/v.1.0rc2/themes/default/style.css">
<script src="https://raw.github.com/vakata/jstree/v.pre1.0/jquery.jstree.js"></script>
<html>

    <body>
                    <button type="button" >display checked</button>  
   
        <div id="tree"></div>
        
                <div id="results"></div>


    </body>
</html>

CSS

[rel=directory] > a > .jstree-checkbox { display:none }
[rel=disabled] .jstree-checkbox { visibility:hidden }

JavaScript

var data =[
                    {
                        "data" : "weekly",
                        "attr":{"rel":"directory"},
                        "children" : [ {"data":"w-file1","attr":{"rel":"file"}}, {"data":"w-file2","attr":{"rel":"disabled"}} ]
                    },
                    {
                        "data" : "daily",
                        "attr":{"rel":"directory"},
                        "children" : [ {"data":"d-file1","attr":{"rel":"file"}}, {"data":"d-file2","attr":{"rel":"file"}} ]
                    }
                ]
             
            ;

            $(document).ready(function(){
                $(":button, .run").click(function(){
                    var params = $(this).val();
                    document.getElementById("results").innerHTML+="<BR>number of checked: ";
checked =  $("#tree").jstree("get_checked",null,true) ;                  document.getElementById("results").innerHTML+=checked.length+"";
                    checked.each(function () {
        var node = $(this);
        var name = node.children("a").text();
        var rel = node.attr('rel');

                        document.getElementById("results").innerHTML+="<BR>"+name+": "+rel;
    });

                    
                    
                });
                });


$("#tree").jstree({
    plugins: ['themes', 'json_data', 'checkbox',"types"],
json_data: {data: data},
    themes: {
        theme: 'default'
    },
        checkbox: {
        real_checkboxes: true,
            two_state: true
    },
    "types":{
            "types":{
                  "disabled" : {
                       "check_node" : false,
                      "uncheck_node" : false
                    } ,
                                  "directory" : {
                       "check_node" : false,
                      "uncheck_node" : false
                    } 
            } 
    }    

});