我有一个JSP页面,使用jQuery treeview插件创建树视图。现在我想让单个文件可选,这意味着我想在单击文件时打开一个URL。我尝试了几个例子,但没有它们起作用。这是一个示例html页面:
<ul id="browser" class="filetree">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="file">Item 1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="file">File 2.2</span></li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
JavaScript的:
<script type="text/javascript">
$(document).ready(function(){
$("#browser").treeview({
toggle: function() {
console.log("%s was toggled.", $(this).find(">span").text());
alert("do something");
}
});
// fourth example
$("#black, #gray").treeview({
control: "#treecontrol",
persist: "cookie",
//cookieId: "treeview-black"
});
});
</script>
我该如何实现?
答案 0 :(得分:1)
Hiya 演示::) http://jsfiddle.net/yeMy9/1/ &amp;&amp; http://jsfiddle.net/yeMy9/2/(仅当您点击项目而不是文件夹时触发。或{{ 3}}
现在,当您点击文件夹内的项目(例如项目1.1等)时,我已经发出警报...您可以使用条件语句来决定转发的位置。
干杯,我相信这会有所帮助!
Jquery代码
$(document).ready(function(){
$("#browser").treeview({
toggle: function() {
console.log("%s was toggled.", $(this).find(">span").text());
alert("do something");
}
});
$("li span").click(function(){
alert(' Forward the url when clicked => ' + $(this).text());
//Now forward to the link according to the text() i.e. based
// on Item 1.1 & 2.2 etc...
});
// fourth example
$("#black, #gray").treeview({
control: "#treecontrol",
persist: "cookie",
//cookieId: "treeview-black"
});
});
<强> HTML 强>
<ul id="browser" class="filetree">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="file">Item 1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="file">File 2.2</span></li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>