0

jqueryとjeditableを使用して、ボタンでテーブルの行を編集する方法を見つけようとしています。私の目的は、目的の行セルを編集モードに変更する「編集」ボタンを用意することです。

今のように私は持っています：

$(document).ready(function() {
    $("#addrowbutton").click(function() {
        $("#addrow").show();
    });
    $("#canceladd").click(function() {
        $("#addrow").hide();
    });
    $("#saveadd").click(function() {
        $("#message").text("Added").fadeOut(4000, function() {
            $(this).css('display','block').text("");
        });
        $("#addrow").hide();
    });
    $("#add_trade_form").submit(function() {
        process_details();
        return false;
    });
    function process_details() { 
        $("#add_trade_form").ajaxSubmit();
        return false;
    }
    $(".editlink").click(function() {
        var datapos = $(this).parent().parent().prevAll().length;
        var editpos = datapos + 1;

        $("#trades_table tbody tr:eq(" + datapos + ")").hide();
        $("#trades_table tbody tr:eq(" + editpos + ")").show();
    });

    $(".cancellink").click(function() {
        var editpos = $(this).parent().parent().prevAll().length;
        var datapos = editpos - 1;

        $("#trades_table tbody tr:eq(" + datapos + ")").show();
        $("#trades_table tbody tr:eq(" + editpos + ")").hide();
    });
    $(".savelink").click(function() { 
        var editpos = $(this).parent().parent().prevAll().length;
        var datapos = editpos - 1;

        $("#message").text("Saved...").fadeOut(4000, function() {
            $(this).css('display','block').text("");
        });
        $("#trades_table tbody tr:eq(" + datapos + ")").show();
        $("#trades_table tbody tr:eq(" + editpos + ")").hide();
    });

});

そう：

  • 行の追加はボタンで表示および非表示

  • 行の表示を編集し、必要な値でキャンセルする必要があります

私が今迷っている場所：

  • 入力から新しい値を取得してコントローラーに渡す方法 (複数の ID、値) ... MVC を使用します。<= .savelink

  • ページを更新せずに新しい行を保存するが、新しい値でテーブルを更新する方法 <= #saveadd

すべての助けを前もって感謝します。

乾杯、

/ジャセク

4

1 に答える 1

0

jqGridの使用を強くお勧めします

デモの例と編集の例を見てください。

.NET用のプラグインもあります

于 2010-08-31T09:17:34.557 に答える