大量のデータ入力に最適なWeb UI
ユーザーが大量のデータをWebアプリケーションに入力する必要がある場合に最適なソリューションを探しています。
例
- 店主は、毎月30〜40個の新製品をシステムに入力したいと考えています。店のオーナーは、すべての製品、数量、価格、製造元、連絡先情報、シリアルコードなどのスプレッドシートを持っています（おそらく約10の異なるフィールド）。
現在私は、ユーザーがExcelなどのスプレッドシートアプリケーションからデータをコピーして貼り付けることができるようなグリッドビューを考えています。
ユーザーがこれだけのデータを（各項目を個別に入力せずに）入力できるようにするための最良のWebソリューションは何ですか？
データベースインポートルーチンによって自動的に処理されるスプレッドシートファイルをアップロードするUIはどうですか？
謝罪、新しいポスター。
だから、これを正しく読んだら、あなたが求めているのは、WebアプリケーションがExcelスプレッドシートから入ってくるクリップボードから貼り付けられているデータを読み取る方法なのか？それは確かにあなたが使っているテクノロジーを知るのに役立ちます。次のように貼り付けられたExcelデータは、次のようにフォーマットされたテキストのようになります。
0055486645655豆、緑700070 0005525551154豆、ピンク99010
データを貼り付けることができるテキストフィールドを設定するだけです。次に、文字列をサニタイズして、フォーマットの期待に基づいて解析して表にできます。それは確かにかなりの解決策ではありませんが、それは仕事を成し遂げるでしょう。 JSFでは、単純にデータをサーバーにAjaxし、入力フィールドを非表示にし、ユーザーが承認する内容でデータテーブルを更新して、適切な情報がデータベースに確実に渡されるようにすることができます。
彼らがデータを保存する形式をすでに知っているのであれば、すばらしいことです。それにより、単純なファイル入力フィールドを作成できます（データベースに実際にコミットする前に、ユーザーがアップロードした内容を確認できることを確認してください）：ユーザーは1つのものをクリックするだけですべてを独自に計算する「マジックボタン」が大好きです:-)
列の順序がわからない場合でも、CSVなどの既知の形式であれば、データの最初の2行を表示して、ユーザーに正しいデータと一致するように要求できますcolumnを使用すると、順序がわかり、ユーザーに非常に具体的な形式でデータを保存するように強制することなく、すべてを一度にインポートできます。また、次回の形式も記憶できます。個人的にはそれが私のお気に入りの選択です。
それ以外の場合、手動入力の場合、最初に1行のみを表示することをお勧めします：
次に、ユーザーがその行に少なくとも必要なすべての列を入力したら、最初の行の下に入力の2番目の行を追加します。間違いがあり、前の行に戻った場合、彼はおそらくデータを順次入力し、入力フィールドの巨大な壁に直面するのではなく、一度に行のみに焦点を当てます。
ドラフトを時々保存する必要があります（例：Stackexchange）誤ってすべて入力し直さなければならないよりも、長いデータ入力にイライラすることは何もないので間違ったキーを押します（実際には、送信せずにページを離れるときは、データがまだ保存されていないことを示す確認ボックスを表示することができます）
フォーカスされたセルを含む行全体を強調表示します（そしておそらく列も同様）、彼が遠くの列を変更したい場合はそのようにします側では、画面に多くの行がある場合、彼は間違った行を埋める可能性があります。 Zebra-coloringも役立ちますが、意見は分かれています。
- 行のグリッドが本当に長い場合（お勧めしませんが、簡単に混乱する可能性がありますが、本当に必要な場合）、列のタイトルが常に表示されるようにしてくださいスクロールしても上部に表示されます。たとえば、 Thead jQueryプラグインのデモ を参照してください。
次のラベルが付いたシンプルなテキストボックス：
このような製品のリストを入力してください：
在庫番号;製品名;請求書名;在庫数
列をセミコロンで区切り、1行に1つの製品
データを解析します。
ただし、正しく行うには少し手間がかかります。入力を検証するときは、不正な形式の予期しないデータを検出し、ユーザーにそのことを指摘して、データを失うことなく修正できるようにします。最も単純なサーバー側の方法は次のとおりです。
次の75製品を認識しました。
これは正しいです？ [はい、データを入力してください] [いいえ、修正します]
さらに良いのは、クライアント側のプレビュー（stackoverflowへの投稿など）です。
理論的根拠：グリッドと比較すると、セルナビゲーションと列の配置が失われます。これは、データがreviewingおよびmodifyingの場合に重要です。ただし、enteringの場合は重要です。データ、セルと行の区切り記号はそれほど重要ではなく、Returnは新しい行を開始するためのより適切な動作を持っています。
非常にシンプルなインターフェースがあり、1つまたは2つの製品を入力するためにすぐに使用できます。また、利用可能なソースに関係なく、大量のレコードのリストを貼り付けることができます。同じコードを使用して、アップロードされたファイルを処理できます（@Michael Zuschlagが推奨）。
個々の入力フィールドに値を入力することは避けます。これは多くの場合、ユーザーよりもプログラマーの助けになります。