zTree树插件--树形菜单

使用 ztree插件,制作树形菜单

zTree 是一个依靠 jQuery实现的多功能 树插件。优异的性能、灵活的配置、多种功能的组合是zTree 最大优点

 

下载 ztree 3.5.02版本

zTree树插件--树形菜单_第1张图片 

api 文档

css 样式

demo 案例

js 核心类库文件

 

all.js = core + check + edit + hide  开发中只需要引入all.js

 

 

在页面引入 ztree

<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js">script>

<link rel="stylesheet" type="text/css" 

href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css"/>

 

案例一:标准数据tree

1、 在显示树位置写

    标签

    <ul id="basicTree" class="ztree">ul>

    2、 通过js编写setting对象

    //设置树参数

    var setting = {};

    3、 设置树节点数据

    //数据

    varzNodes = [

    {"name":"菜单一"},//每个{} 就是一个节点

    {"name":"菜单二"}

    ];

    4、初始化树

    //初始化树

    $.fn.zTree.init($("#basicTree"), setting, zNodes);

     

    复杂树

    zTree树插件--树形菜单_第2张图片 

    问题:标准数据树,不适用大数据的树结构

     

    案例二:简单数据ztree

    1、 在显示ztree位置定义ul

    <ul id="simpleTree" class="ztree">ul>

     

    2、 设置ztree参数setting

    //设置树参数

    varsetting = {

    data : {

    simpleData : {

    enable : true

    }

    }

    };

    3、 树节点数据

    //数据

    varzNodes = [

        // id 代表本节点编号,pId代表父节点编号

    {"id":"1","pId":"0","name":"菜单一"},

    {"id":"2","pId":"0","name":"菜单二"}

    ];

     

    4、 初始化树

    //初始化树

    $.fn.zTree.init($("#simpleTree"), setting, zNodes);

     

    复杂树

    zTree树插件--树形菜单_第3张图片 

     

    通过url属性,完成树节点跳转

    通过icon属性,定制节点图标

你可能感兴趣的:(js;jquery)