javascript - Fancytree:如何获取复杂表中的输入值？

Question

# this is reference picture #

我使用复杂表

$("#tree").fancytree({
checkbox: true,

.......

source: { url: "../tree-products.json"},

.......

renderColumns: function(event, data) {
    var node = data.node,$tdList = $(node.tr).find(">td");
    $tdList.eq(1).text(node.getIndexHier());
    $tdList.eq(3).find("select").val(node.data.unit);
    $tdList.eq(4).find("input").val(node.data.stusnextclassdate);
    $tdList.eq(5).find("input").val(node.data.mny);
    $tdList.eq(6).html(node.data.schedule);
}

})

以下是测试链接

test link

This is google driver download link

我的问题是......

点击按钮时，需要获取fancytree输入值。我应该如何编写这个 fancytree 语法？

我尝试过以下语法...

$("#tree").fancytree("getTree").getSelectedNodes()以上语法可以获取tree-products.json数据。无法从 renderColumns 获取数据。

Answer 1

如果我正确理解您的问题，您需要访问元素外部的 fancytree 选择。您可以通过

$("#tree").fancytree("getTree").getSelectedNodes()

这应该返回您在 FancytreeNode 对象中的选择。

有关详细信息，请参阅http://www.wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree.html#getSelectedNodes

编辑

好的，看到你的代码后，我明白你想要做什么以及你做错了什么。

问题出在您的 renderColumns 方法中。在

$tdList.eq(3).find("input").val(node.key);
$tdList.eq(4).find("input").val(node.data.foo);

您正在 html 元素中设置节点数据，但这不是双向绑定(bind)。当输入元素的值发生更改时，您需要更新节点数据。您可以使用 JavaScript 事件来做到这一点:

renderColumns: function(event, data) {
    var node = data.node;
    var row = $(node.tr);

    $tdList = row.find(">td");
    // (Index #0 is rendered by fancytree by adding the checkbox)
    // Set column #1 info from node data:
    $tdList.eq(1).text(node.getIndexHier());
    // (Index #2 is rendered by fancytree)
    // Set column #3 info from node data:
    $tdList.eq(3).find("input").val(node.key);
    $tdList.eq(4).find("input").val(node.data.foo);

    row.on("change", ".update-foo", function() {
        node.data.foo = $(this).val();
    });
}

为了使其正常工作，您需要更新您的 html 模板:

<tr>
    <td class="alignCenter"></td>
    <td></td>
    <td></td>
    <td><input name="input1" type="input"></td>
    <td><input class="update-foo" name="input2" type="input"></td>
    <td class="alignCenter"><input name="cb1" type="checkbox"></td>
    <td class="alignCenter"><input name="cb2" type="checkbox"></td>
    <td>
        <select name="sel1" id="">
            <option value="a">A</option>
            <option value="b">B</option>
        </select>
    </td>
</tr>

或者，您可以在按钮的点击事件中读取 html 标签，但我不建议这样做，因为您的节点数据未更新。

希望这有帮助