利用JavaScript代码配置ligerTree节点:
源码地址:http://download.csdn.net/detail/poiuy1991719/8571255
效果图:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> <title>JavaScript配置数据形式</title> <!-- 1:引入文件 --> <script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css" rel="stylesheet" type="text/css" /> <script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script> <!-- 2:配置数据 --> <script type="text/javascript"> $(function() { $("#tree1").ligerTree({ data : [{ text : ‘节点1‘, children : [{ text : ‘节点1.1‘ }, { text : ‘节点1.2‘ }, { text : ‘节点1.3‘, children : [{ text : ‘节点1.3.1‘ }, { text : ‘节点1.3.2‘ }] }, { text : ‘节点1.4‘ }] }, { text : ‘节点2‘ }, { text : ‘节点3‘ }, { text : ‘节点4‘ }] }); $("#tree1").ligerTree({ checkbox : false }); }); </script> </head> <body> JavaScript配置数据,的“树”效果 <br> <div style="width:200px; height:300px; margin:10px; float:left; border:1px solid #ccc; overflow:auto; "> <!-- 3:编写HTML代码 --> <ul id="tree1"> </ul> </div> <div style="display:none"></div> <br> <a href="index4.jsp">下一效果:</a> </body> </html>
时间: 2024-10-11 04:34:38