Skip to content

Commit aa3af35

Browse files
author
kokorev.alexey
committed
https://github.com/volosoft/jtable/pull/956
1 parent 8abe6e4 commit aa3af35

File tree

3 files changed

+200
-82
lines changed

3 files changed

+200
-82
lines changed

‎dev/jquery.jtable.core.js‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -343,21 +343,37 @@
343343
*************************************************************************/
344344
_createErrorDialogDiv: function () {
345345
var self = this;
346-
347-
self._$errorDialogDiv = $('<div></div>').appendTo(self._$mainContainer);
348-
self._$errorDialogDiv.dialog({
349-
autoOpen: false,
350-
show: self.options.dialogShowEffect,
351-
hide: self.options.dialogHideEffect,
352-
modal: true,
353-
title: self.options.messages.error,
354-
buttons: [{
355-
text: self.options.messages.close,
356-
click: function () {
357-
self._$errorDialogDiv.dialog('close');
358-
}
359-
}]
360-
});
346+
347+
if (self.options.useBootstrap) {
348+
self._$errorDialogDiv = $('<div class="modal hide fade" style="z-index: 999999;">' +
349+
'<div role="document" class="modal-dialog"><div class="modal-content">'+
350+
'<div class="modal-header">' +
351+
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
352+
'<h3>' + self.options.messages.error + '</h3>' +
353+
'</div>' +
354+
'<div class="modal-body alert"></div>' +
355+
'<div class="modal-footer">' +
356+
'<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">' + self.options.messages.close + '</a></div>' +
357+
'</div></div></div>').appendTo(self._$mainContainer);
358+
self._$errorDialogDiv.modal({
359+
show: false
360+
});
361+
} else {
362+
self._$errorDialogDiv = $('<div></div>').appendTo(self._$mainContainer);
363+
self._$errorDialogDiv.dialog({
364+
autoOpen: false,
365+
show: self.options.dialogShowEffect,
366+
hide: self.options.dialogHideEffect,
367+
modal: true,
368+
title: self.options.messages.error,
369+
buttons: [{
370+
text: self.options.messages.close,
371+
click: function () {
372+
self._$errorDialogDiv.dialog('close');
373+
}
374+
}]
375+
});
376+
}
361377
},
362378

363379
/************************************************************************
@@ -1117,7 +1133,12 @@
11171133
/* Shows error message dialog with given message.
11181134
*************************************************************************/
11191135
_showError: function (message) {
1120-
this._$errorDialogDiv.html(message).dialog('open');
1136+
if (this.options.useBootstrap) {
1137+
this._$errorDialogDiv.find(".modal-body").html(message);
1138+
this._$errorDialogDiv.modal("show");
1139+
} else {
1140+
this._$errorDialogDiv.html(message).dialog('open');
1141+
}
11211142
},
11221143

11231144
/* BUSY PANEL ***********************************************************/

‎dev/jquery.jtable.deletion.js‎

Lines changed: 102 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -63,53 +63,96 @@
6363
}
6464

6565
//Create div element for delete confirmation dialog
66-
self._$deleteRecordDiv = $('<div><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span class="jtable-delete-confirm-message"></span></p></div>').appendTo(self._$mainContainer);
67-
68-
//Prepare dialog
69-
self._$deleteRecordDiv.dialog({
70-
autoOpen: false,
71-
show: self.options.dialogShowEffect,
72-
hide: self.options.dialogHideEffect,
73-
modal: true,
74-
title: self.options.messages.areYouSure,
75-
buttons:
76-
[{ //cancel button
77-
text: self.options.messages.cancel,
78-
click: function () {
79-
self._$deleteRecordDiv.dialog("close");
80-
}
81-
}, {//delete button
82-
id: 'DeleteDialogButton',
83-
text: self.options.messages.deleteText,
84-
click: function () {
85-
86-
//row maybe removed by another source, if so, do nothing
87-
if (self._$deletingRow.hasClass('jtable-row-removed')) {
88-
self._$deleteRecordDiv.dialog('close');
89-
return;
90-
}
91-
92-
var $deleteButton = self._$deleteRecordDiv.parent().find('#DeleteDialogButton');
93-
self._setEnabledOfDialogButton($deleteButton, false, self.options.messages.deleting);
94-
self._deleteRecordFromServer(
95-
self._$deletingRow,
96-
function () {
97-
self._removeRowsFromTableWithAnimation(self._$deletingRow);
98-
self._$deleteRecordDiv.dialog('close');
99-
},
100-
function (message) { //error
101-
self._$deleteRecordDiv.dialog('close');
102-
self._showError(message);
103-
self._setEnabledOfDialogButton($deleteButton, true, self.options.messages.deleteText);
104-
}
105-
);
106-
}
107-
}],
108-
close: function () {
109-
var $deleteButton = self._$deleteRecordDiv.parent().find('#DeleteDialogButton');
110-
self._setEnabledOfDialogButton($deleteButton, true, self.options.messages.deleteText);
111-
}
112-
});
66+
self._$deleteRecordDiv = $('<div />').appendTo(self._$mainContainer);
67+
68+
if (self.options.useBootstrap) {
69+
self._$deleteRecordDiv.addClass("modal hide fade");
70+
self._$deleteRecordDiv.append('<div role="document" class="modal-dialog"><div class="modal-content">'+
71+
'<div class="modal-header">' +
72+
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
73+
'<h3>' + self.options.messages.areYouSure + '</h3></div>' +
74+
'<div class="modal-body" style="min-width: 300px; min-heigth: 300px;"></div>' +
75+
'<div class="modal-footer">' +
76+
'<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">' + self.options.messages.cancel + '</a>' +
77+
'<a id="DeleteDialogButton" href="#" class="save btn btn-primary">' + self.options.messages.deleteText + '</a></div></div></div>');
78+
79+
self._$deleteRecordDiv.modal({show: false});
80+
self._$deleteRecordDiv.find("#DeleteDialogButton").click(function(event) {
81+
82+
//row maybe removed by another source, if so, do nothing
83+
if (self._$deletingRow.hasClass('jtable-row-removed')) {
84+
self._$deleteRecordDiv.dialog('close');
85+
return;
86+
}
87+
88+
var $deleteButton = $(this);
89+
self._setEnabledOfDialogButton(self.options.useBootstrap, $deleteButton, false, self.options.messages.deleting);
90+
self._deleteRecordFromServer(
91+
self._$deletingRow,
92+
function () {
93+
self._removeRowsFromTableWithAnimation(self._$deletingRow);
94+
self._$deleteRecordDiv.modal("hide");
95+
},
96+
function (message) { //error
97+
self._showError(message);
98+
self._setEnabledOfDialogButton(self.options.useBootstrap, $deleteButton, true, self.options.messages.deleteText);
99+
}
100+
);
101+
102+
});
103+
var event = self._getHiddenEvent();
104+
self._$deleteRecordDiv.on(event, function(event) {
105+
var $deleteButton = $(this).find('#DeleteDialogButton');
106+
self._setEnabledOfDialogButton(self.options.useBootstrap, $deleteButton, true, self.options.messages.deleteText);
107+
});
108+
} else {
109+
self._$deleteRecordDiv.append('<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span class="jtable-delete-confirm-message"></span></p>');
110+
111+
//Prepare dialog
112+
self._$deleteRecordDiv.dialog({
113+
autoOpen: false,
114+
show: self.options.dialogShowEffect,
115+
hide: self.options.dialogHideEffect,
116+
modal: true,
117+
title: self.options.messages.areYouSure,
118+
buttons:
119+
[{ //cancel button
120+
text: self.options.messages.cancel,
121+
click: function () {
122+
self._$deleteRecordDiv.dialog("close");
123+
}
124+
}, {//delete button
125+
id: 'DeleteDialogButton',
126+
text: self.options.messages.deleteText,
127+
click: function () {
128+
129+
//row maybe removed by another source, if so, do nothing
130+
if (self._$deletingRow.hasClass('jtable-row-removed')) {
131+
self._$deleteRecordDiv.dialog('close');
132+
return;
133+
}
134+
135+
var $deleteButton = $('#DeleteDialogButton');
136+
self._setEnabledOfDialogButton(self.options.useBootstrap, $deleteButton, false, self.options.messages.deleting);
137+
self._deleteRecordFromServer(
138+
self._$deletingRow,
139+
function () {
140+
self._removeRowsFromTableWithAnimation(self._$deletingRow);
141+
self._$deleteRecordDiv.dialog('close');
142+
},
143+
function (message) { //error
144+
self._showError(message);
145+
self._setEnabledOfDialogButton(self.options.useBootstrap, $deleteButton, true, self.options.messages.deleteText);
146+
}
147+
);
148+
}
149+
}],
150+
close: function () {
151+
var $deleteButton = $('#DeleteDialogButton');
152+
self._setEnabledOfDialogButton(self.options.useBootstrap, $deleteButton, true, self.options.messages.deleteText);
153+
}
154+
});
155+
}
113156
},
114157

115158
/************************************************************************
@@ -308,8 +351,13 @@
308351

309352
if (deleteConfirm != false) {
310353
//Confirmation
311-
self._$deleteRecordDiv.find('.jtable-delete-confirm-message').html(deleteConfirmMessage);
312-
self._showDeleteDialog($row);
354+
if (self.options.useBootstrap) {
355+
self._$deleteRecordDiv.find(".modal-body").html(deleteConfirmMessage);
356+
} else {
357+
self._$deleteRecordDiv.find('.jtable-delete-confirm-message').html(deleteConfirmMessage);
358+
}
359+
360+
self._showDeleteDialog($row);
313361
} else {
314362
//No confirmation
315363
self._deleteRecordFromServer(
@@ -328,7 +376,11 @@
328376
*************************************************************************/
329377
_showDeleteDialog: function ($row) {
330378
this._$deletingRow = $row;
331-
this._$deleteRecordDiv.dialog('open');
379+
if (this.options.useBootstrap) {
380+
this._$deleteRecordDiv.modal("show");
381+
} else {
382+
this._$deleteRecordDiv.dialog('open');
383+
}
332384
},
333385

334386
/* Performs an ajax call to server to delete record

‎dev/jquery.jtable.editing.js‎

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,42 @@
5757
var self = this;
5858

5959
//Create a div for dialog and add to container element
60-
self._$editDiv = $('<div></div>')
61-
.appendTo(self._$mainContainer);
62-
60+
if (self.options.useBootstrap) {
61+
62+
self._$editDiv.addClass("modal hide fade");
63+
self._$editDiv.css({
64+
width: 'auto'
65+
});
66+
self._$editDiv.append('<div role="document" class="modal-dialog"><div class="modal-content">'+
67+
'<div class="modal-header">' +
68+
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
69+
'<h3>' + self.options.messages.editRecord + '</h3></div>' +
70+
'<div class="modal-body" style="min-width: 300px;"></div>' +
71+
'<div class="modal-footer">' +
72+
'<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">' + self.options.messages.cancel + '</a>' +
73+
'<a id="EditDialogSaveButton" href="#" class="save btn btn-primary">' + self.options.messages.save + '</a></div></div></div>');
74+
self._$editDiv.find(".save").click(function(event) {
75+
self._onSaveClickedOnEditForm();
76+
});
77+
78+
self._$editDiv.modal({
79+
show: false
80+
});
81+
82+
self._$editDiv.on("hide", function(event) {
83+
var $editForm = self._$editDiv.find('form:first');
84+
var $saveButton = self._$editDiv.parent().find('#EditDialogSaveButton');
85+
self._trigger("formClosed", null, { form: $editForm, formType: 'edit', row: self._$editingRow });
86+
self._setEnabledOfDialogButton(self.options.useBootstrap, $saveButton, true, self.options.messages.save);
87+
$editForm.remove();
88+
});
89+
} else {
6390
//Prepare dialog
6491
self._$editDiv.dialog({
6592
autoOpen: false,
6693
show: self.options.dialogShowEffect,
6794
hide: self.options.dialogHideEffect,
68-
width: self.options.formDialogWidth ? self.options.formDialogWidth : 'auto',
95+
width: 'auto',
6996
minWidth: '300',
7097
modal: true,
7198
title: self.options.messages.editRecord,
@@ -84,13 +111,14 @@
84111
}],
85112
close: function () {
86113
var $editForm = self._$editDiv.find('form:first');
87-
var $saveButton = self._$editDiv.parent().find('#EditDialogSaveButton');
114+
var $saveButton = $('#EditDialogSaveButton');
88115
self._trigger("formClosed", null, { form: $editForm, formType: 'edit', row: self._$editingRow });
89-
self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save);
116+
self._setEnabledOfDialogButton(self.options.useBootstrap, $saveButton, true, self.options.messages.save);
90117
$editForm.remove();
91118
}
92119
});
93-
},
120+
}
121+
},
94122

95123
/* Saves editing form to server.
96124
*************************************************************************/
@@ -99,14 +127,18 @@
99127

100128
//row maybe removed by another source, if so, do nothing
101129
if (self._$editingRow.hasClass('jtable-row-removed')) {
102-
self._$editDiv.dialog('close');
103-
return;
130+
if (self.options.useBootstrap) {
131+
self._$editDiv.modal("hide");
132+
} else {
133+
self._$editDiv.dialog('close');
134+
}
135+
return;
104136
}
105137

106138
var $saveButton = self._$editDiv.parent().find('#EditDialogSaveButton');
107139
var $editForm = self._$editDiv.find('form');
108140
if (self._trigger("formSubmitting", null, { form: $editForm, formType: 'edit', row: self._$editingRow }) != false) {
109-
self._setEnabledOfDialogButton($saveButton, false, self.options.messages.saving);
141+
self._setEnabledOfDialogButton(self.options.useBootstrap, $saveButton, true, self.options.messages.save);
110142
self._saveEditForm($editForm, $saveButton);
111143
}
112144
},
@@ -314,8 +346,14 @@
314346
});
315347

316348
//Open dialog
317-
self._$editingRow = $tableRow;
318-
self._$editDiv.append($editForm).dialog('open');
349+
self._$editingRow = $tableRow;
350+
if (self.options.useBootstrap) {
351+
self._$editDiv.find(".modal-body").html($editForm);
352+
self._$editDiv.modal("show");
353+
} else {
354+
self._$editDiv.append($editForm);
355+
self._$ediDiv.dialog('open');
356+
}
319357
self._trigger("formCreated", null, { form: $editForm, formType: 'edit', record: record, row: $tableRow });
320358
},
321359

@@ -327,7 +365,7 @@
327365
var completeEdit = function (data) {
328366
if (data.Result != 'OK') {
329367
self._showError(data.Message);
330-
self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save);
368+
self._setEnabledOfDialogButton(self.options.useBootstrap, $saveButton, true, self.options.messages.save);
331369
return;
332370
}
333371

@@ -345,7 +383,14 @@
345383
self._showUpdateAnimationForRow(self._$editingRow);
346384
}
347385

348-
self._$editDiv.dialog("close");
386+
if (self.options.useBootstrap) {
387+
self._$editDiv.modal("hide");
388+
} else {
389+
self._$editDiv.dialog("close");
390+
}
391+
392+
393+
self._setEnabledOfDialogButton(self.options.useBootstrap, $saveButton, true, self.options.messages.save);
349394
};
350395

351396

@@ -362,7 +407,7 @@
362407
completeEdit(data);
363408
}).fail(function () {
364409
self._showError(self.options.messages.serverCommunicationError);
365-
self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save);
410+
self._setEnabledOfDialogButton(self.options.useBootstrap, $saveButton, true, self.options.messages.save);
366411
});
367412
} else { //assume it returned the creation result
368413
completeEdit(funcResult);
@@ -379,7 +424,7 @@
379424
},
380425
function() {
381426
self._showError(self.options.messages.serverCommunicationError);
382-
self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save);
427+
self._setEnabledOfDialogButton(self.options.useBootstrap, $saveButton, true, self.options.messages.save);
383428
});
384429
}
385430

0 commit comments

Comments
 (0)