zTree和SweetAlert插件初探

時間 2019-12-15

標籤 ztree sweetalert 插件初探简体版

原文原文鏈接

1.zTree插件簡介

zTree是一個依靠 jQuery實現的多功能「樹插件」。優異的性能、靈活的配置、多種功能的組合是zTree最大優勢。專門適合項目開發，尤爲是樹狀菜單、樹狀數據的Web顯示、權限管理等等。javascript

官網地址：http://www.treejs.cn/v3/main.php#_zTreeInfophp

2.zTree資源管理實例

⑴ 引入zTree的js和css文件：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樹。html

 <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樹：java

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

⑷ 給Ztree賦初值的java代碼: node

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代碼:jquery

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;
    }

}

View Code

⑹ 示例頁面resourceInfo.hbs代碼:web

{{#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}}

View Code

3.zTree資源管理實例效果圖

4.SweetAlert插件簡介

SweetAlert是一款不須要jQuery支持的原生js提示框，風格相似bootstrap。它的提示框不只美麗動人，而且容許自定義，支持設置提示框標題、提示類型、內容展現圖片、確認取消按鈕文本、點擊後回調函數等。ajax

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

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");
        });
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。