ligerui_ligerTree_002_利用JavaScript代码配置ligerTree节点

浏览数：148 / 时间：2015年06月08日

利用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>