JavaScript — Fancytree: Как я могу получить входное значение в сложной таблице?
Я использую сложную таблицу
$("#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);
}
})
Следующая ссылка для теста
Это ссылка для загрузки драйвера Google
Мой вопрос …..
при нажатии на кнопку ， нужно получить входное значение фантазии дерева. Как мне написать этот необычный синтаксис?
Я должен был попробовать следующий синтаксис …
$ ( «# Дерево»). Fancytree ( «getTree»). GetSelectedNodes ()
приведенный выше синтаксис может получить данные tree-products.json. Не удается получить данные из renderColumns.
Решение
Если я правильно понимаю ваш вопрос, вам нужно получить доступ к выбору вашего необычного дерева за пределами элемента. Вы можете сделать это через
$("#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-теги в событии нажатия ваших кнопок, но я бы не рекомендовал этого, поскольку данные вашего узла не обновляются.
Надеюсь это поможет
Другие решения
Других решений пока нет …