1

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

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

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

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

4

2 回答 2

1

试试这个复选框树

编辑 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'
        }
    });

您会在此页面的选项卡 7 上找到一个几乎类似的示例，并且可以看到它与该'checkIfFull'选项一起使用。对我来说，这个''选项也确实有效。

于 2011-03-26T12:17:16.693 回答
0

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

Stephen Walther 有一篇关于可以帮助您入门的基础知识的旧帖子。

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

于 2011-03-26T12:17:41.943 回答