Как выполнить «Развернуть» и «Свернуть» в Kendo Tree View по нажатию кнопок «Развернуть» и «Свернуть» - PullRequest
Новая
       28

Как выполнить «Развернуть» и «Свернуть» в Kendo Tree View по нажатию кнопок «Развернуть» и «Свернуть»

0 голосов
/ 11 октября 2018

Я новичок в управлении Kendo, пожалуйста, помогите мне с этим, у меня уже есть Tree View, как показано во вложении, Теперь у меня есть две кнопки (Развернуть и Свернуть), мне нужно выполнить «Развернуть все» по нажатию кнопкиКнопка «Развернуть» и «Свернуть все» при нажатии кнопки «Свернуть».

Как выполнить «Развернуть все» и «Свернуть все» в представлении дерева кендо при нажатии кнопок «Развернуть» и «Свернуть».

Пожалуйста, помогите мне с этим.

enter image description here

1 Ответ

0 голосов
/ 11 октября 2018

Существует похожий / такой же вопрос относительно этого, пожалуйста, отметьте это , вам нужно объединить ответ там.В основном:

  1. Свертывание и развертывание, для которого требуется параметр (селектор элемента), который будет расширен / закрыт
  2. В вашем случае все элементы означают -> класс k.item
  3. просто добавьте jquery при нажатии на кнопку с такой функцией

как: 

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
    

</head>
<body>

        <div id="example">
          <button id="expand">Expand All</button>
          <button id="collapse">Collapse All</button>
            <div class="demo-section k-content">
                <ul id="treeview">
                    <li data-expanded="true">
                        <span class="k-sprite folder"></span>
                        My Web Site
                        <ul>
                            <li data-expanded="true">
                                <span class="k-sprite folder"></span>images
                                <ul>
                                    <li><span class="k-sprite image"></span>logo.png</li>
                                    <li><span class="k-sprite image"></span>body-back.png</li>
                                    <li><span class="k-sprite image"></span>my-photo.jpg</li>
                                </ul>
                            </li>
                            <li data-expanded="true">
                                <span class="k-sprite folder"></span>resources
                                <ul>
                                    <li data-expanded="true">
                                        <span class="k-sprite folder"></span>pdf
                                        <ul>
                                            <li><span class="k-sprite pdf"></span>brochure.pdf</li>
                                            <li><span class="k-sprite pdf"></span>prices.pdf</li>
                                        </ul>
                                    </li>
                                    <li><span class="k-sprite folder"></span>zip</li>
                                </ul>
                            </li>
                            <li><span class="k-sprite html"></span>about.html</li>
                            <li><span class="k-sprite html"></span>contacts.html</li>
                            <li><span class="k-sprite html"></span>index.html</li>
                            <li><span class="k-sprite html"></span>portfolio.html</li>
                        </ul>
                    </li>
                </ul>
            </div>

            <script>
                $(document).ready(function() {
                    $("#treeview").kendoTreeView();
                  	$("#expand").on("click", function(){
                    		var treeview = $("#treeview").data("kendoTreeView");
                      	treeview.expand(".k-item");
                    })
                  $("#collapse").on("click", function(){
                    		var treeview = $("#treeview").data("kendoTreeView");
                      	treeview.collapse(".k-item");
                    })
                });
            </script>

            <style>
                #treeview .k-sprite {
                    background-image: url("../content/web/treeview/coloricons-sprite.png");
                }

                .rootfolder { background-position: 0 0; }
                .folder { background-position: 0 -16px; }
                .pdf { background-position: 0 -32px; }
                .html { background-position: 0 -48px; }
                .image { background-position: 0 -64px; }
            </style>
        </div>


</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...