文档章节

jquery树形插件zTree使用示例

zhiqiangw
 zhiqiangw
发布于 2016/11/29 14:40
字数 296
阅读 212
收藏 0
点赞 1
评论 1

1、通过官网下载demo或者下载zTree相关的插件;

zTree官网 :https://github.com/zTree/zTree_v3

2、页面文件引入需要的zTree插件:

主要引入的对象有:ztree-metro-style.css、jquery.ztree.all.min.js、jquery.min.js。

引入示例:

<link rel="stylesheet" href="/public/static/css/ztree-metro-style.css">
<script src="/public/static/js/jquery.ztree.all.min.js"></script>
<script src="/public/static/js/jquery.min.js"></script>

3、部署js解析html位置:

<div class="layui-tab-content">
   <div class="layui-tab-item layui-show">
     <ul id="tree" class="ztree"></ul>
   </div>
</div>
<input type="hidden" id="group_id" name="id" value="{$id}">
<button class="layui-btn" id="auth-btn">授权</button>

4.js脚本文件:

<script>
    $(document).ready(function(){
        /**
         * 加载树形授权菜单
         */
        var _id = $("#group_id").val();
        var tree = $("#tree");
        var zTree;

        // zTree 配置项
        var setting = {
            check: {
                enable: true
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                showIcon: false,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootpid: ""
                },
                key: {
                    name: "title"
                }
            }
        };

        $.ajax({
            url: "GETURL",
            type: "post",
            dataType: "json",
            cache: false,
            data: {
                id: _id
            },
            success: function (data) {
                zTree = $.fn.zTree.init(tree, setting, data);
            }
        });

        /**
         * 授权提交
         */
        $("#auth-btn").on("click", function () {
            var checked_ids,auth_rule_ids = [];
            checked_ids = zTree.getCheckedNodes(); // 获取当前选中的checkbox
            $.each(checked_ids, function (index, item) {
                auth_rule_ids.push(item.id);
            });
            $.ajax({
                url: "GETURL",
                type: "post",
                cache: false,
                data: {
                    id: _id,
                    auth_rule_ids: auth_rule_ids
                },
                success: function (data) {
                    if(data.code === 1){
                        setTimeout(function () {
                            location.href = data.url;
                        }, 1000);
                    }
                    layer.msg(data.msg);
                }
            });
        });
    });
</script>

至此,一个完整的树形结构完成,如果需要对树进行其他操作可以参考官网API文档.

运行结果如

© 著作权归作者所有

共有 人打赏支持
zhiqiangw
粉丝 12
博文 191
码字总数 142634
作品 0
郑州
程序员
加载中

评论(1)

JxtPro
JxtPro
后台数据结构呢
简单灵活的 Java CMS - EasyCms

简介 Java EasyCms 使用最简单性能最高的框架,将cms系统简单到极致,灵活的栏目扩展,快速的构建普通网站 生成的静态演示站(测试): www.j4cms.com 用到的框架工具 java,servlet,guice...

姜小北 ⋅ 2017/08/02 ⋅ 0

huangdf/seezoon-framework-all

项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理系统,方便快速开发;采用常用的技术栈,降低学习成本,项目完全前后端分离,后端定义统一的接口格式,统一参数校验,统一权...

huangdf ⋅ 04/20 ⋅ 0

cjbi/wetech-admin

Wetech-Admin Wetech-Admin 是基于Maven+Spring+SpringMVC+Mybatis的轻量级后台管理系统,适用于中小型项目的管理后台,支持按钮级别的权限控制,系统具有最基本的用户管理、角色管理、资源管...

cjbi ⋅ 04/20 ⋅ 0

【视频分享】尚硅谷Java视频教程_RBAC权限实战视频教程

        本视频讲授RBAC权限模型的设计、以及在项目中的应用 。 1. 使用Maven进行项目构建 。 2. 页面设计采用响应式前端框架BootStrap 。 3. 采用多种方式展现用户数据:树形结构(z...

后端编程嘟 ⋅ 05/24 ⋅ 0

共享定制云平台 - AWCP

AWCP 是一个共享定制云平台,集成了 jflow 工作流引擎,并完成了基于钉钉的开发框架自动生成,可快速搭建基于钉钉管理系统。完成了钉钉端页面配置管理,审核审批,完成了钉钉 PC 端页面配置管...

曹勇 ⋅ 2017/10/23 ⋅ 9

权限管理系统 - OpenAuth.Net

项目采用经典DDD架构(用沃恩.弗农大神的话,其实这是DDD-Lite)思想进行开发,简洁而不简单,实用至上,并且所写每一行代码都经过深思熟虑,符合SOLID规则! 当然,如果你想学习完整的DDD框架...

李玉宝 ⋅ 2015/12/04 ⋅ 43

ztree增加子节点造成父节点id错误

ztree:v3.5.35 使用ztree的addNodes 为节点B Ajax动态添加子节点C,添加成功后,再单击节点B,函数获取的节点id为刚才新增节点C的id,不是B的id了. 这个问题哪位知道该怎么解决?...

光石头 ⋅ 06/04 ⋅ 2

如何去掉ztree的ctrl多选功能

@zTree 你好,想跟你请教个问题: 如何去掉ztree的ctrl多选功能,设置selectMulti: false 也不行

tjane ⋅ 04/20 ⋅ 0

setting.data.key.name与setting.data.key.title在什么场合使用?

@zTree 你好,想跟你请教个问题:setting.data.key.name与setting.data.key.title在什么场合使用?

flowerxuegao ⋅ 06/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从零开始搭建Risc-v Rocket环境---(1)

为了搭建Rocke环境,我买了一个2T的移动硬盘,安装的ubuntu-16.04 LTS版。没有java8,gcc是5.4.0 joe@joe-Inspiron-7460:~$ java -version程序 'java' 已包含在下列软件包中: * default-...

whoisliang ⋅ 18分钟前 ⋅ 0

大数据学习路线(自己制定的,从零开始学习大数据)

大数据已经火了很久了,一直想了解它学习它结果没时间,过年后终于有时间了,了解了一些资料,结合我自己的情况,初步整理了一个学习路线,有问题的希望大神指点。 学习路线 Linux(shell,高并...

董黎明 ⋅ 24分钟前 ⋅ 0

systemd编写服务

一、开机启动 对于那些支持 Systemd 的软件,安装的时候,会自动在/usr/lib/systemd/system目录添加一个配置文件。 如果你想让该软件开机启动,就执行下面的命令(以httpd.service为例)。 ...

勇敢的飞石 ⋅ 26分钟前 ⋅ 0

mysql 基本sql

CREATE TABLE `BBB_build_info` ( `community_id` varchar(50) NOT NULL COMMENT '小区ID', `layer` int(11) NOT NULL COMMENT '地址层数', `id` int(11) NOT NULL COMMENT '地址id', `full_......

zaolonglei ⋅ 35分钟前 ⋅ 0

安装chrome的vue插件

参看文档:https://www.cnblogs.com/yulingjia/p/7904138.html

xiaoge2016 ⋅ 38分钟前 ⋅ 0

用SQL命令查看Mysql数据库大小

要想知道每个数据库的大小的话,步骤如下: 1、进入information_schema 数据库(存放了其他的数据库的信息) use information_schema; 2、查询所有数据的大小: select concat(round(sum(da...

源哥L ⋅ 今天 ⋅ 0

两个小实验简单介绍@Scope("prototype")

实验一 首先有如下代码(其中@RestController的作用相当于@Controller+@Responsebody,可忽略) @RestController//@Scope("prototype")public class TestController { @RequestMap...

kalnkaya ⋅ 今天 ⋅ 0

php-fpm的pool&php-fpm慢执行日志&open_basedir&php-fpm进程管理

12.21 php-fpm的pool pool是PHP-fpm的资源池,如果多个站点共用一个pool,则可能造成资源池中的资源耗尽,最终访问网站时出现502。 为了解决上述问题,我们可以配置多个pool,不同的站点使用...

影夜Linux ⋅ 今天 ⋅ 0

微服务 WildFly Swarm 管理

Expose Application Metrics and Information 要公开关于我们的微服务的有用信息,我们需要做的就是将监视器模块添加到我们的pom.xml中: 这将使在管理和监视功能得到实现。从监控角度来看,...

woshixin ⋅ 今天 ⋅ 0

java连接 mongo伪集群部署遇到的坑

部署mongo伪集群 #创建mongo数据存放文件地址mkdir -p /usr/local/config1/datamkdir -p /usr/local/config2/data mkdir -p /usr/local/config3/data mkdir -p /usr/local/config1/l......

努力爬坑人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部