zree插件目录基础使用

1.引入ztree插件文件：

jquery包

ztree包：

    jquery.ztree.all.min.js

    jquery.ztree.core.js

    jquery.ztree.ecedit.js

    jquery.ztree.excheck.js

layui包

2.ztree配置

var setting = {
    view: {
        addHoverDom: addHoverDom, //节点添加操作按钮
        removeHoverDom: removeHoverDom, //删除操作按钮
        selectedMulti: false
    },
    check: {
        enable: true,//是否启用复选框
        chkStyle:"checkbox", //复选框类型
        chkboxType: { "Y": "", "N": "" }
    },
    data: {
        simpleData: { //简单数据模式 idKey: "id",pIdKey: "IPARENTID",rootPId: null
            enable: true
        }
    },
    edit: {
        enable: true,
        showRemoveBtn:setRemoveBtn,//显示删除按钮
        showRenameBtn:true, //显示修改按钮
        removeTitle:"删除节点",
        renameTitle:"重命名"
    },
    callback: {//回调方法相关
           onCheck: false,
           beforeRename: zTreeBeforeRename, //重命名前执行的方法
           beforeRemove: zTreeBeforeRemove,
           onClick: zTreeOnClick         //单击tree时的方法
    }
};

3.初始化展现树结构：

var user_id = {{ request.session.user_id }};
$.ajax({
    type: "get",
    url: "/mulu/catalog/?user_id="+user_id,
    dataType: "json",
    success: function (data){
        $.each(data.data, function (i, item) {
            if (data.code === 0) {
                zNodes.push({id: item.id, pId: item.parent_id, name: item.name, open: true})
            }
        });
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    }
});

4.增加加号按钮，添加数据

var newCount = 1;

function addHoverDom(treeId, treeNode) {
    //第三级不显示添加按钮
    var level = treeNode.level + 1;
    if (level == 3) {
        return false;
    }
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
        + "' title='add node' οnfοcus='this.blur();'></span>";
    sObj.after(addStr);

  //添加目录节点
    var btn = $("#addBtn_" + treeNode.tId);
    if (btn) btn.bind("click", function () {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var jsondata = {"pid":treeNode.id};
        var name = treeNode.name;
        $.ajax({
            type: "put",
            url: "/mulu/catalog/",
            data:jsondata,
            dataType: "json",
            success: function (data){
                if (data.code === 0){
                    layer.msg('新增ok');
                    zTree.addNodes(treeNode, {id: data.data[0].id, pId: treeNode.id, name: "新增项" + (newCount++)})
                }else {
                    layer.msg('数据异常，请联系管理员！')
                }
            }
        });
        return false;
    });
};

5.删除按钮及设置

function removeHoverDom(treeId, treeNode) {
    $("#addBtn_" + treeNode.tId).unbind().remove();
};

//根节点不显示删除按钮
//判断是否为超级管理员level_id=0，是则显示删除。
var level_id = {{ request.session.level_id }}
function setRemoveBtn(treeId, treeNode) {
    if (level_id ) {
        if (treeNode.level === 0) {//根节点不能删除
            return false;
        } else {
            return true;
        }
    }else {
        return true;
    }
};

//删除前回掉函数

function zTreeBeforeRemove(treeId, treeNode) {

    if (confirm("确定删除吗？")) {
        //alert(treeNode.id); 当前目录节点的id
        var jsondata = {'id': treeNode.id, 'level': treeNode.level};
        $.ajax({
            type: "delete",
            url: "/mulu/catalog/",
            data:jsondata,
            dataType: "json",
            success: function (data){
                if (data.code === 0){
                    layer.msg('删除成功！');
                    return true;
                }else {
                    layer.alert('有资源的目录无法删除！', {end: function () {
                        location.reload()
                    }})

                }
            }
        });
    } else {
        return false;
    }
}

6.修改节点名称：

//修改节点名称
function zTreeBeforeRename(treeId, treeNode, newName) {
    var jsondata = {'id': treeNode.id, 'name': newName, 'level': treeNode.level}
    $.ajax({
        type: "patch",
        url: "/mulu/catalog/",
        data:jsondata,
        dataType: "json",
        success: function (data){
            if (data.code === 0){
                layer.msg('修改成功！');
            }else if (data.code ===1){
                layer.alert('修改失败！请重试！',{end:function () {
                    location.reload()
                }});
            }else {
                layer.alert('目录名不能为空！',{end:function () {
                    location.reload()
                }});
            }
        }
    });
}

7.复选框选择+点击事件

function onCheck(e,treeId,treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
            nodes = treeObj.getCheckedNodes(true);
        for (var i = 0; i < nodes.length; i++) {
            layui.use(['form', 'layedit', 'laydate','element','jquery'], function() {
                var form = layui.form,
                    layer = layui.layer,
                    element = layui.element,
                    $ = layui.jquery;
                var id = nodes[i].id;
                $(document).on('click', '#btn1', function () {
                    $.post("/mulu/remove_catalog/",{'id':id},function (resp) {
                        if(resp.msg == 'success'){
                            layer.msg('删除成功');
                            location.reload()
                        }else {
                            layer.msg('删除失败！请重试')
                        }
                    })
                });
            });
{#            alert("节点id:" + nodes[i].id + "节点名称" + nodes[i].name); //获取选中节点的值#}
        }
    }