Home Grown : 8. DataGridView like View
We have reached easily to the paginated view of the data. Now we are going editability to this form. It's really simple. We use JavaScript to modify the DOM and and when editing is done we save the modified data to the database.
We have following files: 1. phpDataGrid.php and 2. saveDataGrid.php
I made sure that I have unique id for each element of the row and somehow I got hold of that id in the JavaScript. So I pass the row no to my AJAX function. I have a button which performs two tasks depending what we want it to do. One is in edit mode it replaces the text of required fields with input boxes. And in save mode it saves modified data and replaces the input boxes with the modified data.
Really it's simple juggling of data around. I have spans for all editable elements so that I can modify their innerHTML easily. I also use labels to get hold of and set the text very easily. I have used the value of button edit (edit and save respectively) to determine modes. After save we get to see either success/Failure at the end of the row.
You can also add delete right next to edit. Also you can have a small form for new row of data somewhere at the start or end of page. This way we can build ASP.Net's DataGridView like page in PHP.
Download the Project from
HERE .
We have following files: 1. phpDataGrid.php and 2. saveDataGrid.php
I made sure that I have unique id for each element of the row and somehow I got hold of that id in the JavaScript. So I pass the row no to my AJAX function. I have a button which performs two tasks depending what we want it to do. One is in edit mode it replaces the text of required fields with input boxes. And in save mode it saves modified data and replaces the input boxes with the modified data.
Really it's simple juggling of data around. I have spans for all editable elements so that I can modify their innerHTML easily. I also use labels to get hold of and set the text very easily. I have used the value of button edit (edit and save respectively) to determine modes. After save we get to see either success/Failure at the end of the row.
You can also add delete right next to edit. Also you can have a small form for new row of data somewhere at the start or end of page. This way we can build ASP.Net's DataGridView like page in PHP.
Download the Project from
HERE .
Comments
Post a Comment