を使用してIgnite UI
います。プロパティをグリッドに追加するとupdateUrl
、データがグリッドで編集されると、JavaScript で指定された URL への送信がトリガーされません。グリッドのコードは次のとおりです。また、奇妙なことに、削除イベントが 2 回呼び出され、確認アラート ボックスが 2 回表示されます。
$.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;
}
});