Question

我不知道以下分层数据是邻接列表还是嵌套列表模型。我所知道的是，收集分层数据很容易。例如，

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

从项目新闻（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

基本上我想要检查父子项，如果子项先检查，项目的引用父项也将被检查，如果父项先检查，则所有子项都将被检查。

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

提前致谢。

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，以反映HTML中的层次结构。

如何在树复选框上实现jquery（从头开始构建 - 没有插件）

1 个答案: