2

テーブル（jqGrid）があり、ドキュメントの読み込み時に行の前に小さなアイコン/画像を動的に追加したいと思います。画像は、グリッドの非表示の列の値（日付）の1つに基づいて挿入されます。これは、ページ/グリッドビューアに対する行の重要性/緊急性を示すことになっています。私はjQueryに精通しており、ロジックがダウンしていますが、問題があるのは、実際のグリッドの一部ではないため、DOM構造のどこにこの要素を挿入する必要があるかということだけです。グリッドの外側の行のすぐ左に浮かぶはずです。だから基本的に、私が求めているのはこれです：

1）DOM構造のどこにこの要素を挿入する必要がありますか？実際のテーブルを含むdivコンテナ？;

2）どのようにスタイリングする必要がありますか（CSS）？

私が思いついた唯一のアプローチは、問題の行のy座標を取得し、そのy座標に設定されたdivコンテナー（テーブルを含む）に挿入することです。これが最善の方法なのか、それとも正しい方法なのかわかりません。

編集：ここにはたくさんの良いアプローチがあります。「afterInsertRow」イベントとDavidのアプローチを組み合わせることを考えています。よろしくお願いします！

4

3 に答える 3

2

なぜ要素の外側に要素を追加するのtableですか？マークアップを指定して、非表示のセルを使用して:hover、親のに応じて表示およびスタイル設定する画像/要素を含めるだけです。tr

<table>
    <thead>
        <tr>
            <th></th>
            <th>Column 'one'</th>
            <th>Column 'two'</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>row one</td>
            <td>row one</td>
        </tr>
        <tr>
            <td></td>
            <td>row two</td>
            <td>row two</td>
        </tr>
    </tbody>
</table>

そしてCSS：

tr th:first-child,
tr td:first-child {
    visibility: hidden;
    border: 0 none transparent; /* hide the borders */
    width: 1em; /* define the width, to avoid the visible content */
}               /* causing page-jumps */

tr th:first-child + th,
tr td:first-child + td {
    border-left: 2px solid #000; /* style the cell *after* the first-child */
}                                /* with a border to 'fake' the look of the */
                                 /* new content being appended outside */
td, th {
    visibility: visible;
    border: 1px solid #000;      /* show borders to continue the illusion */
    height: 2em;                 /* or whatever... */
    line-height: 2em;
}

このアプローチは機能しているようです（IEでも機能するはずです）： JS Fiddleデモ、

于 2012-10-22T17:35:21.193 に答える
0

最も簡単な解決策は、jQueryの「myatof」ポジショニングを使用することです。

1）ページの本文に要素を追加します。

2）jQueryの「myat of」ポジショニングを使用して、緊急としてマークしようとしている行要素の横に要素を配置します。http://docs.jquery.com/UI/API/1.8/Position

于 2012-10-22T17:35:37.513 に答える
0

jqGridからafterInsertRowイベントを使用できます。

var my_jqGrid = $('#id_table').jqGrid({
   ... //Other configs

   afterInsertRow: function(rowid, rowdata, rowelement){

       console.log(rowdata);
       //Here you code condition to insert in other div
       if(rowdata['key']=='status_ok'){
           $('#div_id').append( '<img src="image/ok.png" />'  );
       }          
   }

});

こちらのwikiを参照してください

さて、私は単純な画像を追加します。divコンテナ画像を追加し、cssで高さを設定できます。

于 2012-10-22T18:10:48.963 に答える