使用JQuery的HTML表单中的分层数据

Question

我有非常大的分层树对象，我正在用它们构建一个交互式的html表单。 这是一个小摘要：

如您所见，有不同的项目类型。 D 可以是主父 A 的直接孩子，也可以是 B 或 C 的孩子。 C 也可能是 A 等的直接子项。项目类型中没有真正的顺序。

在我的表单中，用户可以选择或取消选择任何项目。因此，当您选择项目 B 时，我想自动选择所有后代， A 应显示半状态，表示某些项目已被选中，但不是全部。< / p>

所以我正在处理3个状态：未选中，完全选择和半选。 （只有D可以有2个状态，因此它总是最后一个项目如果存在）

由于JS中没有嵌套数组，我应该使用对象或？所以我写的函数如下：检查项目是哪个对象，也选择所有这些后代，然后选择所有祖先，或者如果选择了所有后代，则完全选择祖先。等

我在数据库中使用闭包表方法获得了所有这些数据。我的问题是我不知道如何在JavaScript / JQuery中处理这个问题。

感谢您的时间！

编辑： 非常感谢您的帮助！ 我从来没有尝试过原型JS，但我明白了，并且会用JQuery做到这一点。

这里是与“半选”状态有关的图像：

Answer 1

是的，你应该使用对象，但是你提出这个问题是有意义的。也许你应该研究一下pre-built solution like JSTree。国家要么

• selected
• not selected

您从节点的子节点推断出您调用half-selected的状态。您尚未指定足够的信息来实现它。

"use strict";

var NodeObj = function (name, selected) {
  this.state = selected || false;
  this.name = name;
  this.nodeChildren = [];
}

NodeObj.prototype.add_child = function (name) {
  var child = new NodeObj(name);
  this.nodeChildren.push( child );
  return child;
}

NodeObj.prototype.select = function () {
  this.state = true;
  this.nodeChildren.forEach( function(e) { e.select() } );
}
NodeObj.prototype.unselect = function () {
  this.state = false;
  this.nodeChildren.forEach( function(e) { e.unselect() } );
}

var n1 = new NodeObj(null, 'ROOT');
var a = n1.add_child('A');
var d = n1.add_child('D');

var b1 = a.add_child('B1');
var b2 = a.add_child('B2');
var c1 = b1.add_child('C1');
var c2 = b1.add_child('C2');
var c3 = b2.add_child('C3');
var c4 = b2.add_child('C4');
var d1 = c1.add_child('D1');
var d2 = c4.add_child('D2');
var d3 = c4.add_child('D3');

b2.select();
console.log( d1.state );
console.log( n1 );