1.zTree插件简介

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

官网地址：http://www.treejs.cn/v3/main.php#_zTreeInfo

2.zTree资源管理实例

⑴ 引入zTree的js和css文件：

 <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
 <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
 <link rel="stylesheet" href="/assets/scripts/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" />

⑵ zTree的页面元素：通过读取隐藏的Input输入框中传递的JSON字符串初始化zTree树。

 <input type="hidden" id="zTreeNodes" value="{{_DATA_.ztreeNodes}}" />
 <span class="resourceSpan" >父资源<label style="color:#ff0000;">*</label>：</span>
 <div id="parentResource" class="ztree"></div>

⑶ js简单初始化zTree树：

var zNodesStr = document.getElementById("zTreeNodes").value;
var zNodes = JSON.parse(zNodesStr);
$.fn.zTree.init($("#parentResource"), setting, zNodes);

⑷ 给Ztree赋初值的java代码:

public UserResourceDTO initNewResources() {
    List<UsersResource> resourceList = new ArrayList<UsersResource>();
    resourceList = usersResourceService.getAllResource();
    JSONArray jsonNodes = new JSONArray();
    for (UsersResource tempRes : resourceList) {
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("id", tempRes.getId());
        jsonObject.put("pId", tempRes.getParentId());
        jsonObject.put("name", tempRes.getName());
        if (tempRes.getParentId() == 0) {
        jsonObject.put("checked", true);
        jsonObject.put("open", true);
        } else {
        jsonObject.put("open", false);
        }
        jsonNodes.add(jsonObject);
    }
    UserResourceDTO userResourceDTO = new UserResourceDTO();
    userResourceDTO.setZtreeNodes(jsonNodes.toString());
 
    return userResourceDTO;
    }

⑸ UserResourceDTO代码:

package com.ouc.mkhl.platform.usersAuth.dto;
 
import java.io.Serializable;
 
//RBAC权限管理-资源信息
public class UserResourceDTO implements Serializable {
 
    private static final long serialVersionUID = -889200123123123L;
 
    private Integer id;   //资源Id
 
    private String name;   //资源名称
 
    private String description;   //资源描述
 
    private String url;  //链接地址
 
    private String type;  //资源类型：0-URL资源，1-组件资源
 
    private String status;  //状态：0-隐藏，1-展示
 
    private String code;  //标识码
 
    private String configuration;  //配置项
 
    private String moduleName;  //模块名称
 
    private Integer orderIndex;   //排序号
 
    private Integer parentId;  //父资源
 
    private String ztreeNodes; // 关联资源结点
 
    public Integer getId() {
    return id;
    }
 
    public void setId(Integer id) {
    this.id = id;
    }
 
    public String getName() {
    return name;
    }
 
    public void setName(String name) {
    this.name = name == null ? null : name.trim();
    }
 
    public String getDescription() {
    return description;
    }
 
    public void setDescription(String description) {
    this.description = description == null ? null : description.trim();
    }
 
    public String getUrl() {
    return url;
    }
 
    public void setUrl(String url) {
    this.url = url == null ? null : url.trim();
    }
 
    public String getType() {
    return type;
    }
 
    public void setType(String type) {
    this.type = type;
    }
 
    public String getStatus() {
    return status;
    }
 
    public void setStatus(String status) {
    this.status = status;
    }
 
    public String getCode() {
    return code;
    }
 
    public void setCode(String code) {
    this.code = code == null ? null : code.trim();
    }
 
    public String getConfiguration() {
    return configuration;
    }
 
    public void setConfiguration(String configuration) {
    this.configuration = configuration == null ? null : configuration
        .trim();
    }
 
    public String getModuleName() {
    return moduleName;
    }
 
    public void setModuleName(String moduleName) {
    this.moduleName = moduleName == null ? null : moduleName.trim();
    }
 
    public Integer getOrderIndex() {
    return orderIndex;
    }
 
    public void setOrderIndex(Integer orderIndex) {
    this.orderIndex = orderIndex;
    }
 
    public Integer getParentId() {
    return parentId;
    }
 
    public void setParentId(Integer parentId) {
    this.parentId = parentId;
    }
 
    public void setZtreeNodes(String ztreeNodes) {
    this.ztreeNodes = ztreeNodes == null ? null : ztreeNodes.trim();
    }
 
    public String getZtreeNodes() {
    return ztreeNodes;
    }
 
}

⑹ 示例页面resourceInfo.hbs代码:

{{#component "newResource js-comp"}}
    <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="/assets/scripts/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="/assets/scripts/sweet-alert.min.js"></script>
    <script type="text/javascript" src="/assets/scripts/cookies.js"></script>
    <link rel="stylesheet" href="/assets/scripts/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/assets/styles/sweet-alert.css"/>
 
    <style>
        #resourceInfo {
            margin: 10px 100px 10px 120px;
            border: 1px solid #617775;
            background: #f5f5f5;
            width:1100px;
            height:660px;
        }
        #parentResource {
            margin: 10px auto;
            border: 1px solid #617775;
            background: #f0f6e4;
            width:1080px;
            height:160px;
            overflow-y:scroll;
            overflow-x:auto;
        }
        .resourceSpan {
            margin: 0 5px 0 20px;
        }
 
    </style>
 
    <div id="resourceInfo">
        <input type="hidden" id="zTreeNodes" value="{{_DATA_.ztreeNodes}}" />
 
        <span class="resourceSpan" style="color:#0000ff; font-weight:bold;">新建资源</span>
        <hr/>
        <span class="resourceSpan" >资源名称<label style="color:#ff0000;">*</label>：</span>
        <input type="text" id="resourceName" style="width: 875px" />
        <hr/>
        <span class="resourceSpan" >父资源<label style="color:#ff0000;">*</label>：</span>
        <div id="parentResource" class="ztree"></div>
        <hr/>
        <span class="resourceSpan" >所在模块<label style="color:#ff0000;">*</label>：</span>
        <input type="text" id="resourceModule" style="width: 880px" />
        <hr/>
        <span class="resourceSpan" >访问链接<label style="color:#ff0000;">*</label>：</span>
        <input type="text" id="resourceURL" style="width: 880px" />
        <hr/>
        <span class="resourceSpan" >资源类型<label style="color:#ff0000;">*</label>：</span>
        <select id="resourceType" style="width: 400px" >
            <option>URL资源</option>
            <option>组件资源</option>
        </select>
        <hr/>
        <span class="resourceSpan" >桌面显示<label style="color:#ff0000;">*</label>：</span>
        <select id="resourceStatus" style="width: 400px" >
            <option>是</option>
            <option>否</option>
        </select>
        <hr/>
        <span class="resourceSpan" >标识码<label style="color:#ff0000;">*</label>：</span>
        <input type="text" id="appCode" style="width: 80px" value="S00988" readonly="readonly"/>
        <input type="text" id="resourceCode" style="width: 200px" />
        <label> 为每个资源定义唯一的code(身份证)，格式为："Sxxxxx_xxxxx",若无S码，则只与填写第二空格</label>
        <hr/>
        <span class="resourceSpan" >序号<label style="color:#ff0000;">*</label>：</span>
        <input type="text" id="orderIndex" style="width: 480px" />
        <label> 排序号越小的资源显示越靠前</label>
        <hr/>
        <span class="resourceSpan">配置项：</span>
        <input type="text" id="configuration" style="width: 470px" />
        <hr/>
        <span class="resourceSpan">描述：</span>
        <input type="text" id="description" style="width: 490px" />
        <hr/>
        <span style="margin: 0 50px;"></span>
        <input id="newResource" size="12" type="button" value="创建" />
        <input id="reset" size="12" type="button" value="重置" />
        <hr/>
    </div>
 
    <SCRIPT type="text/javascript">
        var setting = {
            check: {
                enable: true,
                chkStyle: "radio",
                radioType: "all"
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
 
        $(document).ready(function(){
            var zNodesStr = document.getElementById("zTreeNodes").value;
            var zNodes = JSON.parse(zNodesStr);
            $.fn.zTree.init($("#parentResource"), setting, zNodes);
 
            var treeObj = $.fn.zTree.getZTreeObj("parentResource");
 
            $("#newResource").click(function() {
                var nodes = treeObj.getCheckedNodes(true);
                var parentId = nodes[0].id;   //资源父id
 
                var name = document.getElementById("resourceName").value; //资源名称
                if (name == "") {
                    sweetAlert("资源名称不能为空！");
                    return;
                }
                var moduleName = document.getElementById("resourceModule").value; //模块名称
                if (moduleName == "") {
                    sweetAlert("模块名称不能为空！");
                    return;
                }
                var resourceURL = document.getElementById("resourceURL").value; //访问链接
                if (resourceURL == "") {
                    sweetAlert("访问链接不能为空！");
                    return;
                }
                var resourceTypeStr = document.getElementById("resourceType").value; //资源类型
                var resourceType = 0;
                if (resourceTypeStr == "组件资源") {
                    resourceType = 1;
                } else {
                    resourceType = 0;
                }
                var resourceStatusStr = document.getElementById("resourceStatus").value; //桌面显示
                var resourceStatus = 1;
                if (resourceStatusStr == "否") {
                    resourceStatus = 0;
                } else {
                    resourceStatus = 1;
                }
                var resourceCodeStr = document.getElementById("resourceCode").value;
                var resourceCode = "";
                if (resourceCodeStr == "") {
                    sweetAlert("标识码不能为空！");
                    return;
                } else {
                    var codeRegex = /^[a-zA-Z0-9_]{1,}$/;
                    if(!codeRegex.exec(resourceCodeStr)){
                        sweetAlert("警告", "标识码格式非法！只能是字母或字母和数字的组合!", "warning");
                        return;
                    }
                    resourceCode = "S00988_"+ resourceCodeStr;
                }
                var orderIndexStr = document.getElementById("orderIndex").value;
                var orderIndex = 0;
                if (orderIndexStr == "") {
                    sweetAlert("排序号不能为空！");
                    return;
                } else {
                    var indexRegex = /^[0-9]+$/;
                    if(!indexRegex.exec(orderIndexStr)){
                        sweetAlert("警告", "排序号格式非法！只能是非负整数!", "warning");
                        return;
                    }else{
                        orderIndex = Number(orderIndexStr);
                    }
                }
                var configuration = document.getElementById("configuration").value; //配置项
                var description = document.getElementById("description").value; //资源描述
 
                $.ajax({
                    type: "GET",
                    url: "../api/createResource",
                    dataType : "json",
                    data:{
                        name: name, description: description, url: resourceURL, type: resourceType,
                        status: resourceStatus, code: resourceCode, configuration: configuration,
                        moduleName: moduleName, orderIndex: orderIndex, parentId: parentId
                    },
                    success: function () {
                        window.location.href = "resourcesList";
                    },
                    error: function (e) {
                        sweetAlert("创建资源失败：", e, "error");
                    }
                });
            });
 
            $("#reset").click(function() {
                treeObj.checkAllNodes(false);
                $("#resourceName").attr("value",''); //清空
                $("#resourceModule").attr("value",'');
                $("#resourceURL").attr("value",'');
                $("#resourceType").attr("value",'URL资源');
                $("#resourceStatus").attr("value",'是');
                $("#resourceCode").attr("value",'');
                $("#orderIndex").attr("value",'');
                $("#configuration").attr("value",'');
                $("#description").attr("value",'');
            });
        });
    </SCRIPT>
{{/component}}

3.zTree资源管理实例效果图

4.SweetAlert插件简介

SweetAlert是一款不需要jQuery支持的原生js提示框，风格类似bootstrap。它的提示框不仅美丽动人，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。

官网地址：http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201410/jiaoben2855/

SweetAlert相关API：

参数	描述
title	提示框标题
text	提示内容
type	提示类型，有：success（成功），error（错误），warning（警告），input（输入）。
showCancelButton	是否显示“取消”按钮。
animation	提示框弹出时的动画效果，如slide-from-top（从顶部滑下）等
html	是否支持html内容。
timer	设置自动关闭提示框时间（毫秒）。
showConfirmButton	是否显示确定按钮。
confirmButtonText	定义确定按钮文本内容。
imageUrl	定义弹出框中的图片地址。

5.SweetAlert警示框实例

⑴ 引入SweetAlert的js和css文件：

<script type="text/javascript" src="/assets/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/assets/scripts/sweet-alert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/styles/sweet-alert.css"/>

⑵ js调用SweetAlert插件：

swal({
       title:"提示",
       text:"您确定要删除此角色吗？",
       type:"warning",
       showCancelButton:"true",
       showConfirmButton:"true",
       confirmButtonText:"确定",
       cancelButtonText:"取消",
       animation:"slide-from-top"
     }, function() {
        $.ajax({
            type : "GET",
            url : "../api/deleteRole?id=1"
        }).done(function(msg) {
           if(msg=="success"){
                swal("操作成功!", "已成功删除数据！", "success");
           }else{
                swal("操作失败!", "该角色已关联到组，请先将其移除组！", "warning");
           }
                window.location.href = "roleList?roleType=1";
           }).error(function() {
                swal("OMG", "删除操作失败了!", "error");
        });
});

zTree和SweetAlert插件初探的更多相关文章

弹出框sweetalert插件的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Django(序列化、SweetAlert插件)
day72 参考:https://www.cnblogs.com/liwenzhou/p/8718861.html#autoid-6-1-2 前端序列化后端序列化 day73中补充一个SweetA ...
python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾基于对象的跨表查询正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询反向查询:关联属性在A表中,所以B对象找A对象,反向查询一对多: 按字段:xx book ----- ...
{Django基础七之Ajax} 一 Ajax简介二 Ajax使用三 Ajax请求设置csrf_token 四关于json 五补充一个SweetAlert插件(了解)
Django基础七之Ajax 本节目录一 Ajax简介二 Ajax使用三 Ajax请求设置csrf_token 四关于json 五补充一个SweetAlert插件(了解) 一 Ajax简介 ...
sweetalert插件使用
内容: 1.插件介绍 2.插件使用 1.插件介绍 SweetAlert是一个JS插件,能够完美替代JS自带的alert弹出框,并且功能强大,设计优美使用这个很方便,推荐使用这个插件来写alert s ...
Bootstrap风格zTree树形菜单插件
这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示具体代码实现: <!DOCTYPE html ...
django系列6--Ajax06 使用插件,Sweet-Alert插件
使用SweetAlert插件 GitHub上的下载链接下载完成后放入django项目静态目录下,在html文件中引入静态文件,下面是script部分 $(".btn-danger" ...
【笔记】AJAX+SweetAlert插件实现删除操作
[笔记]AJAX+SweetAlert插件实现删除操作 Django AJAX SweetAlert 展示 SweetAlert 插件介绍 SweetAlert 是一个 JS 插件,能够完美替代 J ...
Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

随机推荐

Web API系列(三)统一异常处理
前面讲了webapi的安全验证和参数安全,不清楚的朋友,可以看看前面的文章,<Web API系列(二)接口安全和参数校验>,本文主要介绍Web API异常结果的处理.作为内部或者是对外提供 ...
gevent
gevent是一个基于协程的python网络库. 特性: 1.基于libev的事件循环 2.基于greenlet 轻量级的执行单元 (what is greenlet ?) 3.来自python标准 ...
Android中Context的理解及使用(二)——Application的用途和生命周期
实现数据共享功能: 多个Activity里面,可以使用Application来实现数据的共享,因为对于同一个应用程序来说,Application是唯一的. 1.实现全局共享的数据App.java继承自 ...
C#读取文件为byte[]
C#读取文件为byte[] 转载请注明出处 http://www.cnblogs.com/Huerye/ /// <summary> /// 读取程序生成byte /// </sum ...
CocoaPod 使用方法
huangyichengdeMacBook-Pro:~ Jack$ pod search AFNetworking/Library/Ruby/Site/2.0.0/rubygems.rb:250:in ...
Apache Torque入门学习
Introduction Apache Torque is an object-relational mapper for java. In other words, Torque lets you ...
db2、Oracle存储过程引号用法
在存储过程中,单引号有两个作用,一是字符串是由单引号引用,二是转义.单引号的使用是就近配对,即就近原则.而在单引号充当转义角色时相对不好理解 1.从第二个单引号开始被视为转义符,如果第二个 ...
Ubuntu下安装QQ22013
近期闲来无事,把退役的笔记本系统换成了Ubuntu. 系统安装异常的顺利,神速的安装完成.玩弄一会发现总是缺少了点什么,呆了半天发现缺少了企鹅. 由于对Ubuntu系统不了解,安装QQ着实让我头疼了半 ...
spring拦截器排除静态资源
拦截器需要排除静态资源,不然会造成资源浪费  <mvc:interceptors> <!-- 使用bean定义一个Interceptor,直接定义 ...
eclipse安装spring的插件
第一步:插件下载 http://spring.io/tools/sts/all 安装包链接第二步:插件安装第三步:安装成功检测

zTree和SweetAlert插件初探