Question

我是jsTree的新手。我在asp.net mvc应用程序中显示特定服务器目录的所有文件夹和文件。我生成jsTree但是当我点击jsTree中的文件时没有任何事情发生。如果我把li放在jsTree对象外面而不是在新标签中打开文件。

我的模特：

public class JsTreeModel
{
    public string id;
    public string text;
    public string icon;
    public JsTreeAttribute a_attr;
    public string type;
    public JsTreeState state;
    public List<JsTreeModel> children;
}

public class JsTreeAttribute
{
    public string href;
    public string target;
}

public class JsTreeState
{
    public bool opened;
    public bool disabled;
    public bool selected;
}

我的控制员：

    public JsonResult GetTreeData()
    {
        if (AlreadyPopulated == false)
        {
            JsTreeModel rootNode = new JsTreeModel();
            rootNode.a_attr = new JsTreeAttribute();
            rootNode.state = new JsTreeState();
            rootNode.state.opened = true;

            rootNode.text = "Downloadbare Artikel";
            string rootPath = Request.MapPath("~/Content/Files/Presentation/");
            rootNode.id = rootPath;
            PopulateTree(rootPath, rootNode);
            AlreadyPopulated = true;
            return Json(rootNode);
        }
    }

    public void PopulateTree(string dir, JsTreeModel node)
    {
        if (node.children == null)
        {
            node.children = new List<JsTreeModel>();
        }
        // get the information of the directory
        DirectoryInfo directory = new DirectoryInfo(dir);
        if (directory.Exists == false)
        {
            node.text = "No Downloadable Products";
            return;
        }

        // loop through each subdirectory
        foreach (DirectoryInfo d in directory.GetDirectories())
        {
            // create a new node
            JsTreeModel t = new JsTreeModel();
            t.id = d.FullName;
            t.text = d.Name.ToString();
            // populate the new node recursively
            PopulateTree(d.FullName, t);
            node.children.Add(t); // add the node to the "master" node
        }
        // loop through each file in the directory, and add these as nodes
        foreach (FileInfo f in directory.GetFiles())
        {
            // create a new node
            JsTreeModel t = new JsTreeModel();
            t.a_attr = new JsTreeAttribute();
            t.id = f.FullName;
            t.text = f.Name.ToString();
            string abb = Path.GetExtension(f.FullName).Replace(".", "");
            if (abb == "pdf" || abb == "jpg" || abb == "mp4" || abb.ToLower() == "wmv" || abb == "eps")
            {
                t.icon = System.Web.VirtualPathUtility.ToAbsolute("~/Content/Images/" + abb + "Icon.png");
                t.type = "file";
                int index = f.DirectoryName.IndexOf("Content");
                t.a_attr.href = "http://" + System.Web.HttpContext.Current.Request.Url.Authority + "/" + f.DirectoryName.Substring(index).Replace("\\","/") + "/" + f.Name;
                t.a_attr.target = "_blank";
            }
            // add it to the "master"
            node.children.Add(t);
        }
    }

我的观点：

<div id="jsTree"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            cache: false,
            type: 'POST',
            url: '@Url.Action("GetTreeData", "Customer")',
            dataType: 'json',
            success: function(data) {
                $('#jsTree').jstree({
                    'core': {
                        'data': data
                    }
                });
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert('Failed to generate jsTree object');
            }
        });
    });
</script>

浏览器渲染项如下：

<li role="treeitem" aria-selected="false" aria-level="2" aria-labelledby="C:\inetpub\wwwroot\WebshopHallmann\Content\Files\Presentation\AT\ALL170005_POS-Katalog_DE_v16_screen.pdf_anchor" id="C:\inetpub\wwwroot\WebshopHallmann\Content\Files\Presentation\AT\ALL170005_POS-Katalog_DE_v16_screen.pdf" class="jstree-node  jstree-leaf">
    <i class="jstree-icon jstree-ocl" role="presentation"></i>
    <a class="jstree-anchor" href="http://server-domain/Content/Files/Presentation/AT/ALL170005_POS-Katalog_DE_v16_screen.pdf" tabindex="-1" target="_blank" id="C:\inetpub\wwwroot\WebshopHallmann\Content\Files\Presentation\AT\ALL170005_POS-Katalog_DE_v16_screen.pdf_anchor">
        <i class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation" style="background-image: url(&quot;/Content/Images/pdfIcon.png&quot;); background-position: center center; background-size: auto;"></i>
        ALL170005_POS-Katalog_DE_v16_screen.pdf
    </a>
</li>

在jsTree里面没有任何事情发生在点击，但当我把它放在外面然后点击文件在新标签页打开。 jsTree里面有什么问题我没有得到相同的结果？

Answer 1

您必须在树上为jstree事件放置一个侦听器。选择节点时会触发select_node.jstree事件。在这里你可以编写你打开文件的逻辑。

var oTree = $('#jsTree');
oTree.on("select_node.jstree", function (e, data) {
    //Open file here using data.node
})

jsTree如何打开文件？

1 个答案: