Question

今天我有一个“扁平”下拉选择器，有超过200件物品。问题是该列表实际上是一个数据层次结构，因此我想看看是否有任何可以显示数据层次结构的选择器，以便人们可以看到每个项目在整个列表中的位置。

现在我正在连接级别，所以它会显示如下：

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

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

Answer 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'选项一起使用。对我来说，''选项也可以。

Answer 2

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

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

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

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

2 个答案: