Balkan FamilyTree JS库定制咨询：自定义按钮/链接及路由修改可行性

一、修改现有按钮及其路由 #

你可以直接在editForm.buttons配置中修改现有按钮的显示、文本、点击逻辑，替换默认路由：

比如修改编辑按钮的跳转逻辑，同时重新启用删除按钮并自定义操作：

var family = new FamilyTree(document.getElementById("tree"), {
    template: 'john',
    nodeMouseClick: FamilyTree.action.details,
    siblingSeparation: 150,
    enableSearch: false,
    nodeBinding: {
        img_0: "img",
        field_0: 'name',
        field_1: "date",
    },
    editForm: {
        titleBinding: false,
        photoBinding: "img",
        edit: false,
        generateElementsFromFields: false,
        addMore: false,
        cancelBtn: 'Закрыть',
        saveAndCloseBtn: 'Редактировать',
        elements: [
            {type: 'textbox', label: 'Полное имя', id: 'name', binding: 'fullname'},
            [
                {type: 'textbox', label: 'Дата рождения', binding: 'birthDate'},
                {type: 'textbox', label: 'Дата смерти', binding: 'deathDate'}
            ],
            [
                {type: 'textbox', label: 'Место рождения', binding: 'placebirth'},
                {type: 'textbox', label: 'Место смерти', binding: 'burialplace'},
            ],
            {type: 'textbox', label: 'Причина смерти', binding: 'reasondeath'},
        ],
        buttons: {
            edit: {
                icon: FamilyTree.icon.edit(24, 24, '#fff'),
                text: '编辑',
                hideIfEditMode: true,
                hideIfDetailsMode: false,
                // 自定义点击逻辑，替换默认路由
                onClick: function(nodeId) {
                    // 跳转到自定义编辑页面
                    window.location.href = `/person/edit/${nodeId}`;
                    // 也可以打开自定义弹窗：openCustomEditModal(nodeId);
                }
            },
            // 重新启用删除按钮并自定义逻辑
            remove: {
                icon: FamilyTree.icon.remove(24, 24, '#fff'),
                text: '删除',
                onClick: function(nodeId) {
                    if(confirm('确定要删除该人物吗？')) {
                        family.remove(nodeId);
                        // 这里可添加接口调用等逻辑
                    }
                }
            },
            share: null,
            pdf: null
        }
    }
});

二、在人物节点旁新增自定义按钮 #

要在人物圆形节点旁添加自定义按钮，可使用nodeButtons配置项，支持自定义图标、文本、点击逻辑和显示条件：

var family = new FamilyTree(document.getElementById("tree"), {
    template: 'john',
    nodeMouseClick: FamilyTree.action.details,
    siblingSeparation: 150,
    enableSearch: false,
    nodeBinding: {
        img_0: "img",
        field_0: 'name',
        field_1: "date",
    },
    // 新增节点旁的自定义按钮组
    nodeButtons: [
        {
            // 自定义SVG图标，也可用FamilyTree内置图标
            icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>',
            text: '查看详情',
            onClick: function(nodeId) {
                window.location.href = `/person/details/${nodeId}`;
            },
            // 可选：控制按钮显示条件
            visible: function(node) {
                return node.id !== 1; // 示例：ID为1的节点不显示该按钮
            }
        },
        {
            // 使用内置图标
            icon: FamilyTree.icon.link(20, 20, '#333'),
            text: '关联记录',
            onClick: function(nodeId) {
                // 打开自定义关联弹窗
                openLinkModal(nodeId);
            }
        }
    ],
    // 原有的editForm配置...
    editForm: {
        // ...你的原有代码
    }
});

三、更灵活的自定义节点内容（进阶） #

如果需要在节点内部或特殊位置添加按钮，可使用nodeRender回调手动绘制元素并绑定点击事件：

var family = new FamilyTree(document.getElementById("tree"), {
    // ...其他配置
    nodeRender: function(node, canvas, context) {
        // 计算按钮位置：节点右侧10px，垂直居中
        var btnX = node.x + node.width + 10;
        var btnY = node.y - 15;
        
        // 绘制按钮背景
        context.fillStyle = '#4CAF50';
        context.fillRect(btnX, btnY, 30, 30);
        
        // 绘制按钮文字
        context.fillStyle = '#fff';
        context.font = '16px Arial';
        context.textAlign = 'center';
        context.fillText('+', btnX + 15, btnY + 21);
        
        // 绑定点击事件
        canvas.addEventListener('click', function(e) {
            var rect = canvas.getBoundingClientRect();
            var clickX = e.clientX - rect.left;
            var clickY = e.clientY - rect.top;
            
            // 判断点击是否在按钮区域内
            if(clickX >= btnX && clickX <= btnX+30 && clickY >= btnY && clickY <= btnY+30) {
                alert('点击了自定义按钮，节点ID：' + node.id);
                // 执行你的自定义逻辑
            }
        });
    }
});

内容的提问来源于stack exchange，提问作者Андрей Двойкин