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

Question

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

如您所见，有不同的项目类型。 D可以是直系父亲A的直系子女，也可以是B或C的子女。 C也可以是A的直接子代，等等。项目类型中没有实际订单。

在我的表单中，用户可以选择或取消选择任何项目。 因此，当您选择项目B时 ，我想自动选择他的所有后代，而A应该显示一半状态，表明某些项目已被选中，但并非全部。

因此，我要处理3种状态：未选中，完全选中和一半选中。 （只有D可以有2种状态，如果存在，则总是D的最后一项）

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

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

感谢您的时间！

编辑：非常感谢您的帮助！ 我从没有尝试过JS原型，但我明白了，并且可以使用JQuery来实现。

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

Answer 1

是的，您应该使用对象，但是与您提出这个问题有关。 也许您应该研究像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 );