I want to create two tables through Jqgrid and add data to another table when I click the row of one table.
Click to move the data to another table, but an error similar to "v.p.data.push is not a function" occurs. I think it's a matter of the type of data. I think it's a problem because it's object-type data that "getRowData", but I don't know why the error occurs.
Please give me some advice.
It's my first time writing stackoverflow, so I'm lacking in writing like this. Please excuse me.
Table to click on
var gridFormat_1={
data : '',
datatype : 'local',
// mtype : 'POST',
loadonce : true,
viewrecords : true,
width : 600,
height : 500,
rowNum : 50,
rowList : [50,100,500],
rownumbers : false,
rownumWidth : 25,
sortname : 'emp_no',
sortorder : 'asc',
multiselect : false,
sortable : false,
autowidth : true,
iScroll : {zoom:true},
pager : '#jqGridPager_1',
caption : ' ',
whitespace : 'nowrap',
wordbreak : true,
// autoRow : true,
//colNames :['emp_no','emp_nm', 'pst_nm', 'dept_nm','dept_cd','pst_cd'],
colModel :[
{label: 'emp_no', name:'emp_no', index:'emp_no', sortable:'text', sorttype:'text', width:50, align:'left', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
{label: 'emp_nm', name:'emp_nm', index:'emp_nm', sorttype:'text', sorttype:'text', width:60, align:'left', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
{label: 'pst_nm', name:'pst_nm', index:'pst_nm', sorttype:'text', sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
{label: 'dept_nm', name:'dept_nm', index:'dept_nm', sorttype:'text', sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
{label: 'dept_cd', name:'dept_cd', index:'dept_cd', sortable:'text', sorttype:'text', width:130, align:'left', editable:false , height:'auto', hidden:true },
{label: 'pst_cd', name:'pst_cd', index:'pst_cd', sorttype:'text', sorttype:'text', width:60, align:'left', editable:false , height:'auto', hidden:true },
],
loadError : function(xhr, status, err){
try {
jQuery.jgrid.info_dialog(
jQuery.jgrid.errors.errcap,''
+ xhr.responseText + '', jQuery.jgrid.edit.bClose,
{buttonalign:'right'}
);
} catch(e) {
alert(xhr.responseText);
}
}
};
$.init_grid_table($("#main_table_1"),gridFormat_1);
Table to add rows to
var gridFormat_2={
data : '',
datatype : 'local',
// mtype : 'POST',
loadonce : true,
viewrecords : true,
width : 600,
height : 500,
rowNum : 50,
rowList : [50,100,500],
rownumbers : false,
rownumWidth : 20,
sortname : 'emp_no',
sortorder : 'asc',
multiselect : false,
sortable : false,
autowidth : true,
iScroll : {zoom:true}, // cell mouse over시 Zoom
pager : '#jqGridPager_2',
caption : ' ',
whitespace : 'nowrap',
wordbreak : true,
// autoRow : true,
dragModel :{on: true, diHelper:['emp_no']},
dropModel :{ on: true },
//colNames :['emp_no','emp_nm', 'pst_nm', 'dept_nm','dept_cd','pst_cd'],
colModel :[
{label: 'emp_no', name:'emp_no', index:'emp_no', sortable:false, sorttype:'text', width:50, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
{label: 'emp_nm', name:'emp_nm', index:'emp_nm', sortable:false, sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
{label: 'pst_nm', name:'pst_nm', index:'pst_nm', sortable:false, sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
{label: 'dept_nm', name:'dept_nm', index:'dept_nm', sortable:false, sorttype:'text', width:60, align:'center', editable:false , height:'auto', cellattr: function (rowId, tv, rawObject, cm, rdata) { return 'style="white-space: normal;"' }},
{label: 'dept_cd', name:'dept_cd', index:'dept_cd', sortable:false, sorttype:'text', width:130, align:'center', editable:false , height:'auto', hidden:true },
{label: 'pst_cd', name:'pst_cd', index:'pst_cd', sortable:false, sorttype:'text', width:60, align:'center', editable:false , height:'auto', hidden:true },
],
beforeSelectRow : function (rowid, e) {
var $myGrid = $(this),
i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
cm = $myGrid.jqGrid('getGridParam', 'colModel');
return (cm[i].name === 'cb');
},
loadError : function(xhr, status, err){
try {
jQuery.jgrid.info_dialog(
jQuery.jgrid.errors.errcap,''
+ xhr.responseText + '', jQuery.jgrid.edit.bClose,
{buttonalign:'right'}
);
} catch(e) {
alert(xhr.responseText);
}
}
};
$.init_grid_table($("#main_table_2"),gridFormat_2);
// Drag and drop
$("#main_table_2").jqGrid('sortableRows',{
update : function( e, html){
console.log( html.item[0].id );
}
});
JS when event
$(document).on("click", "#main_table_1 tbody tr", function() {
var rowIndex = $(this).index();
var tr_cnt = $("#main_table_1 tbody tr").length;
// alert("rowIndex : "+rowIndex);
// alert("tr_cnt : "+tr_cnt);
// alert("addrowId : "+addrowId);
for(var i=0; i<tr_cnt; i++){
if ( i == rowIndex ) {
$(this).parent().parent().find("tr").eq(i).find("td").css("background-color","#B0BED9");
AddrowSubtable(rowIndex);
}
else {
$(this).parent().parent().find("tr").eq(i).find("td").css("background-color","#fafafa");
//alert("i: " + i);
} // if end
} // for end
});
function AddrowSubtable(rowIndex){
var rowData = $("#main_table_1").getRowData(rowIndex+1);
addrowId = $("#main_table_2").getGridParam("reccount");
alert(JSON.stringify(rowData));
$("#main_table_2").jqGrid('addRowData', addrowId+1 , rowData , 'last');
}
I'm asking you a question because I saw " jqgrid addRowData gives error t.p.data.push is not a function " but it didn't work.