2013-08-02 69 views
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; 
    } 
    }); 

回答

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的上下文中,數據源被引用到實際的窗口部件igDataSource中(查看igGrid/igDataSource Architecture上的這個文檔)。即使如此,數據源只會在您撥打saveChanges(在任一控件上)時纔會提交。另外請注意,直到您提交事務,它們將保留在一個整齊的撤消/重做堆棧中(對此,有一個好的sample)。其次,我不確定爲什麼你會得到兩次確認(我從來沒有這樣做),所以你可能想提供一些額外的信息(你使用的是哪個版本),並可能將它隔離在一個樣本中。

相關問題