qual é o melhor selecionador multiselect do jquery para dados hierárquicos

Eu tenho um selecionador de dropdown “flat” hoje com mais de 200 itens. A questão é que a lista é na verdade uma hierarquia de dados, então eu queria ver se havia algum selecionador que pudesse mostrar uma hierarquia de dados para que as pessoas pudessem ver onde cada item se encheckbox na lista geral.

Neste momento estou concatenando os níveis para mostrar algo assim:

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

mas achei que poderia haver um widget de interface do usuário melhor que facilitaria a escolha de uma lista em que a própria lista tenha dados em níveis diferentes.

Tente esta tree de seleção

EDITAR 1

Você pode personalizá-lo facilmente para as suas necessidades exatas, desde que você esteja usando a versão mais recente, por exemplo, para alterar a seleção de ancestrais quando um filho é selecionado. Ver abaixo:

(Linha 45 em diante de 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: '' }, 

EDIT 2

Se você tiver problemas para fazer isso, verifique:

  • Que você tem jquery.checkboxtree.js versão 0.5 [versão está na linha 8 do arquivo].
  • Você está se referindo à sua cópia local, e não a uma versão externa, e não a uma versão reduzida
  • Certifique-se de que você alterou 'check' para ''

Alterar o código-fonte talvez não seja a melhor prática. A maneira oficial de alterar os parâmetros usa código como este:

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

Você encontrará um exemplo quase como esse na guia 7 desta página e verá que funciona com a opção 'checkIfFull' . Para mim, a opção '' também funciona.

Parece que uma lista suspensa em cascata pode ser adequada. É aqui que o usuário seleciona o nível pai a partir de um menu suspenso e, em seguida, é apresentado a outra lista suspensa contendo os itens filhos, e assim por diante. Estes são comumente usados ​​em sites como o Ebay.

Stephen Walther tem um post antigo sobre o básico que pode ajudar você a começar.

Note que nem sempre é necessário fazer uma chamada Ajax de volta ao servidor para cada lista. Você pode conseguir carregar a lista completa em um object JSON em um arquivo JavaScript separado e usar um plug-in do JQuery para criar e carregar os menus suspensos. Uma pesquisa rápida encontrou esta, mas tenho certeza que há muitos outros.