javascript - 带复选框的 TreeView

Question

我需要构建一个javascript函数，当我选择一个孩子时自动选择父母。例如，我有一个有 3 个孩子的父母，只要我点击一个孩子，父母也应该被选中，并冒泡直到根。当我取消点击孩子时，同样的逻辑我应该取消选中所有的父母。我在哪里可以找到这个逻辑？

Answer 1

解决方案取决于您如何构建树视图。假设以下 HTML：

<ul>
<li>
  <input type="checkbox">A</input>
  <ul>
    <li>
      <input type="checkbox" />Once</input>
      <ul>
        <li><input type="checkbox">One</input></li>
        <li><input type="checkbox">Two</input></li>
        <li><input type="checkbox">Three</input></li>
      </ul>
    </li>
    <li><input type="checkbox">Two</input></li>
    <li>
      <input type="checkbox">Three</input>
      <ul>
        <li><input type="checkbox">One</input></li>
        <li><input type="checkbox">Two</input></li>
        <li><input type="checkbox">Three</input></li>
      </ul>
    </li>
  </ul>
</li>
<li>
  <input type="checkbox">B</input>
  <ul>
    <li><input type="checkbox">One</input></li>
    <li><input type="checkbox">Two</input></li>
    <li><input type="checkbox">Three</input></li>
  </ul>
</li>
</ul>

您可以使用 JQuery 选择器来实现它：

$('li :checkbox').change(function() {
var $parent = $(this).parents().eq(2);
$parent.children('li :checkbox')
    .prop('checked', $parent.find('li :checkbox:checked').size() > 0)
    .change();
});

这是小提琴的链接 - http://jsfiddle.net/xEbPn/1/

Answer 2

假设：

<ul>
  <li>Parent
    <ul>
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
    </ul>
  </li>
</ul>

你可以这样做：

$('li li').click(function () {
  $(this).css('background-color', '#eee');
  $(this).parent().css('background-color', '#eee');
});

要进行单击和取消单击，您可以使用.data()标记子元素以跟踪单击/取消单击。希望有帮助。

Answer 3

在这里，您有工作示例。还将 jQuery 添加到此示例和树结构中，您可以使用 [] 数组定义。复选框将按照您的描述进行更改。您还可以在服务器端生成树或增强结构，以便在解析数组树时放入数据以显示。我没有检查跨浏览器兼容性。

要获取 jQuery，请访问此处http://jquery.com/download/

<script type="text/javascript">
var tree = 
[
    [
        [
            [],
            []
        ],
        []
    ],
    [],
    [
        [],
        [
            [],
            []
        ]
    ]
]

document.ready = function()
{
    window.Cont = $("#container");
    treeGen(tree, Cont);
    Cont.find("input[type='checkbox']").click(checkboxClick)
}

var treeGen = function(arr, elem)
{
    if (arr !== true)
        for (var i = 0; i < arr.length; ++i)
        {
            var newElem = $("<div></div>");
            $("<input type='checkbox'/>").appendTo(newElem);
            newElem.appendTo(elem);
            treeGen(arr[i], newElem);
        }
}

var checkboxClick = function()
{
    walkToRoot($(this).parent().parent(), $(this).is(":checked"))
}

var walkToRoot = function(elem, state)
{
    if (elem.attr("id") != "container")
    {
        var cBox = elem.find("input[type='checkbox']").first();
        cBox.get(0).checked = state;
        walkToRoot(elem.parent(), state);
    }
}
</script>

<style>
    #container div
    {
        margin-left:50px;
        margin-bottom:4px;
    }
</style>

<div id="container"></div>