如何读取具有部分选定子节点的父节点 [英] How can I read parent nodes with partly selected child nodes

查看:100
本文介绍了如何读取具有部分选定子节点的父节点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用dynaTree http://wwwendt.de/tech/dynatree/index.html 在我的代码中显示一个2级树。此树显示在 selectMode = 3 中,带有复选框,当用户选中一个节点复选框时,其父级将变为灰色模式

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?

编辑:
这是你需要的所有代码

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>

选择 Key2_1 时, Key2 转到灰色状态,你会看到 Key2_1 被添加到 textField 文本框,我想在 textField 字段中输入Key2。

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.

注意:选择 Key2_1 Key2_2 这两个子节点也将选择父节点(key_2)但是不是当它在灰色模式

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

推荐答案

似乎dynaTree没有有一种方法来寻找部分选定的节点。
另一种解决方案是查找此类节点的类名。默认情况下,如果未更改部分选定节点的类名,则它将是 dynatree-partsel ,但是具有完全选定子节点的节点也分配了该类,因此我们需要选择在其类中没有 dynatree-selected 的节点。

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.

一个肮脏的解决方案是将onSelect方法定义更改为:

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(", "));
}

这篇关于如何读取具有部分选定子节点的父节点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆