什么是分层数据的最佳jQuery的多选选择器 [英] what is the best jquery multiselect picker for hierarchical data

问题描述

我有一个平下拉列表中选择器今天200多个项目。问题是，名单其实是这样，我想看看是否有任何选择器，可以显示数据的层次，使人们可以看到每个项目融入整个列表数据的层次结构。

I have a "flat" dropdown picker today with over 200 items. The issue is that the list is actually a hierarchy of data so I wanted to see if there was any picker that can show a hierarchy of data so people can see where each item fits into the overall list.

现在我并置水平，这样它会显示是这样的：

Right now I am concatenating the levels so it would show something like this:

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

但我认为有可能是一个更好的UI控件，将使其更容易从那里名单本身具有数据的不同级别的列表中选择。

but I thought there might be a better UI widget that would make it easier to pick from a list where the list itself has data a different levels.

推荐答案

试试这个的复选框树

修改1

您可以轻松地定制，以您的具体需求，提供您使用的是最新的版本，例如当选择一个孩子来改变选择-OF-祖先。见下图：

You can customize it easily to your exact needs, provided you are using the latest version, e.g to change the selecting-of-ancestors when a child is selected. See below:

（45行开始的 checkboxtree。 JS ）

        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

如果你获得这个工作检查问题：

If you have problems getting this to work check:

• 您已经jquery.checkboxtree.js版本0.5版本是在文件的第8行。


• 那你指的是你的本地副本，而不是外部的版本，而不是缩小的版本


• 确保你已经改变了检查到

• That you have jquery.checkboxtree.js version 0.5 [version is at line 8 of the file].
• That you are referring to your local copy, and not an external version, and not a minified version
• Make sure you've changed 'check' to ''

更改源$ C ​​$ c是也许不是最好的做法。改变参数的正式方式使用code是这样的：

Changing the source code isn't perhaps best practice. The official way to change the parameters uses code like this:

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

您会发现几乎一样，在这样的一个例子页面，并且可以看到，它的工作原理与'checkIfFull 选项。对我来说，选项不工作了。

You'll find an example almost like that on tab 7 of this page, and can see that it works with the 'checkIfFull' option. For me the '' option does work too.

这篇关于什么是分层数据的最佳jQuery的多选选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！