Question

我正在尝试进行以下树形视图：一旦检查了类别，我正在努力将整个分支标记为已检查。我不确定如何使Treeview选择所有子项字段，如果选中了父项，则将其复选框标记为“ checked”。任何指导/有用的教程表示赞赏。我的Treeview.js

    $.fn.extend({
    treed: function (o) {

      var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';

      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };

        /* initialize each of the top levels */
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this);
            branch.prepend("");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();

        });

        tree.find('.branch>label').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });

    }
});
/* Initialization of treeviews */
$('#tree1').treed();

这是我的类别视图：

{!! Form::open(['route'=>'submit.category']) !!}
                    <h3>Category List</h3>
                    <ul id="tree1">
                        @foreach($categories as $category)
                            <li>
                                                    {{$category->title}}
                                @if(count($category->childs))
                                    @include('manageChild',['childs' => $category->childs])
                                @endif
                            </li>
                        @endforeach
                    </ul>
                            <div class="form-group">
                                <button class="btn btn-success">Submit</button>
                            </div>

                        {!! Form::close() !!}

这是managechild.php：

<ul>
@foreach($childs as $child)
    <li>
                  <label><input type="checkbox" value="{{$child->id}}" name="option[]">{{ $child->title }}
</label>
    @if(count($child->childs))
            @include('manageChild',['childs' => $child->childs])
        @endif
    </li>
@endforeach
</ul>

Answer 1

您可以检查下面的链接，其树结构和其他多个示例（如您的要求）。

https://www.jstree.com/plugins/

将所有孩子标记为已选中

1 个答案: