Что такое лучший сборщик jquery для иерархических данных

Question

У меня сегодня "плоский" выпадающий список с более чем 200 предметами. Проблема заключается в том, что список на самом деле представляет собой иерархию данных, поэтому я хотел посмотреть, есть ли какой-либо инструмент выбора, который может отображать иерархию данных, чтобы люди могли видеть, где каждый элемент вписывается в общий список.

Сейчас я объединяю уровни, чтобы они выглядели примерно так:

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

но я подумал, что может быть лучший виджет пользовательского интерфейса, который облегчит выбор из списка, в котором сам список содержит данные разных уровней.

Answer 1

Попробуйте это Дерево флажков

РЕДАКТИРОВАТЬ 1

Вы можете легко настроить его в соответствии с вашими потребностями, если вы используете последнюю версиюНапример, чтобы изменить выбор предков, когда выбран ребенок.См. Ниже:

(строка 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

Если у вас есть проблемы с этим, проверьте:

• Что у вас есть jquery.checkboxtree.js версии 0.5 [версия находится в строке 8 файла].
• То, что вы имеете в виду свою локальную копию, а не внешнюю версию и не уменьшенную версию
• Убедитесь, что вы изменили 'check' на ''

Изменение исходного кода, возможно, не лучшая практика.Официальный способ изменения параметров использует код, подобный следующему:

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

Пример почти такой же вы найдете на вкладке 7 этой страницы и видите, что он работает сопция 'checkIfFull'.Для меня опция '' тоже работает.

Answer 2

Звучит так, как будто бы подходит каскадный выпадающий список.Здесь пользователь выбирает родительский уровень из раскрывающегося списка, а затем ему предоставляется другой раскрывающийся список, содержащий дочерние элементы и т. Д.Они обычно используются на таких сайтах, как Ebay.

У Стивена Уолтера есть старый пост по основам, который может помочь вам начать работу.сделать Ajax обратный вызов на сервер для каждого списка.Возможно, вам удастся выполнить загрузку полного списка в объекте JSON в отдельном файле JavaScript и использовать плагин JQuery для создания и загрузки раскрывающихся списков.Быстрый поиск нашел этот , но я уверен, что есть много других.