jeudi 8 décembre 2016

How do you determine the state of checkboxes in jsTree when branch is collapsed?

I am using jsTree to create a collapsible tree with html that has multiple levels. The levels all have checkboxes, and I have been successful setting checkboxes and retrieving their state. However, I need to know the state of checkboxes even if their branch is collapsed? How do you that. I have include my javascript, so far.

<script type="text/javascript">
    $(document).ready(function () {
        $('#jstree-container').hide();

        $('#jstree-container').append('<ul id="v' + @Model.VenueId + '"></ul>');

        //Build Venue Tree
        $.post("GetVenuesShort", { venueId: "@Model.VenueId" })
           .done(function (data) {
               var parentId = @Model.VenueId;
               for (i = 0; i < data.length; i++) {
                   var selector = '#v' + data[i].Parent_Id;
                   if (data[i].Parent_Id == parentId) {
                       $(selector).append('<li class="jstree-open"><a style="color:#000;">' + data[i].Name + '</a><ul id="v' + data[i].Id + '"></ul></li>');
                   }
                   else {
                       $(selector).append('<li><a style="color:#000;">' + data[i].Name + '</a><ul id="v' + data[i].Id + '"></ul></li>');
                   }
               }

               //Insert devices
               $.post("GetDevicesShort", {venueId : "@Model.VenueId", mediaId : "@Model.MediaId"})
                .done(function(data){
                    for(i=0; i<data.length; i++) {
                        var selector = '#v' + data[i].Venue_Id;
                        $(selector).append('<li class="device" device-id="' + data[i].Id + '"><a style="color:#000;">' + data[i].Name + '</a></li>');
                    }

                    $('#jstree-container').jstree({
                        "core" : {
                            "themes" : {
                                "icons" : false
                            }
                        },
                        "checkbox" : {
                            "keep_selected_style" : false
                        },
                        "plugins" : ["checkbox"]
                    });

                    $('#jstree-container').bind('select_node.jstree', function(e, data){
                        return data.instance.open_all(data.node);
                    });

                    $('#jstree-container').show();

                });
           });
    });

    function clearTree() {
        $.each($('li'),function(index,value) {$.jstree.reference('#jstree-container').uncheck_node(value)});
    }

    function saveCheckedNodes() {
        var checkedNodes = $('#jstree-container').jstree('get_checked',null,true);
        var deviceArray = new Array();

        $.each(checkedNodes, function(index,value){
            var selector = '#' + value;
            var deviceId = $(selector).attr('device-id');
            deviceArray.push(deviceId);
        });

        var definedDevices = deviceArray.filter(function(n) {return n !== undefined});

        $.post("SaveCheckedDevices", $.param({data : definedDevices}, true), function(data) {});
    }
</script>




Aucun commentaire:

Enregistrer un commentaire