php - 如何在树复选框上实现 jquery(从头开始构建 - 无插件)

Question

不知道下面的Hierarchical Data是Adjacency list还是Nested List模型。我所知道的是，收集分层数据很容易。例如，

获取所有树然后使用:SELECT * FROM categories ORDER BY trn ASC

从项目 News (7) 开始获取所有树:SELECT * FROM categories WHERE trn LIKE '%+7+%'

它只是一个单一的查询，而不是做循环的父子查询。

catID   cat_title           status      trn         trn_level
7       News                publish     +7          0
8       Artikel             publish     +8          0
9       Public Training     draft       +7+9        1
10      Coorporate Mgt      draft       +8+10       1
16      MS Based On IS      draft       +7+9+16     2
17      Inhouse Training    draft       +7+17       1
18      MS                  publish     +7+17+18    2
19      SM                  publish     +7+17+19    2

所以...我的 jQuery 问题是:上面的数据将生成如下所示的复选框 html:

News 
   Inhouse Training
      MS
      SM
   Public Training
      MS Based On IS
Artikel
   Coorporate Management

<ul class="categoriesTree">
<li>
<?php str_repeat("&nbsp;&nbsp;",$row['trn_level']); ?>
<input type="checkbox" name="categories[]" value="<?php echo $row['catID']; ?>" class="<?php echo $row['trn']; ?">
<?php echo $row['cat_title']; ?>
</li>
</ul>

如何使用 jQuery 执行父子检查。示例:如果我检查了项目新闻，我希望它也将检查项目- 内部培训- 多发性硬化症- SM- 公共(public)培训- 基于 IS 的 MS

基本上我想执行父子检查，如果 child 先检查，项目的引用父项也会检查，如果父项先检查，那么所有子项都会检查。

我希望我的意思足够清楚:)。我知道有很多树插件可供使用，但我想了解并从头开始构建自己的插件。

提前致谢。

Answer 1

参见 this fiddle举个例子。一些解释:

首先:

class="<?php echo $row['trn']; ?"

这样你最终会得到像“+7”这样的类名，这在 css 中是无效的。

因为您的 html 中还没有适当的层次结构指示(使用单个 UL)，我建议使用“trn_level”字段来构建包含该信息的类:

class="level_<?php echo $row['trn_level']; ?"

这将使确定复选框逻辑的父/子关系变得更加容易。为了进一步简化这一点，将其应用于“LI”而不是复选框本身。这也将允许你定义 css 类来为你做缩进(而不是那些 hacky   的东西)

用于检查复选框的 jquery 代码非常简单:找到所有前面的列表元素，并检查它们以防它们的级别低于当前级别。对所有下一个元素(具有比当前级别更高的级别)执行相同的操作。

注意:我示例中的代码可以进一步简化和调整，但最终这不是一个非常优雅的解决方案，因为项目的层次结构不是不言自明的.您真的应该尝试呈现嵌套的 UL 以反射(reflect) HTML 中的层次结构。