Question

我想使用 treant JS 自定义node，因此对某些innerHTML使用nodes。带有 text 属性的nodes可以正常使用折叠动画，但nodes innerHTML最初打开并崩溃无效。

下面是我用来创建图表的内容：

var simple_chart_config = {
            chart: {
                container: "#tree-sample"
                , animateOnInit: true
                , node: {
                    collapsable: true
                }
                , connectors: {
                    type: "step"
                    , style: {
                        "stroke-width": 2
                    }
                }
                , animation: {
                    nodeAnimation: "linear"
                    , nodeSpeed: 700
                    , connectorsAnimation: "linear"
                    , connectorsSpeed: 700
                }
            }
            , nodeStructure: {
                text: {
                    name: "Parent node"
                }
                , collapsed: true
                , connectors: {
                    style: {
                        'stroke': '#bbb'
                        , "stroke-dasharray": "--", //"", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."
                        'arrow-start': 'classic-wide-long'
                    }
                }
                , children: [
                    {
                        text: {
                            name: "محمد عبيد"
                            , title: "General Manager"
                            , tasks: "Tasks : 12"
                            , hours: "Hours : 100"
                        }
                        , collapsed: true
                        , children: [
                            {
                                text: {
                                    name: "John"
                                    , title: "General Manager"
                                    , tasks: "<span>Taks</span><span>12</span>"
                                    , hours: "Hours : 100"
                                }
                                , children: [
                                    {
                                        text: {
                                            name: "First child"
                                            , title: "General Manager"
                                        }
                                        , children: [
                                            {
                                                text: {
                                                    name: "First child"
                                                    , title: "General Manager"
                                                }
        }
    ]
        }
    ]
        }
    ]
                        , HTMLclass: 'blue'
                    , }
                , {
                        innerHTML: '<p class="node-name">Michel s</p><p class="node-title">General Manager</p><p class="node-tasks">Tasks : 12</p><p class="node-hours">Hours : 100</p><a class="collapse-switch"></a>',
                    text:{}
                    , children: [
                                            {
                                                text: {
                                                    name: "Michel sooppikkada"
                                                    , title: "General Manager"
                                                }
        }
    ]
        }
                    , {
                        text: {
                            name: "data2"
                            , title: "Manager"
                        }
        }
    ]
            }
        };
        my_chart = new Treant(simple_chart_config,null,$);

任何人都知道这有什么问题吗？

Answer 1

最后问题已解决。问题出在HTML字符串本身上。

更改

'<p class="node-name">Michel s</p><p class="node-title">General Manager</p><p class="node-tasks">Tasks : 12</p><p class="node-hours">Hours : 100</p><a class="collapse-switch"></a>',

到

'<p class="node-name">Michel s</p><p class="node-title">General Manager</p><p class="node-tasks">Tasks : 12</p><p class="node-hours">Hours : 100</p>',

解决并救了我的一天!!

希望这个答案能够帮助那些将来面临这个问题的人。

在treantJS中，Collpase动画不适用于具有innerHTML的节点

1 个答案: