This topic is locked

Guide 89 – Multiple features on the “LIST” page

10/10/2024 1:52:14 PM
PHPRunner Tips and Tricks
fhumanes author

This example programs different functionalities that are often required to be done on LIST pages.

Specifically, this example has been created for a process of reconciling bank forecasts and movements, although the example is only intended to explain the programming of the functionality that the application must contemplate.

The example has this interface:

img alt

Objetive

Solve the following functionalities:

(1) .- Button that performs a process for each of the selected records. If no record is selected, the button would be disabled and could not be clicked. It is activated and deactivated depending on the selected records.

(2).- Being able to add changes to the record background or font color when the cursor is over the record. Facilitates marking of all the information in the record.

(3).- To select or deselect the record you can click on it. It is not necessary to do so on the selection check.

(4).- In the example, if the “Control” field is not active in the record, then when displaying the page the record must show it as preselected.

(5).- In this case, when there are several records where the “Control” field is active and its amount is the same, they are grouped together maintaining a background color that highlights them.

(6).- As there may be groups of the (5) continuous condition, the system uses different background colors so that the groups can be perfectly appreciated.

DEMO: https://fhumanes.com/guia_89/

If you are interested in this topic, continue reading the article at this link.

fhumanes author 10/10/2024

Some of the coded events are.

“JavaScript Onload” event :

// console.log('Rows Selected: ',proxy['selected']);
var selected = proxy['selected'];

var table_grid = '#form_grid_'+pageid; // Botón de recuperar id's de registros chequeados
//
// Selection check row, with clic into row record
$(table_grid + " tr[id^=gridRow]").bind('click',function() {
$("input[name^=selection]",this).click();
});
// Para los casos de poner el ratón sobre una fila, añade y elimina una clase de CSS que fija el color de fondo sobre dicha fila.
$( table_grid +' tbody tr').hover(function(){
$(this).find('td').addClass('resaltar');
}, function(){
$(this).find('td'). removeClass('resaltar');
});

// Control de algún registro seleccionado para desactivar y activar el botón
var buttom_selected = 'a[id^="Selected_"]';
$(buttom_selected).attr("disabled","disabled");
$(buttom_selected).addClass('disabled');

// Para control de número de check seleccionados y activación o desactivación del botón
$( table_grid +' input[type="checkbox"][name^="selection"').change( function(e) {
var $target = $(e.target),
selBoxes;

if ( $target.attr('name') == 'selection[]') {
selBoxes = pageObj.getSelBoxes( pageid );
if ( selBoxes.length > 0 ) {
$(buttom_selected).removeAttr('disabled');
$(buttom_selected).removeClass('disabled');
} else {
$(buttom_selected).attr("disabled","disabled");
$(buttom_selected).addClass('disabled');
}
}
});

// Activar los check dependiendo de los informado
selected.forEach((id) => {
var field = '#check1_'+id;
$(field).attr('checked', true).triggerHandler('change');
// console.log(id + '--'+field);
});

If you want to see all the codes and be able to download the example, access the article of this link

C
cristi 10/11/2024

Great turorial as ever Fernando!
A small issue that I saw in your demo: when you check the checkboxes for each record the enable/disable Selected button functionality works (1), however when you click on the records to check/uncheck them the functionality is broken and the button is always enabled/disabled depending of the status before (3) + (1).

fhumanes author 10/11/2024

Thank you very much Cristi.

I did the tests using Jquery to activate the selected check and then change it to use the phprunner functionality and I did not see the problem you have indicated.

I have already changed it, eliminating this definition:

img alt

And activating the JavaScript lines that were commented:

img alt

Greetings,
fernando

C
cristi 10/11/2024

Perfect!

Thank you.