<link rel="stylesheet" href="../jquery.treeview.css" type="text/css" />
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery.treeview.js"></script>
<script src="../js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#red").treeview({
animated: "fast",
collapsed: true,
unique: true,
toggle: function() {
window.console &&console.log("%o was toggled", this)
}
})
})
</script>
html如下:
<ul id="red">
<li class="open"><span>北京市</span>
<ul>
<li class="open"><span>西城区</span>
<ul>
<li class="open"><span>西直门</span>
<ul>
<li><span>西环广场</span></li>
</ul>
</li>
<li><span>马甸</span>
<ul>
<li><span>浙江大厦</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
用z-tree插件①带有父子关系的标准
zTreeNodes
举例:
Js代码
1.var zTreeNodes = [
2.{"id":1, "name":"test1", "nodes":[
3.{"id":11, "name":"test11", "nodes":[
4.{"id":111, "name":"test111"}
5."id":12, "name":"test12"}
②带有父子关系的简单
Array
格式
(isSimpleData)的zTreeNodes
举例:
Js代码
1.var treeNodes = [
2. {"id":1, "pId":0, "name":"test1"},
3.{"id":11, "pId":1, "name":"test11"},
4. {"id":12, "pId":1, "name":"test12"},
5. {"id":111, "pId":11, "name":"test111"},
例子:
(Java代码)
①在页面引用
zTree的js和css:
Html代码
1.
<!-- ZTree树形插件 -->
2.<link
rel="stylesheet"
href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type
="text/css">
3.<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->
4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"
></script>
<br><SPAN><IMG id="Image_Closed" style="DISPLAY: none" onclick="this.style.display='none'Text_Closed.style.display='inline'
Image_Open.style.display='inline'
Text_Open.style.display='inline'"
src="pic/m_o.gif"><IMG id="Image_Open<%= i %>" onclick="this.style.display='none'
Image_Closed.style.display='inline'
Text_Open.style.display='none'
Text_Closed.style.display='inline'"
src="pic/m_c.gif"></SPAN>
<SPAN id="Text_Closed">大目录
<SPAN id="Text_Open" style="DISPLAY: none">'主要是这句话进行修改下
<SPAN>
<br> <IMG src="pic/m_c.gif" />小目录<br>
</SPAN>
</SPAN>
</SPAN>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)