How to create a form for a 2D/multi-dimensional table? - forms

Question

I need to create a form in CakePHP to allow users enter data(numbers) into the cells shown on the table below. The input screen needs look like the table shown below. The users should be able to select any cell they want to enter/update the value, then type in the value, click submit and submit the value/s. Each "Metric section (e.g. Metric A, Metric B..)" will have a submit button so the users can edit/update each section on the table.
___________________________ ____________________
|___ ___|___2006_______|__2007____|___2008___|
|_METRIC A__|______________|__________|__________|
| item A1 | 1 | 5 | 7 |
| item A2 | 15 | 18 | 21 |
| item A3 | 3 | 6 | 11 |
| item A4 | 1 | 1 | 3 |
|___________|______________|__________|__________|
|_METRIC B__|______________|__________|__________|
| item B1 | 12 | 18 | 31 |
| item B2 | 1 | 4 | 6 |
| item B3 | 0 | 0 | 2 |
--------------------------------------------------
As you can see each metric section is a two dimensional table. So I would like to capture the input data in a 2D array. Currently I have successfully created the display for the data (which was much easier). I simply created an array of metrics, which is an array of 2D arrays. Then I passed that array of 2D arrays to the view file to display the table.
I am kind of lost on how to get the user input for this table. Anyone had any similar experiences? Any suggestion will be greatly helpful to me.

Answer 1

You might want to start be researching some Javascript grid solutions with editing capabilities. Ext's Grid comes to mind, but there will most definitely be alternatives for your JavaScript framework of choice (eg. jQuery). This will handle all of the onclick goodness on the client side leaving you to implement an AJAX action that the form can submit data at. There it is up to you to determine which models you update with each part of the data.

Answer 2

In case this becomes useful to anyone else, I'm posting my solution here..
I managed to tackle this one by using 'Parallel two dimensional arrays'.
It's a simply trick. You create the 2D array for the display of data. So you have an array for each row in the table. For example if the columns are 'Year 2006', 'Year 2007' & 'Year 2008' like in my question above. You will create a row of data with a value for each year.
$data_for_row_array = array('10', '15', '35');
Like this you create a data array for each row in your table and you will get an array of rows:
$rows_array = array(data_for_row_1_array, data_for_row_2_array, ..) etc
This will do for the display array.. Now if you want to capture users input for each of those cells in the table all you need to do is create a similar second 2D array with the ids of each data cell taken from the database.. if an id does not exist yet, just leave it blank. And when the user enters data and submits it, just loop through the two 2D arrays and use the ID from one array and the data from the other array to match with it. because in both arrays the matching ID and it's data value will be at the same position. So if you find and ID in the "ids array" and a data value in the same position in the "data array", you just use it to update the database table. This is the concept of 'parallel two dimensional arrays'.
And if you find and empty id value in the IDs array yet some data value at the same position in the data array that means the user has entered a completely new value so you save it as a new data cell in the database.
Hope this gives you some idea.. if it isn't clear just let me know and i will explain it in more detail.