restrictions in treeview JS - Check only one checkbox

Vote count: 1

I have a small problem with a "treeview" done in JS The treeview works fine, but now I need to apply some restrictions.

The treeview has the following structure:   Parent> node> sunode

The restriction is that I can not select more than one "node" within the "parent", and in turn, within its "node", I can not select more than one "subnode". That is, I can only mark between each parent node a checkbox.

If I set another checkbox inside the "subnode", you have to deselect the checkbox that had and mark the new one (like a radio button).

And the same with the "node", can only have marked a node within each "parent"

• Parent 1
• Parent 2
  • node 2.1
  • node 2.2
    • subnode 2.2.1
    • subnode 2.2.2
    • subnode 2.2.3
  • node 2.3
• parent 3
  • node 3.1
  • node 3.2

Here the JS:

    (function( $ ){
    var plugin = {
        name: 'TreeView',
        version: '1.0.0'
    }
    var defaults = {
        debug : false,
        autoExpand : false,
        css : {
            list : 'fa-ul',
            listItem : 'fa-li fa',
            collapsed : 'fa-caret-right',
            expanded : 'fa-caret-down'
        }
    }

    var settings;
    var debug, me = null;

    function __changeHandler( e ) {
        var currentTarget = $(this);
        var isChecked = currentTarget.is(':checked');

        debug.log(currentTarget);
        debug.log("Checked ", isChecked)

        if (!isChecked) {
            debug.log('Uncheck all childs');

            currentTarget.parent()
                         .find('input.tw-control')
                         .prop('checked', false);
        }

        if (isChecked) {
            debug.log('Check my parents tree');

            currentTarget.parents('li')
                         .find('>input.tw-control')
                         .prop('checked', true);
        }

        _toggleCollapse( currentTarget );

        me.trigger('treeview.change', currentTarget, me);
    }

    function _toggleCollapse ( element ) {
        debug.log("Toggle collapse");

        var chk = $('input[type="checkbox"]:checked');

        if (chk.is(':checked')) {
            debug.log('Open checked branchs');
            chk.parent()
               .find('>ul.collapse')
               .collapse('show')
               .parent()
               .find('>i.fa-li')
               .removeClass(settings.css.collapsed)
               .addClass(settings.css.expanded);
        }

        if (!element.is(':checked')) {
            debug.log('Hide branch');

            element.parent()
                   .find('ul.collapse')
                   .collapse('hide')
                   .parent()
                   .find('i.fa-li')
                   .removeClass(settings.css.expanded)
                   .addClass(settings.css.collapsed);
        }
    }

    function _init() {
        debug.log( "Initializing plugin" );

        me.on('change', 'input.tw-control', __changeHandler);

        debug.log("Collapsing tree");


        me.find('>ul')
          .addClass(settings.css.list)
          .find('ul')
          .addClass('collapse ' +  settings.css.list)
          .parent()
          .prepend(
              $('').addClass(settings.css.listItem + ' ' +
                                    settings.css.collapsed)
          );

        if (settings.autoExpand) {
            me.find('ul.collapse').collapse('show');
        }

        debug.log("Adding checkbox");

        me.find('li').each(function( index, element ) {
            var elmt = $(element);

            var chk = $('').prop('type', 'checkbox')
                                   .prop('class', 'tw-control')
                                   .prop('value', elmt.attr('data-value'));

            debug.log("Checking if the element is selected");

            var isChecked = elmt.attr('data-checked');

            elmt.prepend(chk);

            if ( isChecked ) {
                debug.log('Toggle checkbox');

                chk.prop('checked', true);

                chk.trigger('change');
            }
        });
    }

    function _fill( data ) {
        $( data ).each(function (index, element) {
            me.find('input[value="' + element + '"]')
              .prop('checked', true)
              .trigger('change');
        });
    }

    var publicMethods = {
        init : function( options ) {
            me = this;

            settings = $.extend( defaults, options );

            debug = $.Logger(settings.debug, plugin);

            _init();

            debug.log('Ready');

            _fill ( options.data );

            return this;
        },
        selectedValues: function() {
            debug.log("Getting selected values");

            var chk = me.find('input[type="checkbox"]:checked');
            var output = [];

            chk.each(function(index, item) {
                var item = $(item);

                if(typeof item.parent().attr('data-value') !== typeof undefined) {
                    output.push(item.attr('value'));
                }
            })

            return output;
        }
    }

    $.fn.treeview = function (options) {
        if ( publicMethods[options] ) {
            return publicMethods[ options ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof options === 'object' || ! options ) {
            // Default to "init"
            return publicMethods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  options  + ' does not exist on jQuery.treeview' );
        }
    }

}( jQuery ));

$('#treeview-container').treeview({
            debug : true,
            data : ['3.2', '2.2.3']
        });

http://ift.tt/2lI9ijk

Can someone help me? thank you very much

asked 39 secs ago

berti

Let's block ads! (Why?)

restrictions in treeview JS - Check only one checkbox