如何在 Tree Checkbox 上实现 jquery（从头开始构建 - 无插件）答案

【问题标题】：How to Implementing jquery on Tree Checkbox (build from scratch - no plugin)如何在 Tree Checkbox 上实现 jquery（从头开始构建 - 无插件）
【发布时间】：2011-05-31 12:21:04
【问题描述】：

不知道下面的 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 - 公共培训 - 基于 IS 的 MS

基本上我想执行一个父子检查，如果孩子先检查，项目的参考父项也会检查，如果父母先检查，那么所有孩子都会检查。

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

提前致谢。

【问题讨论】：

这个数据库设计很糟糕。规范化列 trn!。这段代码会运行很慢，不能使用索引。
@Johan，为什么会这样？你想解释一下吗？谢谢。
select * from table where columnx like 'gshdg%' 可以使用索引，因为您正在搜索前导字符。 select * from table where columnx like '%hsdjd%' 可以从不使用索引，因为您正在查看字符串的中间。这总是会强制进行全表扫描，从而使事情变得非常慢。此外，您还在寻找可以使用索引整数的字符。随着表的增长，这将使您的查询变得越来越慢。如果你规范化 trl 列，你的运行时间只会增长 O(log(N))，因为你可以使用 Btree 索引和 equi-join。
Querying a database representation of a tree (MySQL) 的可能重复项
@Johan，我的问题不是关于数据库，而是关于 jQuery 复选框。但是，我感谢您提醒我有关数据索引的信息。我在 trn 列中存储尾随 id 的想法是轻松跟踪附加到它的 id。那么你对如何规范化它有什么建议，这样我就可以跟踪每个 id 上附加的所有 id。之前我使用了具有 ID 和 ParentID 的邻接列表模型。为了获得所有项目，我必须在我的 php 代码中使用递归函数。使用这个当前的数据模型，我发现查询时间比 ALM 模型快得多。谢谢。

标签： php jquery mysql html

【解决方案1】：

请参阅this fiddle 以获取示例。一些解释：

第一：

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

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

由于您的 html 中还没有适当的层次结构指示（使用单个 UL），我建议使用“trn_level”字段来构建包含该信息的类：

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

这将更容易确定复选框逻辑的父/子关系。为了进一步简化这一点，请将其应用于“LI”而不是复选框本身。这也将允许您定义 css 类来为您进行缩进（而不是那种 hacky &nbsp; 的东西）

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

注意：当然，我的示例中的代码可以简化并进行更多调整，但最终它不是一个非常优雅的解决方案，因为项目的层次结构不是不言自明的.你真的应该尝试渲染嵌套的 UL 来反映 HTML 中的层次结构。

【讨论】：