<!DOCTYPE html>

 <%@ page language="java" contentType="text/html; charset=utf-8"

     pageEncoding="utf-8"%>

 <%

     String contextPath = request.getContextPath();

 %>

 <html>

 <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Insert title here</title>

    <link href="<%=contextPath%>/resources/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />

    <script src="<%=contextPath%>/resources/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>

    <script src="<%=contextPath%>/resources/ligerUI/js/core/base.js" type="text/javascript"></script>

    <script src="<%=contextPath%>/resources/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>

    <!-- CSS样式 -->

    <style type="text/css">

        .box{

            float: left;

        }

        .tree{

            width: 230px;

            height: 200px;

            margin: 10px;

            border: 1px solid #ccc;

            overflow: auto;

        }

        h4{ margin: 10px;

        }

    </style>

 </head>

 <body>

   <ul id="tree"></ul>

 </body>

   <script type="text/javascript">

   var treeData = [

           { 'name': '节点1', 'no':1 ,

               'children':

                   [

                       { 'name': '节点1.1','no':1 },

                       { 'name': '节点1.2','no':2 },

                       { 'name': '节点1.3',

                           'children': [

                             { 'name': '节点1.3.1' },

                             { 'name': '节点1.3.2' }

                        ]

                       },

                       { 'name': '节点1.4' }

                    ]

                   },

                   { 'name': '节点2' }

               ];

   $(function(){

       $("#tree").ligerTree({

           checkbox: true,

           parentIcon: null,

           childIcon: null ,

           slide: true, //是否显示动画

           nodeWidth: 100,

           idFieldName: 'id',

           textFieldName:'name' , //指定数据中要显示的属性名，默认为"text"

           data: treeData

       });

   });

 //var tree = $("#tree").ligerGetTreeManager();

 //tree.setData(treeData) ;   //或者这样设值

   </script>

 </html>

效果如下：

LigerUI Tree的更多相关文章

  1. C#结合Jquery LigerUI Tree插件构造树

    Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单.呵呵 废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法 1 ...

  2. ligerUI Tree 实例 代码

    http://www.oschina.net/code/snippet_1762525_47819#68813

  3. Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能

    LigerUI框架Tree于Tab标签动态使用,当点击Tree后动态创建Tab标签,和通常用的iframe框架功能类似 Tree中的关键代码 //Tree初始化 $("#tree1" ...

  4. LigerUI下拉选择列表LigerComboBox中tree的节点初始化默认选中的问题

    问题描述 用后台的Json传送tree的数据 前端用js方法来控制选中节点 此方法存在bug 实例: bug问题:无论设置的默认选中值是多少个,前台checkbox最多只显示选中一个,但是内容框中显示 ...

  5. jQuery LigerUI V1.2.2 (包括API和全部源码) 发布

    前言 这次版本主要对树进行了加载性能上面的优化,并解决了部分兼容性的问题,添加了几个功能点. 欢迎使用反馈. 相关链接 API:         http://api.ligerui.com/ 演示地 ...

  6. LigerUI学习使用

    LigerUI有如下主要特点: 使用简单,轻量级 控件实用性强,功能覆盖面大,可以解决大部分企业信息应用的设计场景 快速开发,使用LigerUI可以比传统开发减少极大的代码量 易扩展,包括默认参数.表 ...

  7. ligerui多选动态下拉框

    今天下午要求做一个支持多选的,并且插件用ligerui的,当时有点小懵了,因为没用过ligerui啊!而且按照API的介绍,我做得也很好啊,可是为什么就是显示不出来?据说有位小神比较厉害,请教来之,两 ...

  8. 实用的树形菜单控件tree

     jQuery plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree  jsTree ...

  9. [xUI] ligerUI开发框架简介和搭建

    ligerUI开发者:谢略,网名daomi API:         http://api.ligerui.com/ 演示地址:  http://demo.ligerui.com/ 源码下载:  ht ...

随机推荐

  1. cocos2d 3.X Shader 变暗和变灰

    转自http://www.waitingfy.com/archives/1741 1.为了节约一张图引发的Shader使用  我们注意到这个游戏当中经常使用一些按钮,美术会给两张图,一张稍微暗点,表示 ...

  2. [UCSD白板题] Fractional Knapsack

    Problem Introduction Given a set of items and total capacity of a knapsack,find the maximal value of ...

  3. 《《我是一只IT小小鸟》》读后感

    接触IT也已经半年了,在这半年我没有充足的时间去了解IT这个行业,在大学生职业规划课程上,老师推荐了<<我是一只IT小小鸟>>这本书,我才发现IT这个行业并不是想象的那么无趣, ...

  4. ubuntu网络配置&&ubuntu apt-get错误解决办法

    网络配置: 方式1:网卡通过DHCP自动获取IP地址 $ sudo gedit /etc/network/interfaces # 修改文件/etc/network/interfaces如下文 #-- ...

  5. windows编程：第一个windows程序

    #define WIN32_LEAN_AND_MEAN #include <windows.h> #include <windowsx.h> #include <math ...

  6. Linux网卡bounding详解

    多块网卡绑在一起,作为一个网卡用,实现负载均衡和提高带宽   linux双网卡绑定一个IP地址,实质工作就是使用两块网卡虚拟为一块,使用同一个IP地址,是我们能够得到更好的更快的服务.其实这项技术在 ...

  7. 统一SDK接入(U8SDK)——总体思路和架构

    题记:很多做游戏开发的人,估计都或多或少地接过渠道SDK,什么UC,当乐,91,小米,360……据统计国内市场当前不下于100家渠道,还包括一些没有SDK的小渠道.每个渠道SDK接入的方法呢,多是大同 ...

  8. iOS 时间戳的转换

    在开发iOS程序时,有时候需要将时间格式调整成自己希望的格式,这个时候我们可以用NSDateFormatter类来处理.例如: //实例化一个NSDateFormatter对象 NSDateForma ...

  9. asp.net导出dbf报错“未在本地计算机上注册“VFPOLEDB”提供程序。”

    导出dbf文件报错,提示“未在本地计算机上注册“VFPOLEDB”提供程序.” 可以尝试一下方法: 方法一:下载VFPOLEDBSetup.msi 安装 如果方法一不行:继续方法二:下载vfp9.0 ...

  10. mongoDB研究笔记：写关注

    对于某些应用程序来说,写关注是重要的.它能判断哪些写操作成功写入了,哪些失败了,对于失败的操作,驱动程序能返回错误,由应用程序决定怎么处理.如果没有写关注,应用程序发送一个写操作到socket后,就不 ...