Updating records through Matrix view
Main file showing the Matrix with checkboxes to update tables
Backend PHP script to update data
Database connection file with login details
MySQL dump file to create tables with sample data
Download Zip file at end of this tutorial.Any change in status of checkboxes will update the database table. Here we are selecting students for different teams. By checking or unchecking the respective checkboxes in the grid we can update the matching field of the database table.
Checkbox in each row is represents one student ( with unique id ) and each column represents one type of game. By checking the checkbox ( making it True ) we select the student for the particular game.
This script uses PHP, MySQL database and JQuery
Database table student_teamOur table name is student_team. There is one record against each student and different types of games are arranged in columns ( field names ). All game name ( field name ) are binary field type, they store either True or False as data. MySQL keeps such binary data as Tinyint(1) and stores 1 for Ture and 0 for False. Table with sample data is stored in sql dump file and kept inside the zip file at the end of this tutorial.
Query to collect records from tableOur main file data-matrx.php file will collect records from the database table and display them. In our Query we will use SQL if condition so we will get output as checked when the field data is True and returns blank string when the data is equal to False. This way we can manage a checkbox based on the data present in the table.
For each student and against each game there is a checkbox. If the data in the table is True ( or 1 ) then the output should be equal to checked. Here is the query for that .
We will display checkboxes for each column will displaying the matrix. Here we have used MySQLi record display using fetch_array().
This will display the grid as shown above.
JQuery part to manage the checkbox eventsEach checkbox has one attribute data-id ( same as student id ) and column_name ( name of the game ). We will use change event of checkbox to pass these two data to our JQuery script and then to our backend script data-matrixck.php by using POST method.
Backed PHP script to update databaseThe backend PHP script will receive the data ( id and column name ) and update the matching record. Here we will updating the table with binary field, so we will just update by toggling the field value.
Using CheckboxRadio JQuery UIYou can add several more features to the script like , restricting number of students in a team and maximum number of games a student can participate etc …
In place of checkboxes we can use checkboxradio JQuery UI Checkbox control to display colourful user interface to toggle the data.
Check the demo
How to Install and test