2013-08-02 4 views
0

Я использую Ignite UI. Когда я добавляю свойство updateUrl в сетку, это не вызывает отправку заданного URL-адреса в JavaScript, как только данные будут редактироваться в сетке. Вот мой код для сетки. Кроме того, как ни странно удаления событие вызывается дважды и показывает окно предупреждения подтверждение дважды:Редактирование источника данных после изменения сетки

$.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 (на любом из них). Также обратите внимание, что пока вы не совершаете транзакции, они останутся в аккуратном стеке для Undo/Redo (для этого есть хороший sample).

Во-вторых, я точно не знаю, почему вы получите подтверждение дважды (я никогда этого не сделаю), чтобы вы могли предоставить дополнительную информацию (какую версию вы используете) и потенциально изолировать ее в образце.

Смежные вопросы