jqgrid Afficher la grille en tant que sous-grille par bouton séparé

Question

J'ai un problème pour afficher une grille en tant que sous-grille en utilisant un bouton supplémentaire. J'ai essayé de copier le code de l'

subGridRowExpanded: 

événement. Mais la grille fait quelque chose de méchant, avant que le subGridRowExpanded ne soit déclenché. Si j'utilise le bouton + sur le côté gauche, la grille s'affiche correctement. Si je pousse maintenant mon bouton créé, le sous-grid est rechargé aussi. J'ai utilisé une alerte pour arrêter la fonction au début et j'ai vu la table est insérée avant le subGridRowExpanded.

Donc je suppose qu'il me manque une fonction avant l'événement. Peut-être que j'utilise un mauvais événement pour ma tâche.

Voici mon code qui provient de l'exemple de base. La fonction qui génère le bouton:

gridComplete: function(){ 
    var ids = jQuery("#task").jqGrid('getDataIDs'); 
    var running_task_ids=get_running_task_id_ajax(); 
    for(var i=0;i < ids.length;i++){ 
     var cl = ids[i]; 
     start = "<input style='height:22px;width:50px;' type='button' value='Start' onclick=\"start_stop_task('"+cl+"','start');\" />"; 
     stop = "<input style='height:22px;width:50px;' type='button' value='Stop' onclick=\"start_stop_task('"+cl+"','stop');\" />"; 
     se = "<input style='height:22px;width:50px;' type='button' value='Save' onclick=\"jQuery('#task').saveRow('"+cl+"');\" />"; 
     //ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#task').restoreRow('"+cl+"');\" />"; 
     co = "<input style='height:22px;width:70px;' type='button' value='Comment' onclick=\"foobar('task_"+cl+"',"+cl+");\" />"; 
     } 
} 

La fonction qui est appelée (juste copié de la grille comme exemple sous-grille):

function foobar(subgrid_id, row_id) { 
// klappt noch nicht! 

alert(subgrid_id+":"+row_id); 
// we pass two parameters 
// subgrid_id is a id of the div tag created whitin a table data 
// the id of this elemenet is a combination of the "sg_" + id of the row 
// the row_id is the id of the row 
// If we wan to pass additinal parameters to the url we can use 
// a method getRowData(row_id) - which returns associative array in type name-value 
// here we can easy construct the flowing 
var subgrid_table_id, pager_id; 
    subgrid_table_id = subgrid_id+"_t"; 
    pager_id = "p_"+subgrid_table_id; 
    $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>"); 
    jQuery("#"+subgrid_table_id).jqGrid({ 
     url:"ajax/listtasktime/id/"+row_id, 
     onSelectRow: 
      function(id){ 
      if(id && id!==lastsel2){ 
        jQuery('#'+subgrid_table_id).jqGrid('restoreRow',lastsel2); 
        //jQuery('#task').jqGrid('editRow',id,true,pickdates_e); 
        jQuery('#'+subgrid_table_id).jqGrid('editRow',id,true); 
        lastsel2=id; } 
     }, 

     datatype: "xml", 
     colNames: ['ID','START','END', 'Time'], 
     colModel: [ 
       {name:"ID",index:"num",width:80,key:true}, 
       {name:"START",index:"item",width:180,editable: true}, 
       {name:"END",index:"qty",width:180,align:"right",editable: true}, 
       {name:"TIME",index:"qty",width:180,align:"right"} 
       ], 
       rowNum:20, 
       pager: pager_id, 
       sortname: 'num', 
       sortorder: "asc", 
       height: '100%' 
        }); 
    jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false}) 
    alert("done");  
    } 

Answer 1

je l'ai trouvé moi-même. Vous ne devez pas appeler une fonction séparée. Depuis jqGrid 3.3 ou quelque chose comme ça, il y a une fonction appelée:

toggleSubGridRow() 

ou

expandSubGridRow() 

vous pouvez appeler la fonction comme ceci:

<input type='button' value='Comment' onclick=\"jQuery('#list').toggleSubGridRow('"+rowid+"');\" /> 

Si vous cliquez dessus la fonction enregistrée de le

subGridRowExpanded: 
     function(subgrid_id, row_id) {...} 

L'événement est appelé.