Question

我是javascript中的新手。我在mvc中创建了一个树。这是代码。

      @helper TreeView(treeview.Models.PatientSubTree patientTree)
{

        if (patientTree.subTrees.Where(s => s.parentID ==     patientTree.Seed).Any())
        {
            foreach (var node in patientTree.subTrees)
            {
                    <li>
                        @if (node.parentID == patientTree.Seed)
                            {
                                treeview.Models.PatientSubTree inner = new   treeview.Models.PatientSubTree { Seed = node.ID, subTrees = patientTree.subTrees };
                                @*<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span*@ 

                                                        <a href="#" onclick="navigate('@node.Path');">@node.Text</a>
                                    if (node.HasChild)
                                    {
                                                <ul>
                                                    @TreeView(inner)
                                                </ul>
                                            }

                                 }
                    </li>
            }

          }
    }

并且对于展开和折叠的树，我添加了这个java脚本代码，您可以在下面看到。首先，我为每个添加一个'句柄'类节点，然后我将添加展开的折叠。但在应用此代码后，我的树无法正确显示...

enter image description here

在图像中你可以看到'fff'和'ggg'必须处于同一级别，因为它们都是'eee'的孩子。 'ccc'似乎是'bbb'的孩子，但它也必须与'bbb'处于同一水平。因为'bbb'和'ccc'都是'aaa'的孩子....

我不知道为什么java脚本代码无法正常工作。

 $(document).ready(function () { jQuery("#tree ul").hide();

   jQuery("#tree li").prepend("<span class='handle'></span>");

    jQuery("#tree li:has(ul)")
      .children(":first-child").addClass("collapsed")
      .click(function () {
          jQuery(this).toggleClass("collapsed expanded")
            .siblings("ul").toggle();
      });
});

  $(function () {
    $("ul#tree li").each(function () {
        as = $(this).children('a');
        if (!as.length) {  //
            $(this).hide();
        }
    })
});

崩溃和扩大的树

0 个答案: