javascript - 具有真实复选框的 Dynatree

Question

我想要一个复选框树形式，我使用 dynatree jquery 树来做到这一点。然后我发现 dynatree 不使用真正的复选框，所以我将 html 复选框放置在树内。

它工作正常，直到我意识到当节点展开/折叠时它会删除选中的(勾号)值有没有办法在 javascript 中编写一个函数来防止这种情况发生？

非常感谢。这是我的代码

 $(function(){
      $("#tree").dynatree({
        // using default options

        checkbox: false,
        selectMode: 3,
        noLink: true,


    });

 <div id="tree">
    <ul>
      <li id="key1" title="Look, a tool tip!">
        <input type="checkbox" id="chb-key1" name="selected_items" value="Item 1" class="" />Item 1</li>
      <li id="key2">
        <input type="checkbox" id="chb-key2" name="selected_items" value="Item 2" />Item 2</li>
      <li id="key3">
        <input type="checkbox" id="chb-key3" name="selected_items" value="Item 3" />Folder with some children
        <ul>
          <li id="key31">
            <input type="checkbox" id="chb-key31" name="selected_items" value="Item 3.1" />Sub-item 3.1</li>
          <li id="key32" class="selected">
            <input type="checkbox" id="chb-key32" name="selected_items" value="Item 3.2" />Sub-item 3.2
            <ul>
              <li id="key321" class="selected">
                <input type="checkbox" id="chb-key321" name="selected_items" value="Item 3.2.1" />Sub-item 3.2.1</li>
              <li id="key322" class="selected">
                <input type="checkbox" id="chb-key322" name="selected_items" value="Item 3.2.2" />Sub-item 3.2.2</li>
            </ul>
          </li>
        </ul>
      </li>

Answer 1

我也遇到了同样的问题。我解决这个问题的方法是输入“checkbox: true”，并隐藏真正的复选框，并在每次选中/取消选中假框时选中/取消选中它们。

这是我的代码:

    $("#storyCategories").dynatree({
    //Tree parameters
    persist: false,
    checkbox: true,
    selectMode: 3,
    activeVisible: true,

    //Un/check real checkboxes recursively after selection
    onSelect: function (select, dtnode) {
        if (select) {
            $("#chb-" + dtnode.data.key).attr("checked", "checked").addClass("hidden");
        } else {
            $("#chb-" + dtnode.data.key).removeAttr("checked").addClass("hidden");
        }
        //  $("#chb-" + dtnode.data.key).attr("checked", select).addClass("hidden");
        dtnode.visit(function (dtnode) {
            if (select) {
                $("#chb-" + dtnode.data.key).attr("checked", "checked").addClass("hidden");
            } else {
                $("#chb-" + dtnode.data.key).removeAttr("checked").addClass("hidden");
            }
        }, null, true);
    },
    //Hack to prevent appearing of checkbox when node is expanded/collapsed
    onExpand: function (select, dtnode) {
        $("#storyCategories :checkbox").addClass("hidden");
        //$("#chb-" + dtnode.data.key).attr("checked", dtnode.isSelected()).addClass("hidden");
        if (dtnode.isSelected()) {
            $("#chb-" + dtnode.data.key).attr("checked", "checked").addClass("hidden");
        } else {
            $("#chb-" + dtnode.data.key).removeAttr("checked").addClass("hidden");
        }
    }
});
    //Hide real checkboxes
    $("#storyCategories :checkbox").addClass("hidden");

我使用了本文中的代码，但必须更新它:http://www.llakomy.com/articles/adding-dynatree-with-checkboxes-to-a-form .