Hi everyone,
Let me expose to you the workaround I found to get tabs in GC forms.
It does not affect the core of Grocery CRUD
Watch the final result on the Films example :
[attachment=756:form_tabs_1.png][attachment=757:form_tabs_2.png][attachment=758:form_tabs_3.png]
First step : in the controller
In the Grocery _construct :
Load the session library like this :
$this->load->library('session');
In the film managememt function :
1. Indicate in $crud->fields the fields you want to be displayed. Don't forget to insert a fake field at the beginning. It will be used for the tabs. Here it is called 'tabs'.
2. Build an array of arrays containing the fields you want to be displayed in each tab. The first item is the name of the tab, it is not a field.
3. Save this big array in a session variable.
4. Call the callback for the fake field "tabs"
//========================================================================= F I L M S public function film_management() { $crud = new grocery_CRUD(); $crud->set_language('english'); $crud->set_theme('datatables'); $crud->set_table('film'); $crud->set_relation_n_n('actors', 'film_actor', 'actor', 'film_id', 'actor_id', 'fullname','priority'); $crud->set_relation_n_n('category', 'film_category', 'category', 'film_id', 'category_id', 'name'); $crud->unset_columns('special_features','description','actors'); // // ================================ Form tabs $crud->fields( 'tabs' ,'title','description','release_year','length','rating','special_features' ,'actors','category' ,'rental_duration','rental_rate','replacement_cost' ); // Store fields in arrays corresponding to each form tab $tabs = array ( array('Film','title','description','release_year','length','rating','special_features') ,array('Actors-Category','actors','category') ,array('Rental','rental_duration','rental_rate','replacement_cost') ); $this->session->set_userdata('myproject_film_tabs', $tabs); // Send variables to the callback via session data $crud->callback_field('tabs',array($this,'_form_tabs')); // Make the fake field // =============================== End of Form tabs // $output = $crud->render(); $this->_example_output($output); }
Then add the callback function :
function _form_tabs() { $tabs = $this->session->userdata('myproject_film_tabs'); // retrieve arrays from session data // build the tabs $html = ' <!-- tabs --> <ul class="nav nav-tabs" data-toggle="myproject.tabs.fields_box">'. "\n"; $i = 0; foreach ($tabs as $tab) { $html .= '<li'; if ($i == 0){$html .= ' class="active"'; $i = 1;} $html .= '><a href="#' . implode(",", array_slice($tab,1)) . '">'. $tab[0] . '</a></li>' . "\n"; } $html .= '</ul> <!-- #/tabs -->'; // return $html; }
Second step : uploading the required jQuery and CSS files
jQuery :
http://www.orez.net/silo/grocery_crud/tabs_in_forms/form_tabs.js ( :( I failed to use the Media library of this forum).
Css :
[attachment=759:form_tabs.css]
Third step : in the view
Add the calls to form_tabs.js and form_tabs.css.
That's all folks !
Hint :
A field can be repeated in different tabs by adding it to each tab you like.
Example : the name of the film as a reminder of the row you are editing.
I wrote the Php part of this stuff. Maybe it could be improved. I found no other solution than sessions to send the arrays to the callback. Any idea ?
Someone else wrote the Javascript and CSS part for me. Any comment ?
If you think this contribution is worth, I could make this documentation more comprehensive for newbies.
Any improvement is welcome.
Hope it helps