extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-16 18:31:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Get et2_grid sortable working with sortablejs

Browse Source
This commit is contained in:
Hadi Nategh 2021-08-03 15:59:22 +02:00
parent 8c8d8c2de9
commit c56812a42f
1 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
api/js/etemplate/et2_widget_grid.ts
View File

@ -117,6 +117,7 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
private wrapper = null; private wrapper = null;
private lastRowNode: null; private lastRowNode: null;
private sortablejs : Sortable = null;
/** /**
* Constructor * Constructor
* *
@ -943,56 +944,54 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl
*/ */
set_sortable(sortable: boolean | Function) set_sortable(sortable: boolean | Function)
{ {
const $node = jQuery(this.getDOMNode()); const self = this;
if(!sortable) let tbody = this.getDOMNode().getElementsByTagName('tbody')[0];
if(!sortable && this.sortablejs)
{ {
$node.sortable("destroy"); this.sortablejs.destroy();
return; return;
} }
// Make sure rows have IDs, so sortable has something to return for (let i =0; i < tbody.children.length; i++)
jQuery('tr', this.tbody).each(function(index) { {
const $this = jQuery(this); if (!tbody.children[i].classList.contains('th') && !tbody.children[i].id)
{
// Header does not participate in sorting tbody.children[i].setAttribute('id', i.toString());
if($this.hasClass('th')) return;
// If row doesn't have an ID, assign the index as ID
if(!$this.attr("id")) $this.attr("id", index);
});
const self = this;
// Set up sortable
$node.sortable({
// Header does not participate in sorting
items: "> tbody > tr:not(.th)",
distance: 15,
cancel: this.options.sortable_cancel,
placeholder: this.options.sortable_placeholder,
containment: this.options.sortable_containment,
connectWith: this.options.sortable_connectWith,
update: function(event, ui) {
self.egw().json(sortable,[
self.getInstanceManager().etemplate_exec_id,
$node.sortable("toArray"),
self.id],
null,
self,
true
).sendRequest();
},
receive: function (event, ui) {
if (typeof self.sortable_recieveCallback == 'function') {
self.sortable_recieveCallback.call(self, event, ui, self.id);
}
},
start: function (event, ui) {
if (typeof self.options.sortable_startCallback == 'function') {
self.options.sortable_startCallback.call(self, event, ui, self.id);
}
} }
}); }
//todo: fix the sortable import statement
import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){
this.sortablejs = new Sortable(tbody,{
group: this.options.sortable_connectWith,
draggable: "tr:not(.th)",
filter: this.options.sortable_cancel,
ghostClass: this.options.sortable_placeholder,
dataIdAttr: 'id',
onAdd:function (event) {
if (typeof self.options.sortable_recieveCallback == 'function') {
self.options.sortable_recieveCallback.call(self, event, this, self.id);
}
},
onStart: function (event, ui) {
if (typeof self.options.sortable_startCallback == 'function') {
self.options.sortable_startCallback.call(self, event, this, self.id);
}
},
onSort: function (event) {
self.egw().json(sortable,[
self.getInstanceManager().etemplate_exec_id,
self.sortablejs.toArray(),
self.id],
null,
self,
true
).sendRequest();
},
});
}.bind(this));
} }
/** /**