0

我正在使用Ignite UI. 当我将属性添加updateUrl到网格时，一旦在网格中编辑数据，这不会触发提交到 JavaScript 中的给定 URL。这是我的网格代码。此外，奇怪的是，删除事件被调用了两次，并显示了两次确认警报框：

$.ig.loader({
    scriptPath: './javascript_common/igniteui/corefiles/js/',
    cssPath: './javascript_common/igniteui/corefiles/css/',
    theme: 'metro'
});

$.ig.loader("igGrid.Responsive.Hiding.Paging.Updating", function () {
$("#grid1").igGrid({
    dataSource: 'http://domain.com/admin-new/users.php?mode=getUsers',
    updateUrl : 'http://domain.com/admin-new/users.php?mode=updateUser',
    responseDataKey: "results",
    primaryKey: 'id',
    autoGenerateColumns: false,
    autoGenerateLayouts: false,
    columns: [{
        key: 'id',
        dataType: 'number',
        headerText: 'Id',
    }, {
        key: 'fullname',
        dataType: 'string',
        headerText: 'Full Name'
    }, {
        key: 'fname',
        dataType: 'string',
        headerText: 'First name'
    }, {
        key: 'lname',
        dataType: 'string',
        headerText: 'Last Name'
    }, {
        key: 'username',
        dataType: 'string',
        headerText: 'User Name'
    }, {
        key: 'userLevel',
        dataType: 'string',
        headerText: 'User Level'
    }, {
        key: 'userGroupId',
        dataType: 'string',
        headerText: 'User Group'
    }, {
        key: 'email',
        dataType: 'string',
        headerText: 'Email'
    }, {
        key: 'status',
        dataType: 'bool',
        headerText: 'Status'
    }],
    features: [
    {
                        name: "Paging",
                        type: "remote",
                        pageSize: 2, // Default number of records per page.
                        recordCountKey : 'totalCount', // The property in the response that will hold the total number of records in the data source.
                        pageSizeUrlKey : 'psize', // Denotes the name of the encoded URL parameter that will state what is the currently requested page size.
                        pageSizeList : [1,2,3,4,5,6,7,8,9,10,20,30], // Default: [5, 10, 20, 25, 50, 75, 100]. contents of the page size dropdown indicating what preconfigured page sizes are available to the end user.
                        pageIndexUrlKey : 'page', // Denotes the name of the encoded URL parameter that will state what is the currently requested page index.

    },{
        name: 'Responsive',
        forceResponsiveGridWidth: false,
        columnSettings: [{
            columnKey: 'id',
            classes: "ui-hidden-phone"
        }, {
            columnKey: 'fullname',
            classes: "ui-visible-phone",
            configuration: {
                phone: {
                    template: "<span>${lname}, ${fname}</span>"
                }
            }
        }, {
            columnKey: 'fname',
            classes: "ui-hidden-phone"
        }, {
            columnKey: 'lname',
            classes: "ui-hidden-phone"
        }]
    }, {
        name: 'Hiding',
        hiddenColumnIndicatorHeaderWidth: 14,
        columnSettings: [{
            //hide unbound from chooser list and indicator
            columnKey: 'fullname',
            allowHiding: false
        }]
    }, {
        name: "Updating",
        enableAddRow: true,
        showReadonlyEditors: false,
        dataDirty: function (evt, ui) {
            return false;
        },
        rowEditDialogOpening: function (event, ui) {
            if ($(ui.owner.element).igGridResponsive("getCurrentResponsiveMode") != "desktop") {
                ui.owner.options.rowEditDialogWidth = document.body.clientWidth * 0.9;
                ui.dialogElement.children('.ui-dialog-content').css('height',ui.owner.grid.element.height() - 115);
                ui.owner.options.rowEditDialogHeight = ui.owner.grid.element.height();
            }
            var columns = ui.owner.grid.options.columns;
            for (i = 0; i < columns.length; ++i) {
                //use 0 instead of false to be able to differentiate when restoring state
                if (columns[i].hidden) columns[i].hidden = 0;
            }
        },
        rowEditDialogOpened: function (event, ui) {
            var columns = ui.owner.grid.options.columns;
            for (i = 0; i < columns.length; ++i) {
                if (columns[i].hidden === 0) columns[i].hidden = true;
            }
        },
        editMode: "rowedittemplate",
        columnSettings: [{
            columnKey: 'fullname',
            readOnly: true
        }, {
            columnKey: 'id',
            readOnly: true
        }, {
            columnKey: "email",
            validatorOptions: {
                required: true,
                errorMessage: "Enter a valid email.",
                bodyAsParent: false
            }
        }]
    }]
});
});
    var grid = $('#grid1');
    grid.bind("iggridupdatingrowdeleting", function (e, args) {
    var result = confirm("Sure to delete ?");
    if (result==true) {
    $.ajax({
      type: "POST",
      url: "users.php?mode=deleteUser",
      data: { id: args.rowID }
    }).done(function( msg ) {
      // alert( "Deleted: " + args.rowID );
    });
    }else{
    return false;
    }
    });
4

1 回答 1

1

首先 - 您不必自己提出请求 - 网格会在发生任何更改（添加、编辑、删除）时为您发出这些调用。您所要做的就是致电：

 $("#grid1").igGrid("saveChanges");

JSFIDDLE： http: //jsfiddle.net/damyanpetev/MGECs/（有一个日志可以看到请求）

正如我所提到的，这将发出删除请求，因此您无需手动执行并拥有额外的端点。如果需要，您仍然可以使用该事件取消删除，但我已将您的处理程序更改为：

if (!confirm("Sure you want to delete ?")) {
   return false;
}

让我解释一下原因：igGrid 的更新 URL 属性声明将对数据源进行更新，但是，在 Grid 的上下文中，数据源是指实际的小部件 igDataSource（查看 igGrid 上的此文档/ igDataSource 架构）。即使这样，数据源也只会在您调用时提交saveChanges（在任一控件上）。另请注意，在您提交事务之前，它们将保留在一个整洁的堆栈中以进行撤消/重做（有一个很好的示例）。

其次，我不确定你为什么会得到两次确认（我从来没有）所以你可能想提供一些额外的信息（你使用的是哪个版本）并可能将它隔离在一个样本中。

于 2013-08-06T14:25:39.293 回答