文档章节

j2ee 简单网站搭建:(十)jquery ztree 插件使用入门

b
 binux
发布于 2017/08/29 18:49
字数 1600
阅读 25
收藏 0
点赞 0
评论 0

《j2ee 简单网站搭建:(一) windows 操作系统下使用 eclipse 建立 maven web 项目》
《j2ee 简单网站搭建:(二)添加和配置 spring + spring-mvc 的 mvc 开发环境》
《j2ee 简单网站搭建:(三)在搭建好的 spring maven web 项目中加入 mybatis 访问数据库》
《j2ee 简单网站搭建:(四)将 freemaker 模板引擎作为 spring-mvc 展现层》
《j2ee 简单网站搭建:(五)使用 jcaptcha 生成验证码图片》
《j2ee 简单网站搭建:(六)使用 hibernate validation 实现 domain 层实体类验证》
《j2ee 简单网站搭建:(七)使用 shiro 结合 jcaptcha 实现用户验证登录》
《j2ee 简单网站搭建:(八)使用 jquery-validate 实现页面验证入门》
《j2ee 简单网站搭建:(九)jquery datatables + jquery ui dialog 插件使用入门》
《j2ee 简单网站搭建:(十)jquery ztree 插件使用入门》
《j2ee 简单网站搭建:(十一)ckeditor 控件使用入门》

ztree 版本 v3.5.28

一 从官方网站下载 ztree 的 css 和 js 文件,引入项目的 web 目录中
网站地址 http://www.treejs.cn/v3/main.php#_zTreeInfo

二 在 html 页面 <head> 标签中加入 css 文件

<!-- zTree CSS -->
<link rel="stylesheet" href="你的文件路径/metroStyle.css" type="text/css">

三 在 html 页面 <body> 标签内添加绑定 ztree 插件的 ul 标签,本例中 ul 标签的 id 设置为 categorytree

<ul id="categorytree" class="ztree" style="width: 100%"></ul>

四 在 html 页面 </body> 标签内添加绑定 ztree 插件 js 文件以及 javascript 代码

<script type="text/javascript" src="你的文件路径/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="你的文件路径/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src=你的文件路径/jquery.ztree.exedit.js"></script>

<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
    var zTree = $.fn.zTree.getZTreeObj("categorytree"); // 获得树对象
    // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
    var setting = {
        view : {
            selectedMulti: false, // 取消多选
            addHoverDom: addHoverDom, // 鼠标选中后显示增、改按钮
            removeHoverDom: removeHoverDom // 鼠标移除后显示增、改按钮
        },
        data :{ // 设置节点的属性值以及从服务端传送过来的数据向节点绑定的参数值
            simpleData : {
                enable : true,
                idKey : 'id', // 绑定服务端传过来的 id 参数
                pIdKey : 'pid', // 绑定服务端传过来的 pid 参数
                rootPid : 0, // 根节点的父节点 id 值
                status : 'status' // 绑定服务端传过来的 status 参数
            }
        },
        edit : { // 对节点编辑时进行的设置
            enable : true, // 允许编辑
            showRemoveBtn : false, // 是否显示 删除节点 按钮
            showRenameBtn : true, // 是否显示 修改节点内容 按钮
            renameTitle : "修改", // 如果显示 修改节点内容 按钮后,按钮上的文字显示啥
            editNameSelectAll : true, // 编辑节点名称的时候是否对名称文字全选
            // drag : { // 是否允许节点拖拽放置、复制、移动
            //     autoExpandTrigger : false,
            //     isCopy : false,
            //     isMove : false
            // }
        },
        callback: { // 设置所有的回调函数
            onRename: onRename, // 修改时调用
            onDrop: onDrop // 拖拽
        }
    };
    
    // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
    $(document).ready(function() {
        var zNodes;
        $.ajax({ // 需要调用同步方法,因此不能使用post方法,此处加载整棵树
            type:"POST",
            async:false,
            url:"get_category_tree", // 服务端获得数据的方法
            dataType : "json",
            data:null,
            success:function(result){ // 调用成功对节点进行设置
                if (result != null && result.status == true)
                    zNodes = result.data;
                
            }
        });
        zTree = $.fn.zTree.init($("#categorytree"), setting, zNodes); // 初始化树对象
    });

    function addHoverDom(treeId, treeNode) { // 在鼠标移动到节点上方时显示对节点的操作按钮并对按钮绑定处理方法
        var sObj = $("#" + treeNode.tId + "_span"); // 获得鼠标所在的节点对象
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0 || $("#startBtn_"+treeNode.tId).length>0) return; // 如果鼠标所在的节点正在编辑或者添加按钮已存在则以下不执行
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='添加' onfocus='this.blur();'></span>"; // 动态生成新增按钮
        var startStr = "<span class='button start' id='startBtn_" + treeNode.tId
                + "' title='启用' onfocus='this.blur();'></span>"; // 动态生成启用按钮
        var stopStr = "<span class='button stop' id='stopBtn_" + treeNode.tId
                + "' title='停用' onfocus='this.blur();'></span>"; // 动态生成停用按钮
        var statusStr = "<span id='statusSpan_" + treeNode.tId + "' title='状态'>[" + (treeNode.status ? "启用" : "停用") + "]</span>"; // 动态生成停用按钮
        sObj.after(stopStr).after(startStr).after(addStr).after(statusStr); // 在鼠标所在节点后显示添加按钮、启动按钮和其它操作按钮

        // - - - 新增按钮及处理方法 - - - //
        var addBtn = $("#addBtn_"+treeNode.tId); // 获得添加按钮对象并绑定点击事件
        if (addBtn) addBtn.bind("click", function(){ // 添加按钮点击后的操作
            var newNodeName = Math.round(Math.random()* 99999999).toString(); // 新增的节点名称
            $.ajax({ // 需要调用同步方法,因此不能使用post方法,这里需要添加节点
                type : "POST",
                async : false,
                url : "add_tree_node",
                dataType : "json",
                data : {name: newNodeName, parentId: treeNode.id, parentName: treeNode.name},
                success:function(result){
                    if (result != null && result.status == true) {
                        $('#div_alert').text("节点添加成功!").prop('class', 'alert alert-success'); // 设置提示信息并改变提示框样式为成功
                        // 返回值为数据库中的自增ID
                        zTree.addNodes(treeNode, {id: result.data, pId: treeNode.id, name: newNodeName, status: 1}); // 在ztree中添加节点,因为在设置中将treeNode 的name设置为nameWithStatus,因此这里要传这个名称
                    }
                    else $('#div_alert').text("节点添加失败!").prop('class', 'alert alert-warning'); // 设置提示信息并改变提示框样式为警告
                }
            });
            return false;
        });

    function removeHoverDom(treeId, treeNode) { // 鼠标移除后清除临时生成的对象
        $("#addBtn_"+treeNode.tId).unbind().remove(); // 鼠标移动后删除添加按钮所有内容
        $("#startBtn_"+treeNode.tId).unbind().remove(); // 鼠标移动后删除启用按钮所有内容
        $("#stopBtn_"+treeNode.tId).unbind().remove(); // 鼠标移动后删除停用按钮所有内容
        $("#statusSpan_"+treeNode.tId).unbind().remove(); // 鼠标移动后删除状态框内容
    }

    function onRename(e, treeId, treeNode, isCancel) { // 修改名称
        var parentNode = treeNode.getParentNode();
        $.ajax({ // 需要调用同步方法,因此不能使用post方法,这里需要添加节点
            type : "POST",
            async : false,
            url : "modify",
            dataType : "json",
            data : {id: treeNode.id, name: treeNode.name, parentId: (parentNode != null ? parentNode.id : 0), parentName: (parentNode != null ? parentNode.name : "[- 无 -]")},
            success:function(result){
                if (result != null && result.status == true) {
                    $('#div_alert').text("修改成功!").prop('class', 'alert alert-success'); // 设置提示信息并改变提示框样式为成功
                    isCancel = false;
                }
                else {  // 设置提示信息并改变提示框样式为警告
                    $('#div_alert').text("修改失败!").prop('class', 'alert alert-warning');
                    isCancel = true;
                }
            }
        });
        return isCancel;
    }

    function onDrop(event, treeId, treeNodes, targetNode, moveType) { // 调整树形节点的位置
        $.ajax({ // 需要调用同步方法,因此不能使用post方法,这里需要添加节点
            type : "POST",
            async : false,
            url : "modify",
            dataType : "json",
            data : {id: treeNodes[0].id, name: treeNodes[0].name, parentId: (targetNode != null ? targetNode.id : 0), parentName: (targetNode != null ? targetNode.name : "[- 无 -]")},
            success:function(result){
                if (result != null && result.status == true) {
                    $('#div_alert').text("位置调整修改成功!").prop('class', 'alert alert-success'); // 设置提示信息并改变提示框样式为成
                }
                else {  // 设置提示信息并改变提示框样式为警告
                    $('#div_alert').text("位置调整修改失败!").prop('class', 'alert alert-warning');
                }
            }
        });
    };
</script>

 

© 著作权归作者所有

共有 人打赏支持
b
粉丝 1
博文 28
码字总数 49010
作品 0
兰州
程序员
简单灵活的 Java CMS - EasyCms

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

姜小北 ⋅ 2017/08/02 ⋅ 0

缅甸银河国际开户13170533331

解决这个问题涉及到两个方面的问题: 配置问题 、引入静态文件问题 1、配置问题 web.xml配置的DispatchServlet如下: [html] view plain copy springmvc org.springframework.web.servlet.D...

银河国际 ⋅ 05/26 ⋅ 0

共享定制云平台 - AWCP

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

曹勇 ⋅ 2017/10/23 ⋅ 9

cjbi/wetech-admin

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

cjbi ⋅ 04/20 ⋅ 0

Java 代码生成器 - InfinityJEEEU

无垠式 Java 代码生成器 JEEEU 版 项目介绍 这是最轻量级的代码生成器,生成物大概占用7.5M数据大小。 采用Servlet,JSP, JSON, Easy UI等简单技术实现,是标准的Model2的MVC设计模式的架构。...

火箭船 ⋅ 05/28 ⋅ 0

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

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

后端编程嘟 ⋅ 05/24 ⋅ 0

JavaWeb18-HTML篇笔记(二)

1.1.1.1 搭建开发环境: 【步骤一】:引入开发jar包 【步骤二】:创建包结构: 【步骤三】:引入工具类和配置文件: 【步骤四】:编写通用的Servlet: 1.1.1.2 用户模块的代码实现: 【创建数据...

我是小谷粒 ⋅ 06/06 ⋅ 0

无垠式代码生成器 SimpleJEE 版 - InfinitySimpleJEE

这是最轻量级的代码生成器,生成物只有大约6.5兆。 采用Servlet,JSP, JSON, JQuery等简单技术实现,是标准的Model2的MVC设计模式的架构。 程序员的瑞士军刀。是喜欢使用低配服务器的程序员和...

火箭船 ⋅ 05/25 ⋅ 0

JavaWeb15-HTML篇笔记(二)

1.1.1.1 步骤分析: Ø 创建一个用户表 Ø 设计一个注册页面: Ø 在用户名文本框上绑定一个事件:onblur Ø 在JS的函数中使用AJAX异步向Servlet发送请求. Ø 在Servlet中接收参数-->调用业务层...

我是小谷粒 ⋅ 06/01 ⋅ 0

Jquery+Ajax+Bootstrap Paginator实现分页的拼接

效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js jsp页面代码,页面两个div,一个用于拼接html,一个放分页按钮代码 js代码: 测试通道,如果想要测试完整效果,css源...

祈澈姑娘 ⋅ 06/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

C++难点解析之const修饰符

C++难点解析之const修饰符 c++ 相比于其他编程语言,可能是最为难掌握,概念最为复杂的。结合自己平时的C++使用经验,这里将会列举出一些常见的难点并给出相应的解释。 const修饰符 const在c...

jackie8tao ⋅ 昨天 ⋅ 0

聊聊spring cloud netflix的HystrixCommands

序 本文主要研究一下spring cloud netflix的HystrixCommands。 maven <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-clo......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部