[英]jsTree how can I open file?
I am new to jsTree. 我是jsTree的新手。 I show all folder and files of particular server directory within my asp.net mvc application. 我在asp.net mvc应用程序中显示特定服务器目录的所有文件夹和文件。 I generate jsTree but when I click on file in jsTree nothing happend. 我生成了jsTree,但是当我单击jsTree中的文件时,什么也没发生。 If I put li outside jsTree object than file is opened in new tab. 如果我将li放在jsTree对象之外,则在新选项卡中打开文件。
my model: 我的模特:
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;
}
my controller: 我的控制器:
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);
}
}
my View: 我的观点:
<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>
Browser render item like this: 浏览器渲染项目如下:
<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("/Content/Images/pdfIcon.png"); background-position: center center; background-size: auto;"></i>
ALL170005_POS-Katalog_DE_v16_screen.pdf
</a>
</li>
Inside jsTree nothing happen on click, but when I put it outside then on click file is opened in new tab. 在jsTree内部,单击时什么也没有发生,但是当我将其放置在外部时,单击时会在新选项卡中打开文件。 What is wrong inside jsTree that I not get the same result? 我没有得到相同结果的jsTree内部有什么问题?
You will have to put a listener on the tree for jstree events.The select_node.jstree event is fired when a node is selected. 您将必须在树上放置jstree事件的侦听器。选择节点时会触发select_node.jstree事件。 Inside this you could write your logic for opening a file. 在其中,您可以编写打开文件的逻辑。
var oTree = $('#jsTree');
oTree.on("select_node.jstree", function (e, data) {
//Open file here using data.node
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.