ZTree tool class summary, including: add, edit and delete nodes, and submit to the background

Related reading:

Listen to switch switch switch in X-admin2.2, get attribute value and change status

When Spring Boot integrates X-admin2.2, the Layui Font Icon fails to display normally or the solution to the problem of garbled code

X-admin2.2 form submission method and precautions

Error resolving template of Spring Boot

Introduced in Maven project net.sf.json.JSONObject depends on jar package

Recently based on Spring Boot+X-admin2.2 (LayUi) + framemark is an open-source background management system, in which the department management part needs to use the attribute menu to sort out the use tool class of ZTree for your reference.

You can add the right side if you need the full function code official account "Ten point data" acquisition.

The code is as follows:

var ZTreeUtils = {};
(function(ZTreeUtils) {
    var nodeId = null;// ID of the currently clicked node
    var nodeName = null;// Name of the currently clicked node
    var addNodeUrl = null;// The background URL called when adding a node;
    var delNodeUrl = null;// The URL called when the node is deleted;
    var treeId = null;// The ID attribute value of the tree label of the current operation;
    var table = null;
    var tableIdValue = null;
    ZTreeUtils.tree = function(nodeUrl, adNodeUrl, deNodeUrl, treeId,
            tableObject, tableId) {
        table = tableObject
        tableIdValue = tableId
        addNodeUrl = adNodeUrl;
        delNodeUrl = deNodeUrl;
        treeId = treeId;
        var setting = {
            view : {
                selectedMulti : false
            },
            check : {
                enable : false
            },
            data : {
                simpleData : {
                    enable : true
                }
            },
            edit : {
                enable : false
            },
            callback : {
                onClick : ZTreeUtils.onClick
            }
        };
        var result = Ajaxget.excute(nodeUrl, false, null, false);
        $(document).ready(function() {
            $.fn.zTree.init($("#" + treeId), setting, result.data);
        });
    }
    //Click on the node 
    ZTreeUtils.onClick = function(e, treeId, treeNode) {
        nodeId = treeNode.id;
        nodeName = treeNode.name;
        ("#nodeId").val(nodeId);
        table.reload(tableIdValue, { // Here is the initialization id mentioned above
            where : {
                nodeId : nodeId
            }
        });
    }
    // Add nodes;
    ZTreeUtils.addNode = function() {
        if (ZTreeUtils.isClick()) {
            xadmin.open('New node', addNodeUrl + "?id=0" + "&parentId=" + nodeId,
                    700, 305);
        }
    }

    // Edit node;
    ZTreeUtils.editNode = function() {
        // addNodeUrl: background request URL;
        if (ZTreeUtils.isClick()) {
            xadmin.open('edit[' + nodeName + ']node', addNodeUrl + "?id=" + nodeId
                    + "&parentId=0", 700, 305);
        }
    }
    // Delete a node;
    ZTreeUtils.delNode = function() {
        // delNodeUrl: background request URL;
        var ids = [];
        if (ZTreeUtils.isClick()) {
            ids.push($("#nodeId").val());
            layer.confirm('Confirm to delete[' + nodeName + ']Node?', function(index) {
                data = {};
                data["id"] = ids.join(',');// Array to string;
                result = Ajaxget.excute(delNodeUrl, false, data, true)// Send synchronization request and submit data to the background;
                if (result['sucess'] == "true" || result['sucess'] == true) {// Send asynchronous data deletion
                    window.location.reload();// Refresh current page
                    layer.msg('Deleted[' + nodeName + ']node!', {
                        icon : 1,
                        time : 2000
                    });
                }
            });
        }
    }
    ZTreeUtils.isClick = function() {
        var nodeId = ("#nodeId").val();
        if (nodeId == null || nodeId == "" || nodeId == undefined) {
            layer.msg("Please select the Department node to be processed ", {
                icon : 6,
                time : 2000
            });
            return false;
        } else {
            return true;
        }
    }
})(ZTreeUtils);

Ajax Submit tool class code as follows:

var Ajaxget = {};
(function(Ajaxget) {
          Ajaxget.excute = function(url, async, values, toJson) {
        console.log(url);
        console.log(values);
        var data = {};
        $.ajax({
            type : "GET",
            async : async,// It is required to be a Boolean type parameter. The default setting is true. All requests are asynchronous. If you need to send a synchronization request, set this option to false. Note that the synchronization request will lock the browser and the user must wait for the request to complete for other operations to be performed.
            url : url,
            data : values,
            dataType : "json",
            success : function(result) {
                // $('× resText').empty(); / / clear all contents in resText
                data = result;
                console.log(data);
            },
            error : function(result) {
                data = result;
                console.log(data);
            }
        });
        if (toJson == true)// Format json strings as json objects
            data = JSON.parse(data);
        return data;
    };
})(Ajaxget);

The final effect is as follows:

It has the following functions:

1: Add, edit and delete tree nodes;
2: When clicking the tree node, refresh the user list on the right;
3: Add, edit and delete data in the user list on the right;
4: Query, export and print of users;
#X-admin2.2  #Spring Boot  #ZTree  #LayUi

Tags: Front-end JSON Spring Attribute Maven

Posted on Tue, 02 Jun 2020 07:52:08 -0700 by genecide