加载网页后，在树视图中如何显示子/节点的展开和折叠

After loading web page, In tree view how to show expand and collapse of child/ node

本文关键字：显示 节点 折叠 网页 视图 何显示 加载      更新时间：2023-09-26

我正在使用MVC应用程序。加载网页后，在树视图中如何显示子/节点的展开和折叠。如果第一个孩子被展开，那么如果我们点击第二个孩子，第一个孩子应该折叠，依此类推。

请在下面找到树视图结构。 当我运行时，网页显示如下树结构。 

                           Company Maintenance
                           -Employees
                                  -Employee Details
                                         Name
                                         Permanent Address
                                         Present Address
                                         Technologies 
                                     -Reports
                                         Report1
                                         Report2
                                         Report3
                                    -Employee Maint.
                                          CSE
                                           IT
                                           ECE
                                           CSE
                             Human Resources

我正在使用jquery和html来显示上面的树视图。

Index.CSHTML 代码如下。

这里所有的详细信息仅采用硬编码。无后端数据。所有事物都只在 Index.cshtml 中返回。

 <body>
    <table>
    <tr>
    <td style="width: 30%">
    <ul id="tree1">
    <li>
    <a href="#">TECH</a>
    <ul>
    <li class="active"><a data-toggle="pill" href="#compmain">Company Maintenance</a></li>
    <li>Employees
    <ul>
    <li>Employee Details
    <ul>
    <li><a data-toggle="pill" href="#name">Name </a></li>
    <li><a data-toggle="pill" href="#peraddr">Perminent Address</a></li>
    <li><a data-toggle="pill" href="#presaddr">Present Address </a></li>
    <li><a data-toggle="pill" href="#tech">Technologies</a></li>
    </ul>
    </li>
    <li>Reports
    <ul>
    <li><a data-toggle="pill" href="#report1">Report1 </a></li>
    <li><a data-toggle="pill" href="#report1">Report2 </a></li>
    <li><a data-toggle="pill" href="#report1">Report3 </a></li>
    </ul>
    </li>
    <li>Department
    <ul>
    <li><a data-toggle="pill" href="#cse">CSE </a></li>
    <li><a data-toggle="pill" href="#it">IT </a></li>
    <li><a data-toggle="pill" href="#eee">EEE</a></li>
    <li><a data-toggle="pill" href="#ece">ECE</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a data-toggle="pill" href="#hrinfor">Human Resources</a></li>
    </ul>
    </li>
    </ul>
    </td>
    <td>
    <div class="tab-content">
    <div id="compmain" class="tab-pane fade in active">
    <h3>Details</h3>
    <p>Company Maintainence infor</p>
    </div>
    <div id="name" class="tab-pane fade">
    <h3>Details</h3>
    <p>Name of the Employee</p>
    </div>
    <div id="peraddr" class="tab-pane fade">
    <h3>Details</h3>
    <p>Perminent Address</p>
    </div>
    <div id="presaddr" class="tab-pane fade">
    <h3>Details</h3>
    <p>Present Address</p>
    </div>

    <div id="report1" class="tab-pane fade">
    <h3>Details</h3>
    <p>Report 1</p>
    </div>
    <div id="report2" class="tab-pane fade">
    <h3>Details</h3>
    <p>Report 2</p>
    </div>
    <div id="report3" class="tab-pane fade">
    <h3>Details</h3>
    <p>Report 3</p>
    </div>
    <div id="cse" class="tab-pane fade">
    <h3>Details</h3>
    <p>CSE</p>
    </div>
    <div id="it" class="tab-pane fade">
    <h3>Details</h3>
    <p>IT</p>
    </div>
    <div id="ece" class="tab-pane fade">
    <h3>Details</h3>
    <p>ECE</p>
    </div>
    <div id="eee" class="tab-pane fade">
    <h3>Details</h3>
    <p>EEE</p>
    </div>
    <div id="hrinfor" class="tab-pane fade">
    <h3>Details</h3>
    <p>List of HR Resources</p>
    </div>
    </div>
    </td>
    </tr>
    </table>

    </body>

这是控制器操作方法

public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}

请找到下面的代码。这是我用来显示树视图的代码。

<head>
 <link rel="stylesheet"
   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <script
   src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script
   src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   </head>
   <script type="text/javascript">
     $.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); //li with children ul
                branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
                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();
            });

            //fire event from the dynamically added icon
            tree.find('.branch .indicator').each(function () {
                $(this).on('click', function () {
                    $(this).closest('li').click();
                });
            });
            //fire event to open branch if the li contains an anchor instead of text
            tree.find('.branch>a').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
            //fire event to open branch if the li contains a button instead of text
            tree.find('.branch>button').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
        }
    });
//Initialization of treeviews
$('#tree1').treed({openedClass : 'glyphicon-folder-open', closedClass : 'glyphicon-folder-close'});
    $('#tree1 .branch').each(function () {
        var icon = $(this).children('i:first');
        icon.toggleClass('glyphicon-folder-open glyphicon-folder-close');
        $(this).children().children().toggle();
        $('#tree1').nestable('collapseAll');    
    });

</script>

我建议你看看 https://github.com/mar10/fancytree

相关文章：