How to check a checkbox with javascript

Questions › How to check a checkbox with javascript

Florent PERRET asked 6 years ago

Hi, I use Bulk edit to check multiple row. When I execute custom update data, it’s work perfectly. But when I refresh the page, how to check by default the row and checkbox previously selected ?

I found a solution :

With conditionnal data, I set a class to detect my row selected for the CSS
In Jquery, I use the event “js_on_load_complete” to select the checkbox. This is my code :


$e["js_on_load_complete"] = "checkLigneSelected";
$grid->set_events($e);

.......

// add toolbar button for bulk operation
jQuery(document).ready(function(){
    jQuery('#list1').jqGrid('navButtonAdd', '#list1_pager',
        {
            'caption'      : 'Mettre à jour le groupe <?php echo $row_groupe_choisie["grou_nom"]; ?>',
            'buttonicon'   : 'ui-icon-save',
            'onClickButton': function()
            {
                fx_bulk_update("set-groupe");
            },
            'position': 'last'
        });



});

function checkLigneSelected(){
 $('.ligne_checked').each(function () {
 $(this).attr("aria-selected","true");

 $(this).find('input[type=checkbox]').attr("checked", true);
 $(this).find('input[type=checkbox]').attr("checked", true).trigger("change");
 //alert('tata');
 });
};

3. I have this, it's ok



or link to GDrive

But when I click on the button to call "update_data", I have the message "Please select rows to edit".

Please help me.... :)

Best regards

Question Tags: bulk edit select checkbox by default

3 Answers

0 Vote Up Vote Down

Abu Ghufran Staff answered 6 years ago

To retain checkbox selection after refresh, a better solution will be to use state persistence feature.
Include these JS:

<!-- library for persistance storage -->
 <script src="//cdn.jsdelivr.net/jstorage/0.1/jstorage.min.js" type="text/javascript"></script> 
 <script src="//cdn.jsdelivr.net/json2/0.1/json2.min.js" type="text/javascript"></script>
 <script src="//cdn.rawgit.com/gridphp/jqGridState/63904a57244ef89fa58ca0fa146da8e2e6e4d395/jqGrid.state.js" type="text/javascript"></script>

and then this in body:

<script>
 // user php session id to retain grid state for current session only
 var opts = {
 "stateOptions": { 
 storageKey: "gridState-list1",
 columns: true, // remember column chooser settings
 selection: true, // row selection
 expansion: false, // subgrid expansion
 filters: false, // filters 
 pager: false, // page number
 order: false // field ordering
 }
 };
 </script>


 You can switch true/false as required.

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework

0 Vote Up Vote Down

Florent PERRET answered 6 years ago

Hi thanks for your answer. But how to use this ?
Have you an example ?
Should I remove my code ?
More information : after I refresh the page, I execute a MySQL Query to find if the line is selected.
I use this code :

///—— 1: The Query

$select_sql = "SELECT DISTINCT *,
                                (SELECT liemr_id 
                                 FROM ce_lien_groupe_membre_retraite ta1 
                                 WHERE ta1.liemr_ret_id=t3.ret_id AND liemr_grou_id = '$groupe_choisie') AS est_present     
                        FROM ce_famille t1
                        JOIN ce_membre_famille t2 ON t1.fami_id = t2.memb_fami_id
                        LEFT JOIN ce_membre_famille_retraite t3 ON t2.memb_id = t3.ret_memb_id
                        WHERE memb_num = 1 AND memb_est_retraite = '1' AND (memb_est_decede = 0 or memb_est_decede is null or memb_est_decede = \"\")
                        GROUP BY memb_id";

$grid->select_command = $select_sql;

///------ 2: The Column Grid

$col = array();
$col["title"] = "";
$col["name"] = "memb_id";
$col["hidden"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "";
$col["name"] = "est_present";
$col["hidden"] = true;
$cols[] = $col;


$col = array();
$col["title"] = "Code";
$col["name"] = "fami_code";
$col["width"] = "20";
$col["align"] = "left";
$col["editable"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "Nom";
$col["name"] = "fami_nom";
$col["width"] = "20";
$col["align"] = "left";
$col["editable"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "Prénom";
$col["name"] = "memb_prenom";
$col["width"] = "20";
$col["align"] = "left";
$col["editable"] = true;
$cols[] = $col;

$grid->set_columns($cols);


///------ 3: The CSS
$f = array();
$f["column"] = "est_present";
$f["op"] = ">";
$f["value"] = "0";
//$f["css"] = "'background-color':'#3498DB', 'color':'000', 'font-weight':'bold'"; // must use (single quote ') with css attr and value
$f["class"] = "ligne_checked";
$f_conditions[] = $f;

$grid->set_conditional_css($f_conditions);