Jquery.Treeview+Jquery UI制作Web文件预览

来源：互联网发布：ecshop 打印sql语句编辑：程序博客网时间：2024/06/07 06:40

效果图：

前台Html:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_26.QingShan.WebFileViewer._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head runat="server">        <title>Jquery.Treeview+Jquery UI制作Web文件预览</title>        <%--JS--%>        <script src="Scripts/jquery-1.9.1.js" type="text/javascript"> </script>        <script src="Scripts/jquery.treeview/jquery.cookie.js" type="text/javascript"> </script>        <script src="Scripts/jquery.treeview/jquery.treeview.js" type="text/javascript"> </script>        <script src="Scripts/jquery-ui-1.10.3/jquery-ui-1.10.3.min.js" type="text/javascript"> </script>        <%--CSS--%>        <link href="Scripts/jquery-ui-1.10.3/css/start/jquery-ui.css" rel="stylesheet" type="text/css" />        <link href="Scripts/jquery.treeview/jquery.treeview.css" rel="stylesheet"></link>        <link href="Style/common.css" rel="stylesheet" type="text/css" />     </head>    <body>        <form id="form1" runat="server">            <div class="main">                <p>                    文件预览</p>                <div class="mainContent">                    <ul id="fileList" class="filetree">                        <%= FileTreeHtml %></ul>                    <script type="text/javascript">                        $(function() {                            //树形文件目录                            $(".filetree").treeview();                            //显示ToolTips                            $(document).tooltip({                                items: ".file",                                track: true,                                content: function() {                                    var element = $(this);                                    var name = element.attr("name");                                    var img = element.attr("img");                                    if (img != "") {                                        return "<img class='toolTips' alt='" + name + "' src='" + img + "'>";                                    }                                    return "";                                }                            });                        });                    </script>                </div>            </div>        </form>    </body></html>

后台代码：

using System;using System.IO;using System.Text;using System.Web;using System.Web.UI;namespace _26.QingShan.WebFileViewer{    public partial class _Default : Page    {        protected string FileTreeHtml { get; set; }        protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            {                var directory = new DirectoryInfo(HttpContext.Current.Server.MapPath("~/FileLibrary"));                if (Directory.Exists(directory.FullName))                {                    FileTreeHtml = FileTreeHelper.GetGuideTree(new StringBuilder(), directory.FullName,                                                               directory.FullName);                }            }        }    }}

生成树形导航Html的类：

using System;using System.IO;using System.Text;using System.Web;namespace Whir.WebSite.JavascriptDemos{    /// <summary>    ///     树形文件夹Html内容生成类    /// </summary>    public class FileTreeHelper    {        /// <summary>        ///     生成树形文件Html        /// </summary>        /// <param name="builder">用于存放拼接的Html，由于是递归拼接，调用方法时，传入空的StringBuilder即可</param>        /// <param name="path">要显示的服务器端文件夹路径（物理路径）</param>        /// <param name="replacePath">要替换掉的路径部分</param>        /// <returns></returns>        public static string GetGuideTree(StringBuilder builder, string path, string replacePath)        {            var currentDir = new DirectoryInfo(path);            DirectoryInfo[] subDirs = currentDir.GetDirectories();            if (subDirs.Length > 0)            {                builder.AppendFormat("<li><span class='folder' path='{0}'>{1}</span>" + Environment.NewLine,                                     currentDir.FullName.Replace(replacePath, ""), currentDir.Name);                builder.Append("    <ul>" + Environment.NewLine);                foreach (DirectoryInfo dir in subDirs)                {                    GetGuideTree(builder, dir.FullName, replacePath);                }                 FileInfo[] files = currentDir.GetFiles();                if (files.Length > 0)                {                    foreach (FileInfo file in files)                    {                        string previewUrl = file.FullName.IsImage()                                                ? GetFileWebUrl(                                                    file.FullName.Replace(HttpContext.Current.Server.MapPath("~/"), ""))                                                : string.Empty;                        builder.AppendFormat("<li><span class='file' name='{0}' img='{1}' path='{2}'>{0}</span>" + Environment.NewLine, file.Name,                                             previewUrl, file.FullName.Replace(replacePath, ""));                    }                }                builder.Append("    </ul>" + Environment.NewLine);                builder.Append("</li>" + Environment.NewLine);            }            else            {                builder.AppendFormat("<li  class='closed'><span class='folder' path='{0}'>{1}</span>" + Environment.NewLine,                                     currentDir.FullName.Replace(replacePath, ""), currentDir.Name);            }            return builder.ToString();        }        public static string GetFileWebUrl(string filePath)        {            if (filePath.IsEmpty())            {                return string.Empty;            }            filePath = filePath.Replace("\\", "/");            if (filePath.StartsWith("/"))            {                filePath = filePath.TrimStart('/');            }            return VirtualPathUtility.AppendTrailingSlash(HttpContext.Current.Request.ApplicationPath) + filePath;        }    }}

完整Demo下载 http://download.csdn.net/detail/a497785609/6926313

0 0