使用jsTree构建Web文件资源管理器

时间:2011-12-06 22:14:26

标签: jquery asp.net jquery-ui jstree

我想建立一个网站,它基本上是一个Web文件浏览器,用于托管在第三方云服务器上的文件。我希望UI看起来非常像Windows文件浏览器。 我正在使用asp.net

1)为了我的目标哪一个是最简单的POC并满足我的需求? http://www.programmingsolution.net/useful-js/jquery-treeview.php (我虽然2但是我愿意接受更正)

2)我试着按照这个教程: http://luban.danse.us/jazzclub/javascripts/jquery/jsTree/reference/_examples/1_datasources.html

JS:

$(document).ready( function() {         

    jQuery("#fileTreeDemo_2")
    .jstree({
        core: { /* core options go here */
    },
    plugins: ["themes", "html_data", "some-other-plugin"]
});

    jQuery("#fileTreeDemo_2").jstree( { data  : {
    type  : "json",
    json  : [ 
      { attributes: { id : "pjson_1" }, state: "open", data: "Root node 1", children : [
        { attributes: { id : "pjson_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
        { attributes: { id : "pjson_3" }, data: "Child node 2" },
        { attributes: { id : "pjson_4" }, data: "Some other child node" }
            ]}, 
        { attributes: { id : "pjson_5" }, data: "Root node 2" } 
        ]}
    });

  }
)

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="js/jstree_pre1.0_fix_1/jquery.jstree.js" type="text/javascript"></script>
    <link href="css/defaultView.css" rel="stylesheet" type="text/css" />
    <script src="js/defaultView.js" type="text/javascript"></script>

</head>
<body>


 <div class="menu">menu</div>
<div class="content">
    <div class="sidebar">


        <div id="fileTreeDemo_1" class="demo"> </div>   
        <div id="fileTreeDemo_2" class="demo"> </div>   

    side    </div>


    <div class="main">main</div>
</div>


</body>
</html>

但源代码中没有显示以下项目:

<div id="fileTreeDemo_2" class="demo   jstree jstree-1 jstree-focused jstree-default">
<ul></ul>
</div>

我做错了什么?

TIA

0 个答案:

没有答案