Fancytree:我怎样才能在复杂的表格中获得输入值?

时间:2018-01-22 02:18:03

标签: javascript php jquery fancytree

# 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语法?

我尝试了以下语法......

$("#树&#34)。fancytree(" getTree&#34)。getSelectedNodes() 上面的语法可以得到tree-products.json数据。无法从renderColumns获取数据。

1 个答案:

答案 0 :(得分:0)

如果我理解你的问题,你需要在元素之外访问你的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元素中设置节点数据,但这不是双向绑定。当输入元素更改其值时,您需要更新节点数据。你可以用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标签。点击事件,但我不会建议,因为你的节点数据没有更新。

希望这有帮助