Treant.js:单击同级时崩溃节点

时间:2019-04-01 13:03:09

标签: javascript

我目前正在使用Treant.js可视化决策树(我没有足够的声誉来创建标签)。它应该像问卷一样工作,所以当我单击一个节点时,所有子节点都应折叠。 到目前为止,该方法一直有效,以至于子节点可以折叠,但是单击的节点无法打开

在Treant.js中,单击可折叠节点时可以创建使用回调的方法。我使用了json方法来定义树。

var click_collapse = true;

simple_chart_config = {
    chart: {
        container: "#variant",
        callback: {
            onBeforeClickCollapseSwitch: function (answer) {

                var parent = answer.parentElement;

                if(!click_collapse)
                {
                    click_collapse = true;
                    return;
                }


                if(parent.classList.contains("collapsed")) {

                    var answerclass = parent.classList[2]
                    var siblings = 
                    document.getElementsByClassName(answerclass);
                    for(let s of siblings){

                        if(!s.classList.contains("collapsed") && s != parent)
                        {                         

                            for(let c of s.childNodes){

                                if(c.classList.contains("collapse-switch")){
                                    click_collapse = false;
                                    c.click();
                                }                              
                            }
                        }
                    }
                }
            }
        },
    },

    connectors: {
        type: 'step'
    },

    nodeStructure: {
        text: {  name: "Q1"},
        HTMLid: "q1",
        connectors: {type: "step"},
        HTMLclass: "question",
        children: [
            {
                text: { name: "Q1 A1" },
                collapsed: true,
                HTMLid: "v1",
                HTMLclass: "answer contractType",
                children: [
                    {
                        text: {name: "Q2"},
                        HTMLid: "q2",
                        HTMLclass: "question",
                        connectors: {type: "step"},
                        children:[
                            {
                                text: {name: "Q2 A1"},
                                collapsed: true,
                                HTMLid: "g1",
                                HTMLclass: "answer sib-companyType",
                                children: [
                                    {
                                        text: {name: "Q3"},
                                        HTMLclass: "question",
                                        HTMLid: "q3",
                                        connectors: {type: "step"},
                                        children: [
                                            {
                                                text: {name: "Q3 A1"},
                                                collapsed: true,
                                            },
                                            {
                                                text: {name: "Q3 A1"},
                                                collapsed: true,
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                text: {name: "Q2 A2"},
                                collapsed: true,
                                HTMLid: "g2",
                                HTMLclass: "answer sib-companyType",

...

我想实现的是当一个节点,例如显示“ Q2 A1”,然后单击“ Q2 A1”将折叠“ Q2 A1”,并显示“ Q2 A2”及其子项。

0 个答案:

没有答案