child item을 show & hide를 수행하기 위해
1. 먼저 child item tag를 row로 추가시 아래와 같이 parentid
attribute를 추가
RowId는 DataTable의 row.id()
를 사용
function SetRowId(row, id){ return row.nodes().to$().attr("parentid", id); } var row = parentRow.table().row.add({ ... }).draw(false); ///Add explicitly SetRowId(row, GetRowId(parentRow));
2.추가된 row는 hide
상태로 표시
row.nodes().to$().hide();
3.open, closed icon인 details-control
class의 click event에서 tr과 row 구하기
// Add event listener for opening and closing details $('#Elements tbody').on('click', 'td.details-control', function () { var tr = $(this).closest('tr'); var row = elementTable.row( tr ); ... } );
4.row의 class상태가 opend인지 closed인지 확인 하여 해당 parentid로 개별 row의 값을 show(), hide()수행
var parentid = dcmTK.GetRowId(row); if(dcmTK.IsRowOpend(row)) { dcmTK.SetOpenClosed(row, 'closed'); $('[parentid={0}]'.format(parentid)).each(function(){ $(this).show(); }); } else if(dcmTK.IsRowClosed(row)) { dcmTK.SetOpenClosed(row, 'opend'); $('[parentid={0}]'.format(parentid)).each(function(){ $(this).hide(); }); }
5.결과화면