5

Spring、jsp、javascript、jqueryを使用してWebアプリを開発しています。

datatablesを使用してテーブルを表示します。テーブルの行をクリックすると、すべてのフィールドがインライン編集入力、選択などに変更されます。さらに、次の行にいくつかの追加の入力フィールドと保存ボタンが表示されます。

今、私はこれを行ういくつかの方法を見ています。どちらを取るかわかりません。

  1. 選択した行へのハンドルを取得してから、tdを反復処理し、それらを入力/選択フィールドに変換できます。次に、新しいフィールドと保存ボタン用に追加の行を挿入できます。私はこれをクリーンな解決策とは考えていません。フォームにSpringModelAttributeバインディングを使用する代わりに、手動でPostを発行する必要があります。（ここでもModelAttributeを使用できますか？）

  2. 次のようなjspファイルに編集フォームを作成できます。

    <form:form action="" commandName=""> <td> <input ... > </td> <td> <select ... > </td> </tr> <tr> <td> <label> <input new field> </td> <td> <button> </td> </tr>

テーブルの既存の行のtrを再利用する予定なので、jspファイルの先頭がないことに注意してください。このようにして、クリーンなフォームを作成し、フォームをJavaクラスにバインドする既に作成したupdateメソッドを使用することもできます。また、入力フィールドと列名の配置についても気にする必要はありません。

生成されたhtmlは次のようになります...

このアプローチの問題は、HTMLにフォーム要素を配置すると、フォーム全体がテーブルの1つのセルに詰め込まれ、見栄えが悪くなり、レイアウト全体が台無しになることです。抜け道はありますか？テーブルの内容をcolspanを持つものに置き換えてから、この要素内にdivを配置し、cssを微調整して、入力フィールドがテーブルの列名と一致するようにする必要がありますか？

アライメント不良を示す画像

あなたが提案できるより良い解決策はありますか？質問があまり明確でない場合は、詳細を記入できます。

4

6 に答える 6

3

これは私がすることです（開発者は簡単なソリューションが大好きなので、サーバー側の開発のバックグラウンドから来ています）

  1. テーブルを1つのフォームでラップします
  2. 行の編集（行をクリック）で、正確なtrのように見える純粋なhtmlを返すajaxリクエストを開きますが、追加したいものは何でも追加します。
<tr><td><input type="text" name="text1" ... /></td><td>second row... </td></tr>
<tr><td colspan="2">And hey, here is more, and the save button ... </td></tr>

  1. jQueryで、trを取得したコンテンツなどに置き換え(myTr.replace($(ajaxResponse)))ます

  2. 現在、[保存]ボタンはフォームの定期的な送信です

  3. ajax経由で送信する場合は、完了したら、ajax応答で古いhtmlを返し、2つのtrを古いtrに置き換えます（jqueryで簡単に見つけることができる属性を新しいtrに与えることでフックする必要があります）

  4. 二重編集を防ぐためにグローバルキーをオフにすることを忘れないでください。ユーザーは一度に1行ずつ編集できます。

更新：サーバーではなくクライアントに負荷をダンプするための2番目のソリューションを追加

サーバーの過負荷を回避するために（通常の習慣になるまで心配することはありませんが）、フォームフィールドをHTML内のテンプレートとして作成し、文字列置換（またはjQueryテンプレート）を使用することができます。手順2で応答を取得し、テンプレートを呼び出して、文字列をすべての行に保存する属性に置き換えます...次のようになります。

<div id="myTemplate"> // or you can use jQuery script templates
    <tr><td><input type="text" name="${Name}" ... /> id is ${Id}</td><td>${SecondRow}... </td></tr>
    <tr><td colspan="2">Save button here.... and may be more text ${MoreText}</td></tr>  
</div>

コードのすべての行に、次のように、何に置き換えたいかを知るのに十分な属性またはIDを追加します。

<tr data-itemid="34"><td ><input type="text" name="text1" id="findme" ... /></td><td data-moretext="here is more text">second column </td></tr>...etc

だから今あなたの交換スクリプトで：

$("#myTemplate").html().replace("${Name}", $(thisrow).find("#findme").attr("name"))
    .replace("${Id}",$(thisrow).attr("data-itemid"));

等...

もちろん、送信後はサーバーに送信する必要がありますが、ユーザーが「キャンセル」した場合は、別の読み取り専用テンプレートを使用できます。

ちなみに、私は通常、jQueryテンプレートを使用して、編集テンプレートと表示テンプレートを作成しますが、編集フォームを繰り返し、jQueryajax送信を手動で使用します...しかしそれは...私の友人です単純なクリーンでメンテナンス可能なソリューションではありません

于 2012-10-09T12:59:21.877 に答える
1

私は一年前にこのような問題に直面しました。これは厄介な問題です。行の各tdをトラバースしてテキストフィールドに変換する場合、またはこのために個別のjspファイルを作成することができます。

ただし、この場合の最善の方法は、tdの内容を入力フィールドに変更し、データを手動で投稿することです。この場合、フォームタグをtrにラップできないためです。各入力フィールドの値を手動で投稿する必要があります。

PS最良の解決策は、編集ダイアログを作成することです。

于 2012-10-05T05:02:19.020 に答える
1

別の解決策がありますが、あまり気に入らないという印象を受けています...データテーブル全体に単一のフォームを使用できます（テーブル全体をフォームにラップすることは許可されています）現在の入力フィールドを生成します行とそれが更新された場合は、javascriptと非同期でフォームを送信し、tdの内容を元のhtmlに復元します。name= "field []"などのフィールドに名前を付けると、一度に複数の行を送信することもできます（あなたはそれが欲しいでしょう）。

次のようなHTMLコードを記述できます

<form action="">
<table>
<tr><td><input type="hidden" name="row[]" value="1"/><input name="field[]"/></td></tr>
<tr><td>field value for row2</td></tr>
<tr><td><input type="hidden" name="row[]" value="3"/><input name="field[]"/></td></tr>
</table>
</form>

jqueryでフォームを取得し、xmlhttprequestを介して送信できます。これは、各行が個別のフォームである場合（これは違法です）、複数の行が必要ない場合は、[]を削除して各行を送信するだけです。値を送信すると、正しく番号が付けられます。Javaでどのように動作するか正確にはわかりませんが、phpでは次のようになります。

$_GET[row][0] = 1;
$_GET[field][0] = 'value typed in row1';
$_GET[row][1] = 3;
$_GET[field][1] = 'value typed in row3';

同じ名前を再度使用しないようにするための代替テーブル定義

<form action="">
<table>
<tr><td><input name="field[1]"/></td></tr>
<tr><td>field value for row2</td></tr>
<tr><td><input name="field[3]"/></td></tr>
</table>
</form>

上記と同じテーブルですが、エントリごとに明示的なインデックスを設定するだけで、応答で名前が重複しないようにします。できれば、そこで変更しているテーブルの行を説明できる一意の識別子を使用します（可能な場合は主キーを使用します） ）行番号の代わりに、それが十分に明確でなかった場合に備えて。

于 2012-10-07T17:52:43.833 に答える
1

やってみました：

  1. テーブル全体をフォームでラップします
  2. データエントリを無効な入力として使用し、CSSを介して境界線を非表示にします
  3. ユーザーが[編集]をクリックすると、入力が有効になり、境界線が表示されます
  4. おそらく、フィールドごとに非表示の要素が必要になります
  5. ユーザーがフォームを送信したら、ajax経由で投稿し、入力を無効に戻し、境界線を非表示にします
于 2012-10-09T11:52:08.563 に答える
1

どうcontenteditableですか？

デモ： http： //jsfiddle.net/SO_AMK/XQekC/

jQuery：

var ctrlDown = false;
$(document).keydown(function(e) {
    if (e.which = "ctrlKey") {
        ctrlDown = true;
    }
}).keyup(function(e) {
    if (e.which = "ctrlKey") {
        ctrlDown = false;
    }
});


$('#example').dataTable();

$("#example tr").click(function() {
    if ($(this).hasClass("row_selected") && ctrlDown) {
        submitRow($(this));
        return false; // Break out so the next if doesn't run
    }
    else if ($(this).hasClass("row_selected") && ctrlDown == false) {
        return false; // Break out so the next if doesn't run
    }

    if ($(this).siblings(".row_selected").length && ctrlDown == false) {
        $(this).siblings(".row_selected").each(function() {
            submitRow($(this));
        });
    }

    $(this).addClass("row_selected");
    $(this).children("td").each(function() {
        $(this).attr("contenteditable", true);
    });
});

function submitRow(elm) {
    var data = [];
    $(elm).removeClass("row_selected").children("td").each(function() {
        data.push($(this).text());
    });
    alert(data); // This will stop the keyup from firing, but you won't (I hope) really be using alerts
}​

これには、サーバーへの送信機能以外のすべてがあり、完全にインラインであり、複数の行を選択するためのサポートがあります。

唯一のバグは、データアラートが表示されると、フォーカスがメインウィンドウから外れるため、キーアップイベントが発生しないことです。アラートを使用しない可能性があるため、これは問題にはなりません。フィドルで修正するには、アラートが閉じた後、行をクリックする前にCtrlキーを押して放します。

于 2012-10-12T15:49:18.233 に答える
0

いくつかの問題があります

  1. あなたのいいえ。テーブル内の列と表示される編集列が異なります
  2. 行を編集するための完全なデータがない可能性があるため、Ajax呼び出しを実行して取得する必要がある場合があります

完全なデータがある場合は、ポイント2は必要ありません。クリックしたtrをパラメーターとして、関数fが呼び出されたとしましょう。

function f(row)
{
     var newRow = yourTable.insertRow(parseInt(row.rowIndex,10)+1);
     //you can place the above or below the clicked row , or you can even make the row visible false And then show the new row
     Var newCell = newRow.insertCell(0);
     newCell.colspan = 6;//the count if columns in your table row
     NewCell.innerHTML = " put your HTML content here";
}
于 2012-10-13T04:38:58.753 に答える