Question

我正在使用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;
    }
    });

Answer 1

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

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

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

正如我所提到的，这将提出删除请求，因此您无需手动执行此操作并拥有额外的端点。如果你愿意，你仍然可以使用该事件取消删除，但我已经将你的hanler改为：

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

让我解释原因：Update URL property of the igGrid表示将对数据源进行更新，但是，在Grid的上下文中，数据源被称为实际的widget igDataSource（请查看此doc igGrid/igDataSource Architecture）。即使这样，数据源也只会在您调用saveChanges时（在任一控件上）提交。另请注意，在您提交事务之前，它们将保留在Undo / Redo的整齐堆栈中（对此有一个很好的sample。）

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

编辑网格后更新数据源

1 个答案: