ztree的使用整理

Posted 2020-08-11 胡亮

/** 配置：知识点管理 */
var setting = {
    view: {
        showIcon: false,
        addDiyDom: addPrevDom,
        addHoverDom: addHoverDom,
        removeHoverDom: removeHoverDom,
        selectedMulti: false
    },
    callback: {
        beforeDrag: beforeDrag,
        beforeDrop: beforeDrop,
        beforeRemove: beforeRemove,
        beforeRename: beforeRename,
        beforeExpand: beforeExpand
    },
    edit: {
        drag: {
            isCopy: false,
            isMove: true
        },
        enable: true,
        editNameSelectAll: true,
        removeTitle: \'删除知识点\',
        renameTitle: \'修改知识点名称\',
    }
};

setting

回调函数：

/** 添加根节点前科目标记 */
function addPrevDom(treeId, treeNode) {
    if (treeNode.level == 0) {
        var aObj = $("#" + treeNode.tId + "_a");
        var prevStr = "<span>[数学]</span>";
        aObj.before(prevStr);
    }
}

/** 节点拖拽 */
function beforeDrag(treeId, treeNodes) {
    for (var i=0,l=treeNodes.length; i<l; i++) {
        if (treeNodes[i].drag === false) {
            curDragNodes = null;
            return false;
        } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
            curDragNodes = null;
            return false;
        }
    }
    curDragNodes = treeNodes;
    return true;
}
function beforeDrop(treeId, treeNodes, targetNode, moveType) {
    return targetNode ? targetNode.drop !== false : true;
}

/** 修改节点名称 */
function beforeRename(treeId, treeNode, newName) {
    if (newName.length == 0) {
        var zTree = $.fn.zTree.getZTreeObj("manageTree");
        zTree.cancelEditName();
        return false;
    }
    return true;
}

/** 删除节点 */
function beforeRemove(treeId, treeNode) {
    var _modal = $("#model-delete");
    $(".tips-delete",_modal).children("span").text(treeNode.name);
    _modal.modal("show");
    //确定按钮事件
    $("#btn-do-delete").click(function() {
        var zTree = $.fn.zTree.getZTreeObj("manageTree");
        zTree.removeNode(treeNode);
        _modal.modal("hide");
    });
    return false;
}

/** 添加鼠标经过显示编辑图标 */
var newCount = 1;
function addHoverDom(treeId, treeNode) {
    //最底层节点不能添加子节点
    if (treeNode.level > 2) {
        return;
    }
    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=\'新增子节点\' onfocus=\'this.blur();\'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_" + treeNode.tId);
    if (btn) btn.bind("click", function() {
        var zTree = $.fn.zTree.getZTreeObj("manageTree");
        zTree.addNodes(treeNode, {
            pId: treeNode.id,
            name: "新节点" + (newCount++)
        });
        return false;
    });
};
/** 移除鼠标经过事件 */
function removeHoverDom(treeId, treeNode) {
    $("#addBtn_" + treeNode.tId).unbind().remove();
};

/** 展开所有子节点 */
function beforeExpand(treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("manageTree");
    zTree.expandNode(treeNode, true, true, false);
    return false;
}