single-page-application - SPA Web 应用程序中的树结构

Question

我正在启动一个单页应用程序，但仍然没有选择任何框架。它需要做的唯一复杂的事情是允许用户从树结构中为表单的一个字段选择一个元素。如果它可以同时使用鼠标选择和键盘自动完成功能，那就太好了。这棵树有 5 层深，包含大约 500 个元素。什么是实现这一点的好方法？

Answer 1

这是一个向您展示如何递归构建树的小提琴：http: //jsfiddle.net/KtbXb/。

就输入而言，将点击函数绑定到每个节点将调用一个函数，该函数可以访问与点击节点关联的所有数据：

view:
<li data-bind="text: name, click: yourFunction"></li>

viewmodel: 
var yourFunction = function (data) {
//your function will have access to the node via data
};

对于键盘输入，您可以向视图添加输入并将值绑定到可观察值。从那里，您可能可以在线找到子字符串搜索算法，甚至是插件（jquery.table-filter 做得很好）