search

ax5ui / ax5ui-grid

Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
http://ax5.io/ax5ui-grid/demo/index.html
MIT License
99 stars 36 forks source link

tree 에서 항목 확장/축소시 선택 항목의 값 표시 오류 #63

Closed 2seungjo closed 7 years ago

2seungjo commented 7 years ago

아래 html 을 띄워보면, grid tree 에서 항목을 모두 확장한 상태에서는 선택한 항목의 값을 잘 가져오지만, 항목을 축소하면 선택한 항목의 값이 아닌, 확장되었을때 그 위치에 있던 값을 가져오는 문제가 있습니다.

<!DOCTYPE html><html>
<head>
<title>AX5UI grid tree test</title>
<meta http-equiv='X-UA-Compatible' content='EDGE'>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name='ROBOTS' content='NOINDEX, NOFOLLOW'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet' type='text/css' href='https://cdn.rawgit.com/ax5ui/ax5ui-formatter/master/dist/ax5formatter.css'>
<link rel='stylesheet' type='text/css' href='https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css'>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'> </script>
<script type='text/javascript' src='https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js'> </script>
<script type='text/javascript' src='https://cdn.rawgit.com/ax5ui/ax5ui-formatter/master/dist/ax5formatter.min.js'> </script>
<script type='text/javascript' src='https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js'> </script>
</head>
<body>
<div style='position:relative;height:300px;width:332px;float:left' id='grid-parent'>
    <div id ='svc_tree' data-ax5grid='svc_tree' data-ax5grid-config='{}' style='height: 100%;'></div>
</div>
<div style='width:600px;height:300px;float:left;border:1px solid #ccc'>
    <input type='text' id='svc_cd' style='width:200px'> svc_cd<br>
    <input type='text' id='svc_name' style='width:200px'> svc_name<br>
    <input type='text' id='fee_itm_name' style='width:200px'> fee_itm_name<br>
    <input type='text' id='aval_stdt' style='width:200px'> aval_stdt<br><br>
    왼쪽 서비스 tree에서 항목을 선택하면 오른쪽에 선택한 내역이 표시되는데,<br>
    트리가 모두 확장된 상태에선 내용이 정상적이지만,<br>
    선택한 항목보다 위에 있는 트리를 접은 상태에서 항목을 선택하면<br>
    모두 확장된 상태에서의 내역으로 잘못 표시되고 있습니다.<br>
    예)<br>
    - 모두 확장된 상태에서 100M포트 선택시 정상적인 100M포트 표시<br>
    - A1. 랙 을 접은 상태에서 100M포트 선택시, 접기 전의 내역인 1/4랙이 표시<br><br> 
    과거 axisj 에서의 tree 에서는 이상이 없었습니다.  
</div>
<script type='text/javascript'>
var list =[
    {'rownum':'1','svc_cd':'000001','svc_cls':'0','p_svc_cd':null,'svc_name':'Hosting','aval_stdt':'19941001','aval_endt':'99991231','fee_itm_cd':null,'fee_itm_name':null,'fee_stdt':null,'fee_endt':null,'itm_cost':null},
    {'rownum':'2','svc_cd':'100171','svc_cls':'0','p_svc_cd':'000001','svc_name':'A. Hosting','aval_stdt':'19941001','aval_endt':'99991231','fee_itm_cd':null,'fee_itm_name':null,'fee_stdt':null,'fee_endt':null,'itm_cost':null},
    {'rownum':'3','svc_cd':'100191','svc_cls':'0','p_svc_cd':'000001','svc_name':'B. \uae30\ud0c0 \ub9e4\ucd9c','aval_stdt':'19941001','aval_endt':'99991231','fee_itm_cd':null,'fee_itm_name':null,'fee_stdt':null,'fee_endt':null,'itm_cost':null},
    {'rownum':'4','svc_cd':'100175','svc_cls':'0','p_svc_cd':'000001','svc_name':'C. \uc811\uc18d\uc11c\ube44\uc2a4','aval_stdt':'19941001','aval_endt':'99991231','fee_itm_cd':null,'fee_itm_name':null,'fee_stdt':null,'fee_endt':null,'itm_cost':null},
    {'rownum':'5','svc_cd':'200444','svc_cls':'0','p_svc_cd':'000001','svc_name':'D. \uc694\uae08 \uc870\uc815','aval_stdt':'20010116','aval_endt':'99991231','fee_itm_cd':null,'fee_itm_name':null,'fee_stdt':null,'fee_endt':null,'itm_cost':null},
    {'rownum':'6','svc_cd':'200770','svc_cls':'0','p_svc_cd':'100171','svc_name':'A1. \ub799','aval_stdt':'20000101','aval_endt':'99991231','fee_itm_cd':null,'fee_itm_name':null,'fee_stdt':null,'fee_endt':null,'itm_cost':null,'colfee_cycl':null},
    {'rownum':'7','svc_cd':'200771','svc_cls':'0','p_svc_cd':'100171','svc_name':'A2. \ud3ec\ud2b8','aval_stdt':'20000101','aval_endt':'99991231','fee_itm_cd':null,'fee_itm_name':null,'fee_stdt':null,'fee_endt':null,'itm_cost':null},
    {'rownum':'8','svc_cd':'100201','svc_cls':'3','p_svc_cd':'200770','svc_name':'1\/2\ub799','aval_stdt':'20000701','aval_endt':'99991231','fee_itm_cd':'102','fee_itm_name':'\uc774\uc6a9\ub8cc','fee_stdt':'20000615','fee_endt':'99991231','itm_cost':'0'},
    {'rownum':'9','svc_cd':'200131','svc_cls':'3','p_svc_cd':'200770','svc_name':'1\/4\ub799','aval_stdt':'20000801','aval_endt':'99991231','fee_itm_cd':'102','fee_itm_name':'\uc774\uc6a9\ub8cc','fee_stdt':'20000615','fee_endt':'99991231','itm_cost':'0'},
    {'rownum':'10','svc_cd':'100209','svc_cls':'3','p_svc_cd':'200771','svc_name':'100M\ud3ec\ud2b8','aval_stdt':'20000701','aval_endt':'99991231','fee_itm_cd':'102','fee_itm_name':'\uc774\uc6a9\ub8cc','fee_stdt':'20000615','fee_endt':'99991231','itm_cost':'0'},
    {'rownum':'11','svc_cd':'100206','svc_cls':'3','p_svc_cd':'200771','svc_name':'10M\ud3ec\ud2b8','aval_stdt':'20000701','aval_endt':'99991231','fee_itm_cd':'102','fee_itm_name':'\uc774\uc6a9\ub8cc','fee_stdt':'20060615','fee_endt':'99991231','itm_cost':'0'}
    ];

//상품 tree
var gridTree1 = new ax5.ui.grid;
gridTree1.setConfig (
    {
        target: $('[data-ax5grid='svc_tree']'),
        header: {
            display: false,
        },
        columns: [
            {key:'svc_cd', label:'상품코드', width:0, align:'left'},
            {key:'svc_name', label:'제목', width:315, align:'left',  
                formatter:function(){
                    if (this.item.svc_cls!=0) {
                        return (this.item.svc_name + ' - ' +this.item.fee_itm_name + ' ('+this.item.svc_cd+')');
                    } else {
                        return (this.item.svc_name);
                    }       
                },
                styleClass: function(){return (this.item.fee_endt != '99991231' && this.item.fee_endt != null) ? 'grid-cell-red' : '';}, 
                treeControl: true
            }
        ],
        body: {
            columnHeight: 26,
            onClick:function(){
                sel_svc(this.item);
            }
        },
        tree: {
            use: true,
            indentWidth: 10,
            arrowWidth: 18,
            iconWidth: 18,
            icons: {
                openedArrow: '<i class='fa fa-caret-down fa-lg' aria-hidden='true'></i>',
                collapsedArrow: '<i class='fa fa-caret-right fa-lg' aria-hidden='true'></i>',
                groupIcon: '<i class='fa fa-folder-open-o' aria-hidden='true'></i>',
                collapsedGroupIcon: '<i class='fa fa-folder-o' aria-hidden='true'></i>',
                itemIcon: '<i class='fa fa-circle' aria-hidden='true'></i>'
            },
            columnKeys: {
                parentKey: 'p_svc_cd',
                selfKey: 'svc_cd'
            }
        }
});
gridTree1.setData(list);
function sel_svc(obj) {
    $('#svc_cd').val(obj.svc_cd);
    $('#svc_name').val(obj.svc_name);
    $('#fee_itm_name').val(obj.fee_itm_name);
    $('#aval_stdt').val(obj.aval_stdt);
}
</script>
</body>
</html>
thomasJang commented 7 years ago

패치된 버전을 가지고 테스트 해보세요.

@2seungjo 님을 두고 말씀 드리는 건 아닌데요. 이글을 보시는 모든 분들께 말씀드립니다. 이슈를 남기시면 제가 또는 커미터들이 패치를 하자나요. 패치가 빠르게 되던지 늦게 되던지 누군가는 일을 하는 거지요. 그런데 안된다고 질문만 하시고 답이 없으시면 참 허무합니다.

한국 개발자분들은 원래 좀 시크하고 샤이하니까 이해는 됩니다. 하지만 이런 문화는 정말 잘못된 문화 입니다. 반드시 고쳐져야 합니다.

이글을 보시는 모든 분들! 꼭 이슈 남기셨으면 피드백 주세요. 감사합니다.

2seungjo commented 7 years ago

감사합니다. 그동안 다른 편법이 없을까 연구하고 있었는데, 이제 잘 작동되니 안심이 됩니다. 이 기능을 이용해서 업무를 보던 여직원이 열흘 넘게 휴가를 갔는데, 다음주에 복귀하면 기뻐하겠네요. 2014년부터 AXISJ를 이용하다가 이번에 AX5UI로 모두 바꾸는 과정에서 문제가 생겼는데, tree 문제가 해결되었으니 저도 모든 작업이 끝났습니다. 그동안 사용해보지 않았던 다른 API들을 이용해서 새로운 기능 추가를 생각해 볼 시간이 생겼습니다. 안보이는 곳에서 여러분들이 고생많으셨습니다.