JQuery ZTree简单使用

2017-01-07 08:43:04来源:CSDN作者:q547550831人点击

JQuery ZTree简单使用

@(JavaScript)[jQuery, ztree, 入门]

  • JQuery ZTree简单使用
    • 基本概述
    • 案例
      • 使用标准json数据构造ztree
      • 使用简单json数据构造ztree
      • 发送ajax请求获取动态json数据构造ztree
        • json内容
        • html片段
      • 为ztree节点绑定事件动态添加选项卡
        • json内容
        • html文件

基本概述

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管理等等。

zTree 是开源免费的软件(MIT 许可证)。在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多的 zTree 扩展功能库,让 zTree 更加强大。

——参考《百度百科》

官网:zTree官网

PS:zTree的官方API文档和demo挺详细的,值得一读。

案例

使用标准json数据构造ztree

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html>     <head>          <meta charset="UTF-8">          <title>ztree测试</title>          <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">          <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">          <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>          <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>          <link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">          <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>          <script type="text/javascript">              $(function(){                   $("#btn").click(function() {                        var isExists = $("#et").tabs("exists", "标题");                        if(isExists) {                             $("#et").tabs("select","标题");                        } else {                             $("#et").tabs("add", {                                  title:"标题",                                  closable:true,                                  iconCls:"icon-save",                                  content:"<iframe frameborder='no' height='100%' width='100%' src='3-tabs.jsp'></iframe>"                             });                        }                   });              });          </script>          <!-- 使用标准json数据构造ztree -->          <script type="text/javascript">              $(function() {                   var setting = {};                   var zNodes = [                                 {name:'结点1',children:[                                                       {name:'结点11'},                                                       {name:'结点12'}                                                       ]},                                 {name:'结点2'},                                 {name:'结点3'}                                 ];                   $.fn.zTree.init($("#ztree1"), setting, zNodes);              });          </script>     </head>     <body class="easyui-layout">          <!-- 分为五个区域 -->          <div style="height: 100px;" data-options="region:'north'">北部区域</div>          <div style="width: 200px;" data-options="region:'west'">              <div class="easyui-accordion" data-options="fit:true">                   <div data-options="iconCls:'icon-save'" title="系统菜单">                        <a id="btn" class="easyui-linkbutton">按钮</a>                   </div>                   <div data-options="iconCls:'icon-remove'" title="业务菜单">                        <ul id="ztree1" class="ztree"></ul>                   </div>                   <div data-options="iconCls:'icon-remove'" title="功能菜单">内容3</div>                   <div data-options="iconCls:'icon-remove'" title="非功能菜单">内容4</div>              </div>          </div>          <div style="" data-options="region:'center'">              <div id="et" class="easyui-tabs" data-options="fit:true">                   <div data-options="iconCls:'icon-save', closable:true" title="系统菜单">内容1</div>                   <div data-options="iconCls:'icon-remove'" title="业务菜单">内容2</div>              </div>          </div>          <div style="width: 100px;" data-options="region:'east'">东部区域</div>          <div style="height: 50px;" data-options="region:'south'">南部区域</div>     </body></html>

使用简单json数据构造ztree

           <div data-options="iconCls:'icon-remove'" title="功能菜单">                <ul id="ztree2" class="ztree"></ul>           </div>  <!-- 使用简单json数据构造ztree -->  <script type="text/javascript">      $(function() {           var setting = {                data: {                     simpleData: {                          enable: true                     }                }           };           var zNodes = [              {"id":1, "pId":0, "name":"test1"},              {"id":11, "pId":1, "name":"test11"},              {"id":12, "pId":1, "name":"test12"},              {"id":111, "pId":11, "name":"test111"},              {"id":2, "pId":0, "name":"test2"},              {"id":3, "pId":0, "name":"test3"},              {"id":31, "pId":2, "name":"test31"}          ];           $.fn.zTree.init($("#ztree2"), setting, zNodes);      });  </script>

发送ajax请求获取动态json数据构造ztree

json内容

[        { "id":"11", "pId":"0", "name":"菜单1"},        { "id":"111", "pId":"11", "name":"菜单11",  "page":"xx.action"},        { "id":"112", "pId":"11", "name":"菜单12","page":"xx.action"},        { "id":"113", "pId":"11", "name":"菜单13", "page":"xx.action"},        { "id":"114", "pId":"11", "name":"菜单14","page":"xx.action"},        { "id":"12", "pId":"0", "name":"菜单2"},        { "id":"121", "pId":"12", "name":"菜单21" ,"page":"xx.action"},        { "id":"122", "pId":"12", "name":"菜单22" ,"page":"xx.action"},        { "id":"123", "pId":"12", "name":"菜单23" ,"page":"xx.action"},        { "id":"13", "pId":"0", "name":"菜单3"},        { "id":"131", "pId":"13", "name":"菜单31","page":"xx.action"},        { "id":"132", "pId":"13", "name":"菜单32","page":"xx.action"}]

html片段

           <div data-options="iconCls:'icon-remove'" title="非功能菜单">                <ul id="ztree3" class="ztree"></ul>           </div>  <!-- 发送ajax请求获取动态json数据构造ztree -->  <script type="text/javascript">      $(function() {           var setting = {                data: {                     simpleData: {                          enable: true                     }                }           };           $.ajax({                url:'${pageContext.request.contextPath}/json/menu.json',                type:'get',                data:'',                dataType:'json',                success:function (data) {                     $.fn.zTree.init($("#ztree3"), setting, data);                }           });      });  </script>

为ztree节点绑定事件动态添加选项卡

json内容

[        { "id":"11", "pId":"0", "name":"菜单1"},        { "id":"111", "pId":"11", "name":"菜单11",  "page":"xx.action"},        { "id":"112", "pId":"11", "name":"菜单12","page":"xx.action"},        { "id":"113", "pId":"11", "name":"菜单13", "page":"xx.action"},        { "id":"114", "pId":"11", "name":"菜单14","page":"xx.action"},        { "id":"12", "pId":"0", "name":"菜单2"},        { "id":"121", "pId":"12", "name":"菜单21" ,"page":"xx.action"},        { "id":"122", "pId":"12", "name":"菜单22" ,"page":"xx.action"},        { "id":"123", "pId":"12", "name":"菜单23" ,"page":"xx.action"},        { "id":"13", "pId":"0", "name":"菜单3"},        { "id":"131", "pId":"13", "name":"菜单31","page":"xx.action"},        { "id":"132", "pId":"13", "name":"菜单32","page":"xx.action"}]

html文件

           <div data-options="iconCls:'icon-save'" title="ztree事件">                <ul id="ztree4" class="ztree"></ul>           </div>  <!-- 为ztree节点绑定事件动态添加选项卡 -->  <script type="text/javascript">      $(function() {           var setting = {                data: {                     simpleData: {                          enable: true                     }                },                callback: {                     onClick: function(event, treeId, treeNode) {                          if(treeNode.page != undefined) {                              var isExists = $("#et").tabs("exists", treeNode.name);                              if(isExists) {                                   $("#et").tabs("select", treeNode.name);                              } else {                                   $("#et").tabs("add", {                                        title:treeNode.name,                                        closable:true,                                        iconCls:"icon-edit",                                        content:"<iframe frameborder='no' height='100%' width='100%' src='"+ treeNode.page +"'></iframe>"                                   });                              }                          }                     }                }           };           $.ajax({                url:'${pageContext.request.contextPath}/json/menu.json',                type:'get',                data:'',                dataType:'json',                success:function (data) {                     $.fn.zTree.init($("#ztree4"), setting, data);                }           });      });  </script>

相关文章

    无相关信息

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台