ENHANCEMENT Allow selection of items in GridField (via JavaScript only)

This commit is contained in:
Ingo Schommer 2012-02-07 20:56:40 +01:00
parent 5a3242cab7
commit 4126b95cf7
3 changed files with 71 additions and 10 deletions

View File

@ -1,5 +1,7 @@
/** Core styles for the basic GridField form field without any specific style. @package sapphire @subpackage scss @todo Add radial gradient to default delete button state @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins? */
.cms fieldset.ss-gridfield > div { margin-bottom: 35px; }
.cms fieldset.ss-gridfield[data-selectable] tr.ui-selected, .cms fieldset.ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
.cms fieldset.ss-gridfield[data-selectable] td { cursor: pointer; }
.cms table.ss-gridfield.field { box-shadow: none; padding: 0; margin: 20px 0 0 0; border-collapse: separate; border-bottom: 0 none; }
.cms table.ss-gridfield.field thead { color: #1d2224; background: transparent; }
.cms table.ss-gridfield.field tbody { background: #FFF; }

View File

@ -1,5 +1,17 @@
jQuery(function($){
$('fieldset.ss-gridfield').entwine({
getItems: function() {
return this.find('.ss-gridfield-item');
}
});
$('fieldset.ss-gridfield *').entwine({
getGridField: function() {
return this.parents('fieldset.ss-gridfield:first');
}
});
$('fieldset.ss-gridfield .action').entwine({
onclick: function(e){
var button = this;
@ -26,13 +38,6 @@ jQuery(function($){
}
});
var removeFilterButtons = function() {
// Remove stuff
$('th').children('div').each(function(i,v) {
$(v).remove();
});
}
/*
* Upon focusing on a filter <input> element, move "filter" and "reset" buttons and display next to the current <input> element
* ToDo ensure filter-button state is maintained after filtering (see resetState param)
@ -46,8 +51,10 @@ jQuery(function($){
return false;
}
var eleInput = $(this);
// Remove existing <div> and <button> elements in-lieu of cloning
removeFilterButtons();
this.getGridField().find('th > div').each(function(i,v) {$(v).remove();});
var eleButtonSetFilter = $('#action_filter');
var eleButtonResetFilter = $('#action_reset');
// Retain current widths to ensure <th>'s don't shift widths
@ -71,4 +78,43 @@ jQuery(function($){
}
});
/**
* Allows selection of one or more rows in the grid field.
* Purely clientside at the moment.
*/
$('fieldset.ss-gridfield[data-selectable]').entwine({
/**
* @return {jQuery} Collection
*/
getSelectedItems: function() {
return this.find('.ss-gridfield-item.ui-selected');
},
/**
* @return {Array} Of record IDs
*/
getSelectedIDs: function() {
return $.map(this.getSelectedItems(), function(el) {return $(el).data('id');});
}
});
$('fieldset.ss-gridfield[data-selectable] .ss-gridfield-items').entwine({
onmatch: function() {
this._super();
// TODO Limit to single selection
this.selectable();
},
onunmatch: function() {
this._super();
this.selectable('destroy');
}
});
$('fieldset.ss-gridfield[data-multiselect] .ss-gridfield-item').entwine({
onclick: function() {
// this.siblings('selected');
this._super();
}
});
});

View File

@ -31,9 +31,22 @@ $gf_border_radius: 7px;
}
.cms {
fieldset.ss-gridfield>div {
margin-bottom: 35px;
fieldset.ss-gridfield {
& > div {
margin-bottom: 35px;
}
&[data-selectable] {
tr.ui-selected, tr.ui-selecting {
background: #FFFAD6 !important;
}
td {
cursor: pointer;
}
}
}
table.ss-gridfield.field {
box-shadow: none;
padding: 0;