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 に答える