什么是分层数据的最佳 jquery 多选选择器答案

【问题标题】：what is the best jquery multiselect picker for hierarchical data什么是分层数据的最佳 jquery 多选选择器
【发布时间】：2011-07-23 11:05:38
【问题描述】：

我今天有一个包含 200 多个项目的“平面”下拉选择器。问题是列表实际上是一个数据层次结构，所以我想看看是否有任何选择器可以显示数据层次结构，以便人们可以看到每个项目适合整个列表的位置。

现在我正在连接各个级别，因此它会显示如下内容：

level 1 --> level 2
level 1 --> level 2
level 1 --> level 2 --> level 3

但我认为可能有一个更好的 UI 小部件可以更容易地从列表中选择列表本身具有不同级别的数据。

【问题讨论】：

标签： jquery asp.net-mvc user-interface picker

【解决方案1】：

试试这个Checkbox Tree

编辑 1

如果您使用的是最新版本，您可以根据您的确切需求轻松自定义它，例如在选择孩子时更改祖先的选择。见下文：

（从checkboxtree.js 开始的第 45 行）

        onCheck: {
            /**
             * Available values: null, 'check', 'uncheck', 'checkIfFull'
             */
            ancestors: 'check', /* <--- CHANGE THIS */
            /**
             * Available values: null, 'check', 'uncheck'
             */
            descendants: 'check',
            /**
             * Available values: null, 'collapse', 'expand'
             */
            node: '',
            /**
             * Available values: null, 'check', 'uncheck'
             */
            others: ''
        },

编辑 2

如果您在执行此操作时遇到问题，请检查：

您的 jquery.checkboxtree.js 版本为 0.5 [版本位于文件的第 8 行]。
您指的是本地副本，而不是外部版本，也不是缩小版本
确保您已将 'check' 更改为 ''

更改源代码可能不是最佳做法。更改参数的官方方法使用如下代码：

    $('#tree7').checkboxTree({
        onCheck: {
            ancestors: '',
            descendants: 'check'
        },
        onUncheck: {
        ancestors: 'uncheck'
        }
    });

您会在this page 的选项卡7 上找到一个几乎类似的示例，并且可以看到它与'checkIfFull' 选项一起使用。对我来说，'' 选项也可以。

【讨论】：

为什么在检查节点 1 时会检查 Root。如果我只想要节点 1，我不想检查 Root。你知道为什么会这样吗？？
感谢您的更新。 api很有意义，但实际上似乎不起作用。无论我选择什么选项，它似乎都处于“检查”模式
@ooo - 为我工作。尝试编辑 2 中的建议。
我使用的是 .43 版本。 .当我升级到 .5 时，它现在似乎可以工作了。

【解决方案2】：

听起来级联下拉列表可能很适合。这是用户从下拉列表中选择父级别的地方，然后显示另一个包含子项的下拉列表，依此类推。这些通常在 Ebay 等网站上使用。

Stephen Walther has an old post 了解可以帮助您入门的基础知识。

请注意，并非总是需要为每个列表执行 Ajax 回调到服务器。您可以通过在单独的 JavaScript 文件中的 JSON 对象中加载完整列表并使用 JQuery 插件来创建和加载下拉列表来摆脱困境。快速搜索找到了this one，但我相信还有很多其他的。

【讨论】：