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

你好，我在添加更新和删除时遇到了同样的问题。我最终做的是利用添加、更新和删除事件并手动重新加载表。有关详细信息，请参阅文档中的事件。


<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

当我的创建记录消息框根本没有消失时，我遇到了同样的问题。我通过在 Json 中添加“记录”属性并将其值设置为最近创建的记录来解决该问题。

所以我建议你返回你的 Json 对象，比如 return Json(new { Result = "OK", Record = deletedObject });

希望它会工作

乌斯曼

于 2013-12-19T19:44:08.450 回答
0

好吧，如果您使用 MVC，请尝试在删除函数中返回 ActionResult 而不是 JsonResult，其他一切对我来说都很好。

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