I have a TreeSet<Rule>
in my model which holds Rules and their hierarchical level - which need, by requirement, to be reorderable by the user. A Rule has the following model:
public class Rule {
int id;
int level;
String desc;
}
I am trying to abstract the view from the model as much as possible, to avoid user errors. Being the fool that I am, I thought it would be "neat" to allow users to drag and drop rules to rearrange them - which is why I'm considering using JQuery's Sortable element.
In my view, I'd display the rows which could be reordered by the user. I'd then update the level value from the Rules. My problem is: I need to update the level value of each Rule once the user clicks the Update button.
Form:
class RulesForm extends ActionForm {
private TreeSet<Rule> rules;
private int[] reorderedIds;
// Getters and Setters
}
View:
<script>
$(function() {
$( "#sortable tr" ).sortable();
$( "#sortable tr" ).disableSelection();
});
</script>
<html:form action="/rules?method=update">
<table>
<c:forEach items="rule" var="rules">
<tr class="sortable"><td id="${rule.id}">
<bean:write name="rule" property="desc" />
</td></tr>
</c:forEach>
</table>
<html:submit value="Update"/>
1) How can I update each Rule's level? I am considering either:
- Using a change event that would interchange the $rule.level values using ui.item.index and ui.placeholder.index (based on this question);
- Retrieving the list of ids (ex:
[1,4,3]
) and implementing a logic to reorder my TreeSet; - Use jquery-cookie to hold the TreeSet;
- Forget it and change the view to something easier.
2) Once I've changed the rows positions, how can I retrieve them in my Form?