ヤフーのユーザーインターフェイスのブログ（YUIBlog）

DataTableをネストした質問サティヤム：行拡大

サティヤムは、（別名ダニエルバレイロ）は長時間YUIの貢献の専門家の多産、寛大な1とYUIのフォーラム 。 彼はまたですライブラリラーニング由井2.8.0：新しい本の由井2.8.0著者の 。 "シリーズサティヤムこの記事は、に"確認サンティーニアルベルトで示唆したとブライアンケイン 。 サティヤムは、シリーズの一部としてYUIBlogにここ数週間のうちにいくつかの追加の質問に答えることになります。

これは、情報アーキテクチャに共通の問題です：あなたは表形式のデータを持っており、あなたが各テーブルの行によって表されるエンティティに関する追加情報を表示するために必要としている。 通常、これは、クリックまたは選択範囲の行を"拡大する"と選択した行のすぐ下にデータを表示することによって達成される。 場合によっては、この追加データは、その行が複数の入れ子のレベルに拡張可能性がありますさらに、DataTableの方法で提供されます。 我々は、 拡張単一の行の行へのドリルダウンのコールの基本的なユースケースを、DataTableのときに使用するのネストされた説明されるようにされている機能は、ケースが含まさらに行の各形式のデータを関連付けられている。

これまでの機能をしてサポートするこれらの試みは、深刻なされていくつかありますが由井2のDataTable 。 独自のリストの例のDataTableが含まれロウ拡張ゲリナスエリック例による。 ジョンLindalさんは彼の提示Treebleをのゆいブログの記事前と時間がいくつかの3由井版ギャラリーインチ 私も試してみましたNestedDataTableプロジェクト。

ソリューションこれらなしの、完全に満足され問題が再発する傾向がある。実際には、二人の一部として、それを求め質問サティヤムシリーズ。 この記事では、私はもう一度潜ろうよ、と戦略と行の拡大とネストされたDataTableのに対処するためのオプションを探る。

いくつかの問題を考慮する

DataTableには、非常に基本的な前提条件のカップルになります。 一つは、内の順序位置は、されていることを行と同じ序数位置の対応するレコード<tbody>マークアップの。 私は、プロパティの出現を17カウントsectionRowIndex序数を返します<tr>内にある場合、要素（セクションはその範囲を<tbody> 、 <thead>または<tfoot>それが含まれています）。 レコードの序数位置は、行の配列へのインデックスとして使用され、また多くの出来事があります。 たとえば、 行の拡張例では、最後にできるように、それが実行すると、テーブルへの道約半分の行を展開すべてして、次の2つのステートメントを実行するデバッグコンソール：

  YAHOO.example.Basic.oDT.getTrEl（YAHOO.example.Basic.oDT.getRecord（17））。イド 

 YAHOO.example.Basic.oDT.get 次 TrEl（YAHOO.example.Basic.oDT.getRecord（17））。イド 

両方が表示されますyui-rec17行の次の必要がありますidを返すステートメントは、答えは第二正しいので、ないです。 行の場合、拡張する前に、行拡大または番号を使用している低と同じようにあなたは、2番目のステートメントが返されますが正しくyui-rec18 。

明らかに、すべての例は、基本的な形式で作品を掲げる。トリックに金額上記の例の"バグ"。 アプリケーションは、安全の境界内にとどまる場合は、問題ありません。 ただし、この機能は、いくつかの問題につながる可能性があります、DataTableのが動作している内部方法について深い事項を想定しています後、1つで、アプリケーションに追加されます。 （それは価値があるのか​​、DataTableには、非常に堅牢であり、その内蔵機能は非常に安全です、それはソート列、セルを編集して選択し、罰金ハイライト、私の知る限りはそれをテストしている。私は、そのほとんどの組み込み人気を破ることができませんでした-機能を備えています。）

DataTableの中に入れ子構造はまた、いくつかの他の合併症を誘う：拡張されたカスタム行のどこかをクリックすると交流を含むDataTableになるバブルネストされた要素をクリックしますので、面倒なことがどこまでそのこと混乱のこと。 あなたはなどにイベントリスニングポイントは、このする必要があります覚えてcellClickEventテーブルの上に親から標的細胞一つのネストされたに属している報告がありますにではなく、親テーブル-も失敗にそのセルがあります列のレコードまたはフェッチ。

最後に、いくつかの概念的な問題があります。 何をしないgetNextTrEl意味ですか？ 現在、自身の行または必要があります、それが含むカスタムみようと呼ぶ）、それらのデータの行 （行を、追加の後、しないのDataTableだけでしょうか含まれては？ データプレーン使用するHTMLの私たちはマークアップを強制的に含まれて私がすると言うことはありますが、行データはない兄弟は、子供たちは、行を以来、ネストされたカスタムされ、行が<TR>兄弟されていない要素を、概念的には、。 そして、もしあなたが到達何とか<TR>要素とメソッドの使用を含むDataTable内の質問とそれに対応するレコードgetRecord()という場合は、 <TR>記録することが、その対応が何であるか、カスタム行： null （それ以降でありません' Tは）を含むDataTableには、入れ子になった一属しているデータ行のレコードが、それはの子ですか？

どのように行にストライプが欲しいですか？ データの行またはカスタムの行が、おそらくあなたは、カスタムの行は、彼らが所属するデータの行と同じ背景色の上に実行したいかどうか現時点では、ストライピングロジックは、偶数と奇数の行を無差別にかかります。

おそらくほとんどのユースケースを収容する、その上の任意の決定としては、一貫性と予測可能性である限り、これらの定義が必要行の拡張機能の側面の一部です。

DataTableをなしネスト

もちろん、我々は、これらの制限に住んでいるかもしれないが、その後のすべてのDataTableを使用して悩ませてのポイントは何ですか？ フォームには場合は、すべてのは、表のいくつかのネストされた情報を表示したいですするには、定期的にできるだけ使用する<table>要素または似たようなものを。 実際には、 3バージョンのTreebleゆい （ 例 ）がない正確に、すべての使用でどれので、まだゆいですが、それが使用される3 DataTableのバージョンは。 あなたは可能性がありますようになどと由井2ことを非常に同じことをよくこの例では HTMLのないDataTableにも<table>すべてで使用されました。 確かに、この例では、非常に視覚的に（私は芸術であることを主張したことがない）醜い簡単です、しかし、その場合、あなたはそれが失敗することがわかっている、少なくともの世話をすべてです。 ただアイディアは、何をすべきかについては、決定する際に評価することがあります。

DataTableを使用して行の拡張

最後に、あなたが本当にDataTableを使用することがあります。 もしそうなら、どのように我々はそれを行くのですか？ 両方Treeble、自分NestedDataTable巣つのDataTable。 エリックゲリナスは、対照的に、私はより柔軟な検索別のアプローチを使用しています。 彼は拡大する何が起こっている上の任意の仮定を行うべきではありません。 これは、使用してrowExpansionTemplate機能設定への参照を属性することができます取るか、またはテンプレート文字列。 文字列テンプレートは、を介して処理されますYAHOO.lang.substitute展開されるの行オブジェクトのレコードからに沿ってデータと。 我々はすでに、列の定義配列内の我々がDataSourceを使って読んでいるすべてのフィールドを定義する必要がないことを知っています。我々は、後で使用するために準備に余分なデータソースのフィールドを維持することができます。 テンプレートメカニズムは、私たちは通常の行のスペースを持っていなかったがためにこれらの他のフィールドの拡張行に表示することができます。 例では、 DataTable名から画像一覧Flickrのメインの画像表示に大きなもするのではないか。 フィールドは、最初からロードされているこれらの写真を指すURLを組み立てます。 拡張時の行は、これらのビットは、組み込みに一緒に入れている<img>画像です拡大行表示のサムネイル ​​タグと。

今、設定されている場合はrowExpansionTemplateを参照する関数は、私たちが望む得るすべての柔軟性を可能性が我々は可能性があります。 私はそのようなアイデアを使用してこの例では別の多少が、とrowexpansion.jsのファイルを指定します。 元は、複数の文字列テンプレートを使用することに集中され、それは、拡張行は破棄することができることを無償でいつでも再構築と仮定。 つまり、拡大は内に入れ子にさらにDataTableを使用してDataTableのような、何かがより複雑な場合はそうではありません。 たびに、列が並べ替えられて、DataTableには、すべての行を削除し、それが削除されるようになった場合は、同様に再構築が途方もなく複雑な内容とするのは高価になり、新たに起動します。 代わりに、私は何をメソッドの状態拡張の行に拡張のリファレンスをされているようオブジェクトの説明を参照してください（ getExpansionStateテーブル親）のレコードに格納されているです。 このデータは、削除されていない結果として、それはいつでも親行が再描画されていることを同じ行を復元するためにはるかに効率的です。

しかし、場合によっては、親の行または意図的に削除されます親は子供が更新されている必要が異なるデータ、おそらく使用して、サーバーから再ロードするDataTable。 私は、彼らがゾンビとしてメモリ内に残り、それ以外のため、明示的にそのような場合には、子の行を削除する必要があります。 したがって、私は（いくつかのメソッドをオーバーライドdeleteRow 、 deleteRows 、 initializeTable 、 destroy ）と削除された親レコードされ、そのネストされたコンテンツを前に削除してください。 ただし、削除のコンテンツは処分のいくつかのより複雑な手段が必要な場合がありますので、十分ではありません。 コンポーネント複雑と同様に多く、DataTableにしたdestroyイベントをメソッドを関連付けられているのとインスタンスクリア必要がありますすることと呼ばれる、完全に。 私が追加rowExpansionDestroyEvent必要に応じてコンテンツを破壊し、このように扱うことができますと、開発者がイベントをすることについての行は、ネストされたことを通知するために。 たとえば：

  albumDT.on（'rowExpansionDestroyEvent'、関数（状態）{ 

     。状態[NESTED_DT]に、destroy（）; 

 }）; 

すべてのイベントが表示されるstate引数単一のオブジェクトをとして。 ここで、私は（自分自身のプロパティ名を使用の下に格納さDataTableの私は、ネストされたリファレンスをNESTED_DT ）と、その呼び出しdestroy方法を提供する。

RowExpansionDataTableは自動的に行の拡張を引き起こすも、その列のクリックを待機列を追加します。 あなたが表示し、アクティブにすると、その列のために何もする必要はありません。 それは、常にコンストラクタで、この単純なコードを使用して、左側に追加されます：

  VARのREDT =関数（elContainer、aColumnDefs、oDataSource、oConfigs）{ 

  （{aColumnDefs.unshift 

          キー：ROW_EXPANSION、 

          ラベル："、 

          クラス名：CLASS_TRIGGER 

      }）; 

      REDT.superclass.constructor.call（これは、elContainer、aColumnDefs、oDataSource、oConfigs）; 

 }; 
  YAHOO.widget.RowExpansionDataTable = REDT; 

RowExpansionDataTableにもリスナーを設定cellClickEventの定数格納されてかどうかをチェックし、その値を設定して、そのキーを1つですクリックされた列は、 ROW_EXPANSION ;そのイベントに応答しても私たちは必要はない、とがリスナーをさらに設定することがありますか私たちは他の列の上の私たち自身の目的のため。

私の基礎は、けれどもrowexpansion.jsのファイル作品であるエリックゲリナスのは、多くの違いがあるも。 私はが付きますエラーが標準的な命名規則は、固定たっぷりに準拠して変更する多くの変数名、プロパティ、メソッド、 JSLint 。 その基本は、しかし、コードがEricさんです。

例では、コメントや説明、テーブル後のサンプルもされrowexpansion.jsのファイルには、従うことは簡単であり、そのAPIドキュメントがご利用いただけますも。

子供をオーバーレイ

別の方法としては、行を追加する拡張は、親の行の上にフロートすることです。 私は自分の私にこれを持っ使用NestedDataTable例 。 テーブルを介してYQLDataSource上記で私は、とYQLこの使用しても、例では、 前回の記事 、YQLをアーティスト検索テーブルに登録され一緒に使用するように不器用なやや2オートコンプリート由井名としてアーティストとの試合を持って戻って部分的にはそれがされます。

ここでは、行をするときに展開し、コンテナ<div>作成され、本体のドキュメントに追加します。 コンテナが絶対配置を使用して移動さ展開されて一の下の行を右に重なっています。 コンテナは、このように行は、1つは、その展開されて横にカバーし、この行の高さが重複するコンテナのスペースを作るために増加しています。

このメカニズムは、私は前に述べた二つの問題から私たちを守ります：行がすべての時間とイベントで一致するDataTableを、レコードと行の序数位置に追加されるDataTableにコンテナからはバブル彼らの子孫ではないのですることができますDataTableを返します。 しかし、いくつかのイベントに注意を払って必要との立場を再計算するコンテナの位置を維持します。 、開いている簡単に彼らの新しい位置にすべてのコンテナに移動するいくつかの小さな子ども連れのメインテーブルを並べ替えので、ブラウザウィンドウのサイズを変更します。

この例では、制限が拡大してすべてのことができる例を使用してわずか2 RowExpansionDataTable中に入れ子のレベルを。 私は2つを組み合わせることに挑戦し、それが成功しない理由私は理論的な理由を参照してください。ただし、これを行うにしようとしている私は例では、ので、任意の適切なサイズのブログの記事で説明するのは大変だったことは、複雑なんfound。 この例では、それはように、親と子テーブルを完全に制御している彼らが展開したとき、または契約、移動、他の方法で再描画または変更取得するには、簡単にそれらのいずれかにアクセスして、そのレイアウトを調整を知っている。 レベルの任意の数にこれを拡張しようと、私はではなく、それらのすべてが、必ずしもDa​​taTableをネストされたコンポーネントの階層のすべてのこれらの変更を上下に伝えることが判明、おそらく他の枝にネストされたコンポーネントに影響を及ぼす変更つのブランチに深くて、大変だった。

複雑さがので、これらの変更を上下に連として参加して一般的な子要素のための標準インタフェースを提供しようとして、それらに作用するというわけではない位置しています。 いくつかのコンテナとそのコンテンツに対してフルコントロールを持っている場合は、管理する必要がありますが、それだけで私は、それは可能性があります認めざるをRowExpansionDataTableは、いくつかの特定のアプリケーションで障害が発生した場合これを行うには理にかなっていると、簡単に修正することはできません。

結論

あなたはいつも、互いに入れ子の表を持っている実際のDataTableをする必要はありませんもしそうなら、私RowExpansionDataTableは、DataTableを拡張する方法の良い例であることに加えて、良い選択です。 それが、私はあなたがそれらにぶつかる場合は、ここでは、それらを回避するように見てわかるように説明するいくつかの問題を持っています。 DataTableには、それ自体は驚くほど堅牢で、非常にきれい自体を処理します。 と私はここにしようとしないか - それは、一般的なコンポーネントで行うのは難しいですが、効率的に解決することができる大きさと子供の位置の変化を伝達する場合、DataTable内の重複するコンテンツは、することも可能なソリューションです。 わたしもScrollingDataTableからバージョン継承をしようとした、それは私が忘れているのではなく、私はそれは些細な作業ではありません知っているわけではない。

：会話をして下さいBloglinesの | テクノラティ

共有し、拡張： ブックマークdel.icio.usに | それをディグ！ | のreddit！