How can I read parent nodes with partly selected child nodes

问题

I'm using dynaTree http://wwwendt.de/tech/dynatree/index.html in my code to show a 2 level tree. this tree is shown in selectMode = 3 with checkboxes and when user check a node checkbox, its parent turns to gray mode.

in next stage when user clicks a button I'm sending all selected nodes to server to process. What I would like to do is send all gray mode check boxes as well.

How can I achieve this goal?

Edit: This is all the code you need

<html>
<head>
    <link type="text/css" href="../css/ui.dynatree.css" rel="stylesheet">
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="../js/jquery.dynatree.min.js"></script>
    <script type="text/javascript">
        var treeData = [
            { key: "key1", title: "Text 1" },
            { key: "Key2", title: "Text 2",
                children: [
                    { key: "Key2_1", title: "Text 2_1" },
                    { key: "Key2_2", title: "Text 2_2" },
                ]
            },
        ];

        $(function () {
            $("#tree").dynatree({
                checkbox: true,
                selectMode: 3,
                children: treeData,
                imagePath: "../images/Tree/",
                onSelect: function (select, node) {
                    var selKeys = $.map(node.tree.getSelectedNodes(), function (node) {
                        return node.data.key;
                    });
                    $('#textField').val(selKeys.join(", "));
                }
            });
        });
    </script>
</head>
<body>
    <div id="tree"></div>
    <input type="text" id="textField" value="" /><input type="button" id="button" onclick="alert($('#textField').val())" value="Send" />
</body>
</html>

When selecting Key2_1, Key2 goes to gray state and you'll see Key2_1 is added to textField text box, I would like to have Key2 in textField field too.

Note: selecting both child nodes of Key2_1 and Key2_2 will also select the parent (key_2) but not when it is in gray mode

回答1:

It seems dynaTree does not have a method to look for partially selected nodes. An alternative solution is to look for class names of such nodes. by default if the class name for partially selected nodes is not changed, it will be dynatree-partsel, however a node with fully selected children has that class assigned too so we need to select nodes that does not have dynatree-selected in their classes.

A dirty solution will be change onSelect method definition to :

onSelect: function (select, node) {
    var selKeys = $.map(node.tree.getSelectedNodes(), function (node) {
        return node.data.key;
    });
    var partsel = new Array();
    $(".dynatree-partsel:not(.dynatree-selected)").each(function () {
        var node = $.ui.dynatree.getNode(this);
        partsel.push(node.data.key);
    });
    selKeys = selKeys.concat(partsel);
    $('#textField').val(selKeys.join(", "));
}

回答2:

var parent = node.getParent();
var parentnode = parent.data.key;

in the parentnode variable you will get the parent node's value

来源：https://stackoverflow.com/questions/10827216/how-can-i-read-parent-nodes-with-partly-selected-child-nodes

标签

javascript

jquery

dynatree