1

スクリーンショットのモックアップ: http://tinypic.com/r/y2qex/5

問題: 53 列のテーブルがあります。年の各週に 1 つ、ユーザー名に 1 つ。各エリアのユーザー数に応じて、10 ～ 80 行になります。

ユーザーは、年次休暇、トレーニングなど、週ごとに「フラグ」を設定する必要があります。

現在、各セルに選択ボックスがあるテーブルがあります。問題は、これが 5 行で機能することですが、選択ボックスが多すぎるため、20 行以上を取得し始めると、ブラウザーはページを開きません。

新たに選択されたものはすべて照会できる必要があるため、DB に保存できます。

私が求めているのは、この問題をより適切に解決する方法に関するいくつかの一般的なアイデア (つまり、特定のコードではない) です。良いアイデアが浮かんだら、正確なコーディングに取り掛かります。

これまでの私のアイデア: - すべてのセルをテキストのみにして、現在の選択内容で、各ユーザーの横に「編集」オプションを用意します。これにより、編集可能なモーダル ウィンドウとして行が開きます - すべてのセルに「onClick」イベントを持たせる、クリックした時点でドロップダウンリストが生成されます

しかし、他の人がこの問題にどのようにアプローチ/解決するかを聞きたいと思いますか?

4

4 に答える 4

0

オプションが多くの選択ボックスで同じである場合、それらすべてに対して 1 つのデータリストを使用することを検討できます。これはパフォーマンスが向上し、ページごとにより多くのデータリストを使用できるようになると思います。残念ながら、これは HTML 5 の機能であるため、すべてのブラウザーと下位互換性があるわけではありません。

http://www.w3schools.com/html5/tag_datalist.asp

それ以外に、特定の列数を超えた場合は、テーブルのページネーションを検討できます。または、tumbr のように、十分に右にスクロールすると、より多くの列が ajax を介して読み込まれます。あなたのアイデアもうまくいくはずです。

于 2012-04-06T17:30:38.743 に答える
0

おそらく、ページ上に単一の非表示の選択ボックスを作成し、クリックするとそれをセルに表示し、クリックの結果をセルに data-attribute を書き込み、おそらく同時に XHR を実行することで処理できますか?

非表示のフォーム要素をたくさん持つこともできますが、それはひどいものです。

実装に関しては、テーブルにアタッチされた単一のイベント ハンドラーを使用して実行できます。各セルには、名前と週を表すデータ属性があります。

とにかく、20 行ほどの追加の js 行が必要になりますが、これはパフォーマンスが高いはずです。

于 2012-04-06T17:44:33.957 に答える
0

カレンダー機能の使用を検討することをお勧めします。Javascript カレンダーはたくさんあると思います。また、最近 DataTables を使用して多くの成功を収めています。DataTables + jEditable を使用して、クリックして編集するテーブル表現を作成できます。クリックすると選択ボックスが表示されますが、それ以外の場合はテキストのみが表示されます。

于 2012-04-06T17:27:13.210 に答える
0

たぶん、このようなものがあなたのために働くかもしれません:

var td=document.getElementsByTagName('td');
for(var i=0; i<td.length; i++)
{
    td[i].id='cellID_'+i; 
    td[i].onclick=function()
    {
        //make menu appear on this element id
    }
}
于 2012-04-06T18:48:26.403 に答える