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

我的问题是.....

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

我尝试了以下语法...

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

Answer 1

如果我正确理解您的问题，您需要在元素之外访问您的幻想树的选择。你可以通过

$("#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 元素中设置节点数据，但这不是双向绑定。当您的输入元素更改其值时，您需要更新节点数据。您可以使用 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 标记，但我不建议这样做，因为您的节点数据没有更新。

希望对你有帮助