table row에 double click event시 modify form 띄우기

1.dataTable에 double click event 연동
event : dblclick
selector : tr

//double click
$('#Elements tbody').on('dblclick', 'tr', function(){
    var tr = $(this);
    var row = elementTable.row( tr );
    var rowId = dcmTK.GetRowId(row);
    if(!dcmTK.ShowEditForm(row))
        return;
});

2.nodeDCMTK module에 ShowEditForm()함수 추가. row.data()를 통해 실제 각 column에 해당하는 data 접근

function ShowEditForm(row){
    var rowData = row.data();
}

3. vex.defaultOptions.className = 'vex-theme-top';를 통해 top theme적용 하고 dialog 출력

    vex.defaultOptions.className = 'vex-theme-top';
    vex.dialog.open({
        message: 'Modify Element Value',
        input: [
            '<label for="tag">TAG</label><input name="tag" type="text" value="{0}" readonly/>'.format(tag),
            '<label for="name">Name</label><input name="name" type="text" value="{0}" readonly/>'.format(name),
            '<label for="vr">VR</label><input name="vr" type="text" value="{0}" readonly />'.format(vr),
            '<label for="value">Value</label><input name="value" type="text" value="{0}"  />'.format(value)
        ].join(''),
        buttons: [
            $.extend({}, vex.dialog.buttons.YES, { text: 'OK' }),
            $.extend({}, vex.dialog.buttons.NO, { text: 'Cancel' })
        ],
        callback: function (data) {
            if (!data) 
                return;
                
            console.log('value=', data.value);
        }
    });

4.여기서 기존 row.data()의 data형태가 byte array이고 toString()시 끝에 빈 문자열이 붙는 문제
제거를 위해 아래 두 함수 이용

function strlen(str){
  var stringByteLength = (function(s,b,i,c){
    for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1);
    return b
  })(str);
  return stringByteLength;
}

function trim(str){
  var len = this.strlen(str);
  return str.substring(0, len);
}

5.최종 dialog open 함수

function ShowEditForm(row){
    var rowData = row.data();
    var tag = util.trim(rowData['tag'].toString('utf8'));
    var name = util.trim(rowData['name'].toString('utf8'));
    var vr = util.trim(rowData['vr'].toString('utf8'));
    var value = util.trim(rowData['value'].toString('utf8'));

    vex.defaultOptions.className = 'vex-theme-top';
    vex.dialog.open({
        message: 'Modify Element Value',
        input: [
            '<label for="tag">TAG</label><input name="tag" type="text" value="{0}" readonly/>'.format(tag),
            '<label for="name">Name</label><input name="name" type="text" value="{0}" readonly/>'.format(name),
            '<label for="vr">VR</label><input name="vr" type="text" value="{0}" readonly />'.format(vr),
            '<label for="value">Value</label><input name="value" type="text" value="{0}"  />'.format(value)
        ].join(''),
        buttons: [
            $.extend({}, vex.dialog.buttons.YES, { text: 'OK' }),
            $.extend({}, vex.dialog.buttons.NO, { text: 'Cancel' })
        ],
        callback: function (data) {
            if (!data) 
                return;
                
            console.log('value=', data.value);
        }
    });
    return true;
}

6.최종 결과 화면