treeview JS中的限制 - 只选中一个复选框

Question

我在JS中完成了一个“treeview”的小问题 树视图工作正常，但现在我需要应用一些限制。

树视图具有以下结构： 父＆GT;节点＆GT; sunode

限制是我不能在“父”中选择多个“节点”，反过来，在其“节点”内，我不能选择多个“子节点”。也就是说，我只能在每个父节点之间标记一个复选框。

如果我在“子节点”中设置了另一个复选框，则必须取消选中该复选框并标记新复选框（如单选按钮）。

与“节点”相同，只能在每个“父”中标记一个节点

<div id="treeview-container">
        <ul>
            <li>Parent 1</li>
            <li>Parent 2
                <ul>
                    <li>node 2.1</li>
                    <li>node 2.2
                        <ul>
                            <li data-value="2.2.1">subnode 2.2.1</li>
                            <li data-value="2.2.2">subnode 2.2.2</li>
                            <li data-value="2.2.3">subnode 2.2.3</li>
                        </ul>
                    </li>
                    <li>node 2.3</li>
                </ul>
            </li>
            <li>parent 3
                <ul>
                    <li data-value="3.1">node 3.1</li>
                    <li data-value="3.2">node 3.2</li>
                </ul>
            </li>
        </ul>
    </div>

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(
              $('<i></i>').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 = $('<input/>').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://codepen.io/vilacactus/pen/BpMjOp?editors=1010#0

有人能帮助我吗？非常感谢你

Answer 1

您可以收听 treeview.change 事件，并将所有兄弟姐妹的检查设置为false：

＆＃13;

＆＃13;

$('#treeview-container').treeview({
  debug : false,
  data : ['3.2', '2.2.3']
});
$('#treeview-container').on("treeview.change", function (e, ele) {
  if ($(ele).parents('ul').length > 1) {  // not on root elements
    $(ele).closest('li').siblings().find(':checkbox').prop('checked', false);
  }
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Checkable-Collapsible-jQuery-Tree-View-Plugin-Treeview/dev/logger.js"></script>
<script src="http://www.jqueryscript.net/demo/Checkable-Collapsible-jQuery-Tree-View-Plugin-Treeview/dev/treeview.js"></script>


<div id="treeview-container">
    <ul>
        <li>Parent 1</li>
        <li>Parent 2
            <ul>
                <li>node 2.1</li>
                <li>node 2.2
                    <ul>
                        <li data-value="2.2.1">subnode 2.2.1</li>
                        <li data-value="2.2.2">subnode 2.2.2</li>
                        <li data-value="2.2.3">subnode 2.2.3</li>
                    </ul>
                </li>
                <li>node 2.3</li>
            </ul>
        </li>
        <li>Parent 3
            <ul>
                <li data-value="3.1">node 3.1</li>
                <li data-value="3.2">node 3.2</li>
            </ul>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;