How to get new order data

cindyw8686 commented 4 years ago

Question:

I'm new to use this. I'd like to get values in new order list. I checked around, I couldn't find a good sample of that. I'm wondering if you can provide me a sample how to get the value.

when I print out in the set function, I got value like this: set:12rs,131v,12qs,13md,13f2,13mx. I'm not sure how to use them?

I tried those and my table got whipped out. self.order = self.searchList.toArray(); return self.facetsResults = self.searchList.sort(self.order.reverse());

How can I get those data back with new order, value and send to WebService call to save the new order to database?

  facetID: '0',
  facet: 'Save %',
  hitrank: '8371',
  collapse: 'false',
  hide: 'false',
  as: '5',

Thanks, Cindy

JS:

JSBin/JSFiddle demonstrating the problem:

self.searchList = Sortable.create(resultList, { store: { /**

Get the order of elements. Called once during initialization.
@param {Sortable} sortable
@returns {Array} */ get: function(sortable) { var order = localStorage.getItem(sortable.options.group.name); console.log("get:"+ order ? order.split('|') : []); return order ? order.split('|') : []; }, /**
Save the order of elements. Called onEnd (when the item is dropped).
@param {Sortable} sortable */ set: function(sortable) { var order = sortable.toArray();
localStorage.setItem(sortable.options.group.name, order.join('|')); var tmp = order ? order.toString().split('|') : []; console.log("set:"+tmp); }, }, group: { name: 'shared', pull: 'clone', revertClone: true, sort: true, dataIdAttr: true }, });

HTML:

↑ ↓ {{$index}} {{facetsResult['facet']}} {{facetsResult['hitrank']}} {{facetsResult['as']}}

self.facetsResults = [ { facetID: '0', facet: 'Save %', hitrank: '8371', collapse: 'false', hide: 'false', as: '5', }, { facetID: '1', facet: 'Price', hitrank: '9238', collapse: 'true', hide: 'true', as: '6', }, ];

Before you create an issue, check it:

Try master-branch, perhaps the problem has been solved;
Use the search, maybe we already have an answer;
If not found, create an example on jsbin.com (draft) and describe the problem.

Bindings:

Angular
- 2.0+: https://github.com/SortableJS/angular-sortablejs/issues
- legacy: https://github.com/SortableJS/angular-legacy-sortablejs/issues
React
- ES2015+: https://github.com/SortableJS/react-sortablejs/issues
- mixin: https://github.com/SortableJS/react-mixin-sortablejs/issues
Polymer: https://github.com/SortableJS/polymer-sortablejs/issues
Knockout: https://github.com/SortableJS/knockout-sortablejs/issues
Meteor: https://github.com/SortableJS/meteor-sortablejs/issues

owen-m1 commented 4 years ago

The toArray function is giving an ID to each list item based on the html element. If you sort the list and call toArray again, the result will reflect this change in the list.

If you want a custom ID to correspond to each list item, rather than the one Sortable has generated, set the data-id on the item's element.

cindyw8686 commented 4 years ago

Thank you! I'm not fully understand your solution. Could you please write a sample here?

I got that issue solved by using a temp Array cloneSearchResult to store the original order.

self.RevertAll = function RevertAll() {
if (self.searchList) { self.facetsResults = self.cloneSearchResult.map(a => Object.assign({}, a)); return self.facetsResults;
} };

owen-m1 commented 4 years ago

Here is an example of the HTML:

<ul id="items">
    <li data-id="apple">Apple</li>
    <li data-id="orange">Orange</li>
    <li data-id="banana">Banana</li>
</ul>

Then when you call toArray(), you will get the order represented by the data-ids:

sortable.toArray()
// => ['apple', 'orange', 'banana']

cindyw8686 commented 4 years ago

I have another question there. I have a checkbox in the list. I check one checkbox, and I move that row. The checkbox value becomes unchecked after the movement is done. How can I get that row moved and with checkbox change together? Should I save the new checkbox value to my temp valuable in onChange or some other functions? I have difficulty to get that row/columns values...

onChoose: function (/*Event/evt) { evt.oldIndex; // element index within parent //console.log("onChoose="+evt.oldIndex); let tmp = evt.item.collapse; //tmp = evt.item.textContent["collapse"]; //console.log("onChoose="+tmp); },

Thanks, Cindy

tr class="list-group" md-row md-select="prod" md-auto-select="true" ng-repeat="facetsResult in fm.facetsResults"

input type="checkbox" ng-checked={{facetsResult['collapse']}} ng-click="fm.collapseChange($index)"

SortableJS / Sortable