我想瀏覽文件夾和文件夾遞歸使用asp.net中的treeview

Question

我正在尋找一個控件或示例項目來瀏覽文件和定義文件夾的遞歸與asp.net使用treeview。

我不知道是否有像這樣的免費控件/示例項目？

在此先感謝。

Answer 1

請參閱我的文章 - Build a File tree explorer with asp.net and jquery。原文jquery文件不再可用於我在文章中指定的源文件。不過，我有jquery文件，並可以使其可用。

編輯：我會在一段時間後發佈代碼。

代碼如下：

首先，您需要用服務器代碼訪問文件系統。這可以放在文件後面的代碼或aspx頁面本身 - 只需刪除其他所有內容。

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
    Dim dir As String 
    If Request.Form("dir") Is Nothing Or Request.Form("dir").Length <= 0 Then 
     dir = "/" 
    Else 
     dir = Request.Form("dir") 
    End If 
    Dim di As New System.IO.DirectoryInfo(Server.MapPath(dir)) 
    Dim sb As New StringBuilder 
    sb.Append("<ul class=""jqueryFileTree"" style=""display: none;"">" & ControlChars.Lf) 
    Dim di_child As System.IO.DirectoryInfo 
    For Each di_child In di.GetDirectories() 
     sb.Append((ControlChars.Tab & "<li class=""directory collapsed""><a href=""#"" rel=""" & dir & di_child.Name & "/"">" & di_child.Name & "</a></li>" & ControlChars.Lf)) 
    Next di_child 
    Dim fi As System.IO.FileInfo 
    For Each fi In di.GetFiles() 
     Dim ext As String = "" 
     If fi.Extension.Length > 1 Then 
      ext = fi.Extension.Substring(1).ToLower() 
     End If 

     sb.Append((ControlChars.Tab & "<li class=""file ext_" & ext & """><a href=""#"" rel=""" & dir & fi.Name & """>" & fi.Name & "</a></li>" & ControlChars.Lf)) 
    Next fi 
    sb.Append("</ul>") 
    Response.Write(sb.ToString) 
End Sub 

接下來，您需要一個頁面來顯示文件樹。這個頁面需要引用jquery核心文件和jquery文件樹腳本。我碰巧在我的母版頁中引用了jquery核心文件。

<link href="../styles/jqueryFileTree.css" rel="stylesheet" type="text/css" /> 
<script src="../scripts/jqueryFileTree.js" type="text/javascript"></script> 

在顯示文件樹的頁面中，粘貼此代碼。 Root是要瀏覽的目錄，filetree.aspx具有上面的服務代碼。該div成爲文件樹。對於演示，我使用iframe作爲文件查看器。

<script type="text/javascript"> 
    var $j = jQuery.noConflict(); 
    $j(document).ready(function() { 
     $j('#divFileTree').fileTree({ 
      root: '/demos/', 
      script: 'filetree.aspx', 
      expandSpeed: 1000, 
      collapseSpeed: 1000, 
      multiFolder: false 
     }, function (file) { 
      alert(file); 
      $j('#demoviewer').attr('src', file); 
     }); 
    }); 


</script> 
<div id="divFileTree"></div>