5

jqGridに独自の削除機能を実装したいと思います。現在、組み込みのUIを使用しています（行を選択し、フッターのゴミ箱ボタンを押して確認します）が、各行に削除ボタンを配置し、確認のために独自のUIを実装したいと思います。

APIには、サーバーへの削除を開始できるものは何もありませんdelRowData。クライアントで削除するだけです。これはできますか？

（私はASP.NETコンポーネント、FWIWを使用しています）。

4

3 に答える 3

10

サーバー側の削除を処理する基本的な jqGrid コンポーネントの部分はありません。ビルトインの削除を使用しても、サーバー側でそれを削除するのではなく、自分で処理する必要があります。ただし、誰かがカスタム削除ボタンをクリックしたときにスクリプトが呼び出されるように設定する方法は次のとおりです。

// your custom button is #bDelete
$("#bDelete").click(function(){ 

    // Get the currently selected row
    toDelete = $("#mygrid").jqGrid('getGridParam','selrow');

    // You'll get a pop-up confirmation dialog, and if you say yes,
    // it will call "delete.php" on your server.
    $("#mygrid").jqGrid(
        'delGridRow',
        toDelete,
          { url: 'delete.php', 
            reloadAfterSubmit:false}
    );
});

次の情報は POST 経由で削除 URL に送信されます

Array
(
    [oper] => del
    [id] => 88
)

この場合、id は明らかに関数に渡した ID であり、toDelete.

私は実際にあなたの質問に応えて、自分のプロジェクトのためにこれをやっただけですが、質問を見る前にそれを行う方法について漠然とした考えがありました. だから...私をそれにたどり着かせてくれてありがとう！

于 2010-03-02T02:55:24.197 に答える
2

@Erikは、これで正しい道を歩みました。彼のソリューションは機能しますが、私が避けたかった既存の疑似モーダル ポップアップ確認 UI を保持します。

また、JqGrid ASP.NET コンポーネントが提供するサービスを利用していません。コンポーネントは、適切に構成されたデータ ソース (ObjectDataSource、SqlDataSource など) に接続されている限り、実際にはすべての CRUD 操作を処理します。

この欠けている部分は、コンポーネントの CRUD 操作の背後にあるメカニズムでした。Fiddler をいじってみると、クエリ文字列の JqGrid オブジェクトの ClientID を使用して、関連するデータが同じページに POST されていることがわかりました。

MyPage.aspx?jqGridID=ctl00_ctl00_Content_Content_MyJqGrid

削除の場合、POST の内容は @Erik が説明するとおりです。

oper=del&id=18

したがって、プロセス全体を完全に制御できるように、自分で操作を複製することができました。

$(".DeleteButton", grid).click(function(e) {
    var rowID = getRowID(this);
    $(grid).setSelection(rowID, false);
    if (confirm('Are you sure you want to delete this row?')) {
        var url = window.location + '?jqGridID=' + grid[0].id;
        var data = { oper: 'del', id: rowID };
        $.post(url, data, function(data, textStatus, XMLHttpRequest) {
            $(grid).trigger("reloadGrid");
        });
    } else {
        $(grid).resetSelection();
    } // if
}); // click

getRowID = function(el) {
    return $(el).parents("tr").attr("id");
};
于 2010-03-03T21:17:11.563 に答える
1

もう 1 つの解決策は、削除アイコン (存在する場合) をプログラムでクリックすることです。削除アイコン (実際には div) の ID は "del_[GridId]" です。ID の命名が変更される可能性があるため、これは完全に確実な解決策ではない可能性があります。しかし、まったく同じ動作が得られます (また、より良い確認モーダルも得られます)。

例：

$('#MyButton').click(function() { $('#del_' + gridId).click(); });
于 2011-03-08T21:06:37.113 に答える