0

目的:を使用してクライアント側でテーブルを更新し、Enterキーを押して新しい変更を加えて新しい変更をクライアント側に表示したらDBを更新できるようにします。

ステータス:現在、テーブルを表示し、jeditableを使用してテーブルを編集し、サーバー側のout.jspページに変数を介しPOSTて値を編集します。このページは、変数を受信して​​クライアント側に表示するために使用します。また、JDBCとSQLITEを使用してこれらのテーブルを動的に生成しており、同じプロセスを使用して新しい値を挿入または置換したいと考えています。idvaluerequest.getParamater

質問:これらの新しい値でDBを正しく更新するために、行/列情報に関する詳細情報を渡すにはどうすればよいですか?

質問2:行全体を渡す方法はありますか?もしそうなら、私は単純な挿入を行うか、すべての値をテーブルに戻すことができます。

現在のコード:

JSPクライアント側:client.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
    type="text/javascript" charset="utf-8"></script>
<script src="js/jedit.js" type="text/javascript" charset="utf-8"></script>
<title>Jeditable Test</title>

<script type="text/javascript">
$(document).ready(function() {
    $('.edit').editable('out.jsp', {
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });
});


</script>
</head>
<body>
    <div class="content">
        <table id="demotable1"
            style="border: 1px solid #ccc; margin: 50px auto;">
            <thead style="border: 1px solid #ccc;">
                <tr>
                    <th filter-type='ddl' style="border: 1px solid #ccc;">ONE</th>
                    <th filter-type='ddl' style="border: 1px solid #ccc;">TWO</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class='edit' in="ONE" style='border: 1px solid #ccc;'>Value 1</td>
                    <td class='edit' id="TWO" style='border: 1px solid #ccc;'>Value 2</td>

                </tr>
                <tr>
                    <td class='edit' id="ONE" style='border: 1px solid #ccc;'>Value 3</td>
                    <td class='edit' id="TWO" style='border: 1px solid #ccc;'>Value 4</td>
                </tr>

            </tbody>
        </table>

    </div>
</body>
</html>

表画像:

編集可能なテーブル

JSP-out.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

                <% 
                String id = request.getParameter("id");
                String value = request.getParameter("value");

                %>
</head>
<body>
<%=id%>
<%=value%>
</body>
</html>
4

3 に答える 3

1

サーバーに正確に送信するものはわかりませんが、jedittable使用するIDが複数の行を持つテーブルの場合、同じパラメーター名に複数の値がある可能性があるため、getParameterValuesを使用してすべてをとして取得します。との両方の配列は同じ長さである必要があります。idvalueString[]idvalue

各行を識別できるようにするには、データベースに保存されているレコード/行ごとに何らかの一意のIDを設定する必要があります。

このようなIDは、たとえばUUIDを使用して生成できます。

String uid = UUID.randomUUID().toString();

魔女は次のようなものを生成します

76c824f7-3016-4a15-a10f-a60435dc966f

GETリクエストでHTMLを生成する際、フォームのuidを使用して各セルの名前を生成する必要があります。<uuid>_<column_name>たとえば、uid76c824f7-3016-4a15-a10f-a60435dc966fとcolumnnsを含むレコードONETWO

<td name="76c824f7-3016-4a15-a10f-a60435dc966f_ONE" ...>value 1</td>
<td name="76c824f7-3016-4a15-a10f-a60435dc966f_TWO" ...>value 2</td>

とuidでの記録のために1a8c2aad-a438-4263-972b-30a839421e6d

<td name="1a8c2aad-a438-4263-972b-30a839421e6d_ONE" ...>value 3</td>
<td name="1a8c2aad-a438-4263-972b-30a839421e6d_TWO" ...>value 4</td>

等々。

投稿後、すべてのレコードをロードし、名前を生成し、getParameterを使用して各列の値を取得して更新する必要があります。

データベースに挿入する必要がある新しいレコードの魔女を考慮する必要があります。

行全体を単一のパラメーターとしてサーバーに送信する場合は、ブラウザーでjavascriptを使用して処理する必要があります。たとえば、次のようなものを生成できます

'76c824f7-3016-4a15-a10f-a60435dc966f=value 1,value 2'
'1a8c2aad-a438-4263-972b-30a839421e6d=value 3,value 4'

パラメータ名はuidになります。カンマ区切りの値を分割した後、対応するレコードの各列を更新できます。

于 2013-03-03T03:13:14.570 に答える
0

次の概念を使用できます。

より標準的な方法:JSONオブジェクトを使用してデータを交換する

  1. データをAJAXに送信するために構築するJSONオブジェクト
  2. アプリケーションサーバーを呼び出すためのjQueryAJAX
  3. JSONライブラリを使用してJSON文字列をJavaオブジェクトに変換してから、トランザクションを実行します。

1)JSONオブジェクトのデータ構造を定義します。

Javaクラス:

 class OneDBRow {
      String col1Value;
      String col2Value;
  } 

対応するオブジェクトのJSON配列

  {
      {type:"OneDBRow", col1Value: "hello", col2Value: "Value 2"},
      {type:"OneDBRow", col1Value: "Value 3", col2Value: "Value 4"}
  }

2)javascript側を使用してJSONオブジェクトを構築します(JQueryを使用)

3)jQuerySelectorを使用してオブジェクトにデータを入力します

4)データの一部としてオブジェクトを送信します-JSONライブラリを使用してオブジェクトを構築する必要があります

オブジェクトの配列を作成するための正確な構文がわかりません。自分で調べる必要があるかもしれません。

于 2013-03-03T03:10:42.090 に答える
0

私は解決策を見つけ、誰かが興味を持ったら投稿すべきだと思いました。

JQUERY:

<script>
$(document).ready(function() {
    /* Init DataTables */
    var oTable = $('#resource-table').dataTable();

    /* Apply the jEditable handlers to the table */
    $('td', oTable.fnGetNodes()).editable( 'out.jsp', {
        "callback": function( sValue, y ) {
            var aPos = oTable.fnGetPosition( this );
            oTable.fnUpdate( sValue, aPos[0], aPos[1] );
        },
        "submitdata": function ( value, settings ) {
            return {
                "row_id": this.parentNode.getAttribute('id'),
                "id": this.getAttribute('id'),
                "colName": this.getAttribute('col'),
                "column": oTable.fnGetPosition( this )[2]
            };
        },
        "height": "14px"
    } );
} );   

</script>

上記はパラメータをJSPページに渡しました。JSPページはパラメータです。

String colName = request.getParameter("colName");
String value = request.getParameter("value");
String row = request.getParameter("row_id");
String column = request.getParameter("column");

TRバーを行として使用したため、行は1ずれていました。それで、それを整理するために以下を使用しました。

int rowId = Integer.parseInt(row);
        rowId += 1;

次に、JSPスクリプトレットを介してJDBC接続を使用しました(MVCではありません。私は知っています)

Class.forName("org.sqlite.JDBC");
        conn = DriverManager.getConnection("jdbc:sqlite:/db.sqlite");
        Statement stat = conn.createStatement();
        add_time = conn.prepareStatement("UPDATE table SET "+colName+" ='"+value+"' WHERE rowid = "+rowId+";");
        add_time.executeUpdate();
于 2013-03-03T17:58:53.547 に答える