Collection Selection

Instead of "manually" adding/editing the entries of a collection there is also a simple way to select based on a predefined list of entries.

This works adding the class "selectcollection" to a element and specifying the elements to select as its children.

attributes	Description
data-field	die name of the field (must be an array) to put the data in
data-id	(only for array-of-object) the name of the field to compare in order to figure out which entries are already selected (relative to the data-field)
data-selected	(only if no checkbox is used) the name of css class to use when an entry is selected
data-obj	(optional used in the childs) the name json object used to fill the array

Select with strings and checkbox

This is the simplest case: You have an array of strings and want the user to select some of them:

      <ul class="selectcollection" data-field="data.countries">
		<li><input type="checkbox" name="countries" value="austria">Austria</li>
		<li><input type="checkbox" name="countries" value="australia">Australia</li>
                ...
      </ul>

Because no data-id is specified the "value" of the checkbox is used to fill the array. This currently only works for strings.

This will then create a json that looks like this:

{
    countries: ["austria", "germany", "uk"]
}

Note: If name in the input fields must be the complete field-path without the prefix (not only the last part like in normal collections):

      <ul class="selectcollection" data-field="data.profile.countries">
		<li><input type="checkbox" name="profile.countries" value="austria">Austria</li>
                ...
      </ul>

object selection with checkbox

The object to put in the final json has to be put in each direct child (for tables make sure not to forget the tbody in order to avoid problems with some browsers). This can be accomplished by defining a "data-obj" attribute of by using the jquery .data("obj", {}) method.

<table>
        <tbody class="selectcollection" data-field="data.user.group">
		<tr data-obj='{"id":1,"name":"group1"}'><td><input type="checkbox" name="user.group"/></td><td>Group 1</td></tr>
		<tr data-obj='{"id":2,"name":"group2"}'><td><input type="checkbox" name="user.group"/></td><td>Group 2</td></tr>
                ...
        </tbody>
</table>

Note that the name of the checkbox input MUST be the same as the name of the field (in that case user.group) without the prefix (data.).

Object selection with css

Instead of using a checkbox, it is also possible to just have a css applied when an entry is selected. This is achieved by thefining the data-selected attribute. The value of this is equal to the css class used to identify selected entries.

In addition all elements that "can" be used for selection get the class "jsfselect":

.selected {
	color: green !important;
}
.jsfselect {
	cursor: pointer;
	color: blue;
}

	<ul class="selectcollection" data-field="data.user" data-id="id" data-selected="selected" >
		<li data-obj='{"id":1,"name":"user1"}'>User 1</li>
		<li data-obj='{"id":2,"name":"user2"}'>User 2</li>
                ...
	</ul>