Мне удалось реализовать решение, которое работает так, как я ожидал.
Вот мое решение:
Когда пользовательский ввод является цветным, реализуйте метод onChange в текстовом поле цвета, чтобы установить данные узла для ввода данных пользователем My HTML Таблица имеет значение ниже tds
<td width="150px"><input type="text" size='30' onChange="updateNode(this, 'color');"/ </td>
<td width="150px"><input type="text" size='30' onChange="updateNode(this, 'height');"/></td>
<td width="150px"><input type="text" size='30' onChange="updateNode(this, 'comments');"/></td>
Вот функция updateNode
function updateNode(cur,key)
{
var val = document.getElementById(cur.id).value;
var tree = $("#tree").fancytree("getTree");
var node = tree.getActiveNode();
if(key === "color")
{
node.data.color= val;
}
else if(key === "height")
{
node.data.height = val;
}
// else and so on...
return false;
}
В методе fancytree renderColumns - добавьте атрибуты id и значения для каждого входа на основе в IndexHierarchy
это то, как вы это делаете
$tdList.eq(2).find("input").attr("id","color-"+node.getIndexHier());
$tdList.eq(2).find("input").attr("value",node.data.color);
$tdList.eq(3).find("input").attr("id","height-"+node.getIndexHier());
$tdList.eq(3).find("input").attr("value",node.data.height);
$tdList.eq(4).find("input").attr("id","comments-"+node.getIndexHier());
$tdList.eq(4).find("input").attr("value",node.data.comments);
Теперь, когда пользователь нажимает «SAVE»
$("#save").click(function(){
var tree = $("#tree").fancytree("getTree");
var rtNode = tree.getRootNode();
//var nodeList = tree.getAllNodes(); //My custom implementation method
tree.expandAll(); //you have to do this to be able to read all nodes
var seq = 0;
var categoryName = "";
var subCategoryName = ""; //Plants, Animals etc.,
var jsonArray = new Array();
var categoryNodes = rtNode.getChildren();
for(var i=0; i< categoryNodes.length; i++)
{
categoryName =categoryNodes[i].title;
var subCategoryNodes = categoryNodes[i].getChildren();
if(!subCategoryNodes)
{
//error if at least one child is mandatory
}
for(var j=0; j < subCategoryNodes.length; j++)
{
seq++;
subCategoryName = subCategoryNodes[j].title;
var sCtgryChildren = subCategoryNodes[j].getChildren();
if(!sCtgryChildren)
{
//error if at least one child is mandatory
}
for(var k=0; k < sCtgryChildren.length; k++)
{
var ind = sCtgryChildren[k].getIndexHier();
var subCategoryChildName = sCtgryChildren[k].title;
var color = sCtgryChildren[k].data.color;//document.getElementById("color-"+ind).value; - this is another way
var height = document.getElementById("height-"+ind).value;
var comments = document.getElementById("comments-"+ind).value;
var jsonBean = new jsonBeanJO(seq, categoryName, subCategoryName, color, height, comments); // define your own JSON bean
jsonArray.push(jsonBean);
}
}
}
alert(JSON.stringify(jsonArray));
return false; // test in UI and remove when you have expected data
// to send back in request
document.getElementById('data').value = JSON.stringify(jsonArray);
document.myform.submit();
});
Наконец, для автоматического обновления иерархии индексов, когда Вы перемещаете узел вверх или вниз, просто вызываете рендер узла в modifyChild
modifyChild: function(event, data)
{
data.node.render(true); //This statement made all the difference
data.tree.info(event.type, data);
},