Question

我有一个表格，当点击第一个单元格时显示弹出窗口：

 $('#tblAllUsers tbody').on('click', 'td', function () {
                            var visIdx = $(this).index();
                            if (visIdx != 0) {
                                return false;
                            }
                            var par = this.parentNode.parentNode.id;
                            var oTable = $("#tblAllUsers").dataTable();
                            var rowIndex = $(this).closest('tr').index();
                            var aPos = oTable.fnGetPosition(this);
                            var aData = oTable.fnGetData(aPos[0]);
                            var name = aData[1];
                            if (name != '') {
                                GetUser(name, rowIndex, "#tblAllUsers");
                            }
                            else {
                                ErrorDialog("#MessageDialog", "#lblError", "The User ID is blank in that row.", "No User ID");
                                return false;
                            }
                        });

弹出窗口允许用户修改字段并保存，关闭对话框然后返回网格。如果取消对话框，未保存数据，则保留滚动。但是如果数据被保存，而我没有重新加载表格，那么表格将移至顶部。 AJAX更新功能位于弹出窗口中：

 $.ajax({
        type: 'POST',
        data: $("#formUserModification").serializeArray(),
        url: '@Url.Action("UpdateUser")',
        success: function (data) {
            if (data.Errors === 'ERROR') {
                ErrorDialog("#MessageDialog", "#lblError", "There was an error encountered in modifying the user, please try again later.", "Error");
            }
            else {
                updateTable(data);
            }
            $("#divDetails").dialog('close');
        },
        beforeSend: function () {
            $("#divOverlay").show();
        },
        complete: function () {
            $("#divOverlay").hide();
        }
    });

更新功能只是加载行：

 function updateTable(data) {
    var tab = $("#tblAllUsers").dataTable();
    tab.fnUpdate(data.LastName + ', ' + data.FirstName, data.RowIndex, 0);
    tab.fnUpdate(data.ID, data.RowIndex, 2);
    tab.fnUpdate(data.LocationText, data.RowIndex, 3);
    tab.fnUpdate(data.SiteText, data.RowIndex, 4);
}

这种设置有没有办法保持滚动位置？

Answer 1

我通过这样做完成了我的目标：

定义变量： var scrollToPos;

在对话框定义中设置打开时的值，并在关闭时放置滚动条：

 $("#divAllUsersDetail").dialog({
        autoOpen: false,
        width: '90%',
        resizable: false,
        draggable: false,
        title: 'Details',
        position: { my: 'top', at: 'top+100' },
        modal: true,
        closeOnEscape: false,
        open: function() {
            scrollToPos = $("#divAllUsers").find(".dataTables_scrollBody").scrollTop();
        },
        close: function () {
            $("#divAllUsers").find(".dataTables_scrollBody").scrollTop(scrollToPos);
        },
        show: {
            effect: 'drop', direction: 'up'
        },
        hide: {
            effect: 'fade', duration: 200
        },
        buttons: {
            "Cancel": function () {

                $(this).dialog("close");
            }
        }
    }).prev("ui-dialog-titlebar").css("cursor", "default");

这很有名。

对话框弹出后，jQuery DataTables保存滚动位置

1 个答案: