I have a Problem to Display a Grid as a Subgrid using an extra button. I tried to copy the code from the
subGridRowExpanded:
Event. But the Grid is doing something nasty, before the subGridRowExpanded is fired. If I use the + button at the left side the grid is displayed properly. If I now push my created button, the subGrid is reloaded too. I used an alert to stop the function at the beginning and I saw the table is inserted before the subGridRowExpanded.
So I guess I'm missing a function before the Event. Maybe I'm using a wrong Event for my task.
Here is my Code which is from the Basic Example. The function which generates the Button:
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+");\" />";
}
}
The function which is called (just copied from the Grid as subgrid Example):
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 pa开发者_Go百科ss 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");
}
I found it myself. You don´t have to call a seperate function. Since jqGrid 3.3 or something like that, there is a function called:
toggleSubGridRow()
or
expandSubGridRow()
you can call the function like this:
<input type='button' value='Comment' onclick=\"jQuery('#list').toggleSubGridRow('"+rowid+"');\" />
If clicked the registered function from the
subGridRowExpanded:
function(subgrid_id, row_id) {...}
Event is called.
精彩评论