顧客検索機能を備えた管理 Web ページがあります。名前を入力すると、Ajax を使用して、一致する顧客のテーブル (およびそれぞれに限定された量の関連データ) がページに挿入されます。顧客 (行) をクリックして顧客のプロファイルを表示できるようにしたいと考えています。プロファイルには、複数の要素、フォーム、ボタン、および複雑な機能が含まれる場合があります。
このプロファイルを別のページなどに置くのではなく、クリックした場所 (顧客の行の下) に直接挿入し、作業が終わったら閉じるようにしたいと思います。
これらの要素を DOM に追加しようとしましたが、タグ間のすべてがテーブルの一部として入ります (すべて 1 つのセルに押し込まれます)。最初に何らかの方法でテーブルを分割する必要がありますか? そもそもテーブルを使用しないのですか？
サイトの他の部分でもこのように「モジュールを挿入」する必要があるため、堅牢なソリューションを探しています。
昨年も同様の実装を行いました。
他の人が提案したことに反して、行を追加することは良い考えではないと思います。その理由は、イベント デリゲーションを使用してユーザーのクリックを処理する必要があり、行を追加すると混乱するか、少なくとも実装が複雑になるためです。
私の選択は、既存の顧客行内にテーブルを挿入することでした。オーバーレイまたはツールチップはよりクリーンな実装を提供しますが、一度に 1 つの顧客のみを展開する必要がある場合にのみ機能します。
データをインラインで表示する (他のコンテンツを押し下げる) 場合
は、顧客の後に 1
秒を追加<tr>(または置き換え) して
、テーブルの幅を埋めるように設定され<td>た1 秒にします。この行が不要になったら、colspanまたはこの行を削除できます。display:none
データをオーバーレイして (他のコンテンツを覆い隠して) 表示したい場合は、
JavaScript を使用して、行の最初の TD の画面座標を決定し、絶対位置の div オーバーレイをその場所に配置します。(これは、リッチ コンテンツの「ツールヒント」に似ています。)
ユーザーが「プロファイル」のデータを他の顧客の画面に既に表示されているデータと比較したいと合理的に期待できる場合、私は個人的に最初のものを使用します。そうでない場合は、2 番目の解決策を使用して、ページのコンテンツの変更を最小限に抑えます (ユーザーが向きを維持できるようにするため)。