1

CRUD アプリケーションで jQuery の jTable プラグインを使用しました。私の問題は、削除アイコンをクリックすると確認ダイアログが表示されますが、削除ボタンをクリックしてもダイアログが消えず、ページを手動で更新して反映されたテーブルをロードする必要があることです。

問題のスクリーンショットは次のとおりです。

ここに画像の説明を入力

ダイアログが消えなくなり、ダイアログの閉じるボタンを手動でクリックすると、次のように表示されます。

ここに画像の説明を入力

私はこの振る舞いを望んでいません。削除ボタンをクリックすると、ダイアログが消え、テーブルがリロードされます

スクリプトは次のとおりです。

 <div id="StudentTable" style="width: 580px; margin: auto;"></div>

<script type="text/javascript">

    $(document).ready(function () {

        //Prepare jtable plugin
        $('#StudentTable').jtable({
            title: 'The Student List',
            actions: {
                listAction: '/jTableTest/StudentList',
                deleteAction: '/jTableTest/DeleteStudent',
                updateAction: '/jTableTest/UpdateStudent',
                createAction: '/jTableTest/CreateStudent'
            },
            fields: {
                id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                name: {
                    title: 'Name',
                    width: '15%'
                },
                birthdate: {
                    title: 'Birth Date',
                    list: true,
                    width: '18%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                }
            }
        });

        //Load person list from server
        $('#StudentTable').jtable('load');

    });

</script>

削除アクションは次のとおりです。

[HttpPost]
        public JsonResult DeleteStudent(int id)
        {
            try
            {
                //_personRepository.DeletePerson(personId);
                student student = db.students.Find(id);
                db.students.Remove(student);
                db.SaveChanges();
                return Json(new { Result = "OK" });
            }
            catch (Exception ex)
            {
                return Json(new { Result = "ERROR", Message = ex.Message });
            }
        }
4

6 に答える 6

2

Ello、私は更新の追加と削除で同じ問題を抱えていました。私がやったことは、イベントの追加、更新、削除を利用し、テーブルを手動でリロードすることでした。詳細については、ドキュメントのイベントを参照してください。


<div id="StudentTable" style="width: 580px; margin: auto;"></div>
<script type="text/javascript">

    $(document).ready(function () {

        //Prepare jtable plugin
        $('#StudentTable').jtable({
            title: 'The Student List',
            actions: {
                listAction: '/jTableTest/StudentList',
                deleteAction: '/jTableTest/DeleteStudent',
                updateAction: '/jTableTest/UpdateStudent',
                createAction: '/jTableTest/CreateStudent'
            },
            //What I added
            recordUpdated:function(event, data){
                $('#StudentTable').jtable('reload');
            },
            recordAdded: function (event, data) {
                $('#StudentTable').jtable('reload');
            },
            recordDeleted: function (event, data) {
                $('#StudentTable').jtable('reload');
            },

            fields: {
                id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                name: {
                    title: 'Name',
                    width: '15%'
                },
                birthdate: {
                    title: 'Birth Date',
                    list: true,
                    width: '18%',
                    type: 'date',
                    displayFormat: 'yy-mm-dd'
                }
            }
        });

        //Load person list from server
        $('#StudentTable').jtable('load');

    });

</script>
于 2013-08-19T19:31:41.433 に答える
1

@Md。Arafat Al Mahmud
以下のようにコードを変更してみてください。

 //ViewBag.ClientName is set to a random name in the Index action.
var myClientName = '@ViewBag.ClientName';

//Initialize jTable
$('#StudentTableContainer').jtable({
    title: 'Student List',
    actions: {
        listAction: '@Url.Action("StudentList")?clientName=' + myClientName,
        deleteAction: '@Url.Action("DeleteStudent")?clientName=' + myClientName,
        updateAction: '@Url.Action("UpdateStudent")?clientName=' + myClientName,
        createAction: '@Url.Action("CreateStudent")?clientName=' + myClientName
    },
   ......
   ......

削除機能:

//Define a function to get 'record deleted' events
    realTimeHub.RecordDeleted = function (clientName, recordId) {
        if (clientName != myClientName) {
            $('#StudentTable').jtable('deleteRecord', {
                key: recordId,
                clientOnly: true
            });
        }

        writeEvent(clientName + ' has <b>removed</b> 
        a record with id = ' + recordId, 'event-deleted');
    };
   -----
   -----

コントローラーの削除機能:

[HttpPost]
public JsonResult DeleteStudent(int studentId)
{
    try
    {
        //Delete from database
        _repository.StudentRepository.DeleteStudent(studentId);

        //Inform all connected clients
        var clientName = Request["clientName"];
        Task.Factory.StartNew(
            () =>
            {
                var clients = Hub.GetClients<RealTimeJTableDemoHub>();
                clients.RecordDeleted(clientName, studentId);
            });

        //Return result to current (caller) client
        return Json(new { Result = "OK" });
    }
    catch (Exception ex)
    {
        return Json(new { Result = "ERROR", Message = ex.Message });
    }
}
------
------

コード プロジェクトの例は、 Real-time-Asynchronous-Web-Pages-using-jTable-Sign に役立つ場合があります。

于 2013-02-15T05:08:36.577 に答える
1

JavaScript の削除コードがどこにあるのかわかりません。しかし、私はこれを提案します

$('#YourJqueryDialogbox').dialog('destroy');  // use this code in delete click event, once the delete action result returned.
于 2013-02-15T04:48:36.120 に答える
0

私も同じ問題を抱えていました。

オプション animationsEnabled : false が私にとっての解決策でした。

$('#...').jtable({
              title: 'Bestellingen',
              paging: true, //Enable paging
              sorting: true, //Enable sorting
              defaultSorting: 'date ASC',
              pageSize : 10,
              animationsEnabled : false,

              actions: {
                  listAction:  'content/.../data.php',
                  deleteAction: 'content/.../delete.php',
                  updateAction: 'content/.../save.php',
                  createAction: 'content/.../save.php'
              },...

また、あなたの deleteSomething.php ファイルには、json-array {"Result": "OK"} での返信が必要です

echo json_encode(array("Result" => "OK" ));
于 2013-03-27T15:38:17.167 に答える
0

MVC を使用している場合は、delete 関数で JsonResult の代わりに ActionResult を返すようにしてください。それ以外はすべて問題ないように見えます。

public ActionResult DeleteStudent(int studentId)
于 2016-05-06T20:40:04.967 に答える