들어가며

이 강좌에서는 원하는 데이터가 들어있는 노드를 찾고 그 노드의 상위노드를 찾아 펼치는 것을 배워보겠습니다.

이론

그리드에서 데이터를 검색하기 위해 GridBase 기반으로 searchItem(), searchCell() 두 개의 검색 함수를 사용할 수 있습니다. 그러나 이 기능은 그리드에 보여지는 데이터를 대상으로 검색을 수행하기 때문에 트리의 접혀져있는 데이터들은 검색할 수 없습니다.

이런 경우는 모든 데이터들 검색하기 위해서는 별도로 dataProvider에서 검색을 수행해야 합니다.
여기서 조심해야 할 것이 일반 그리드의 경우 rowId는 0부터 시작해서 순차적으로 1씩 증가하나 트리 그리드의 경우는 0부터 시작하지 않고 순차적으로 1씩 증가하지 않을 수 있습니다. root Node에 물려있는 첫번째 노드들의 rowId가 2, 6, 10, 21 이런 식으로 배정될 수 있습니다.

이런 것을 감안해서 값을 검색해보는 코드를 작성해보도록 하겠습니다. 관련된 강좌로 B9-5 TreeView - 자식/자손/조상의 RowId 값 가져오기.을 먼저 선행 습득하시기 바랍니다.

B9-5 강좌를 보셨다면 모든 트리그리드의 Root ID는 -1 인 것을 인지하고 계시리라 생각됩니다. 데이터 검색은 dataProvider.getChildren(-1) 함수로 1 Level 노드들만 가져오고 각 노드들의 모든 자손들을 가져와서 값을 찾는 방법으로 코드를 작성하도록 하겠습니다.

실습

아래 코드는 price가 9999999 자료를 찾아 expand 하는 코드 입니다.

function treeSearch() {
    var searchData = 99999999;
    var parentIds = dataProvider.getChildren(-1);

    for (var i in parentIds) {
        var descendantIds = dataProvider.getDescendants(parentIds[i]);

        for (var j in descendantIds) {
            var fldData = dataProvider.getValue(descendantIds[i], 'price');

            if (searchData == fldData) {
                var ancestorIds = dataProvider.getAncestors(descendantIds[i]);

                for(var k = ancestorIds.length - 1 ; k >= 0 ; k--) {
                    var itemIndex = treeView.getItemIndex[ancestorIds[k]];
                    treeView.expand(itemIndex);
                }  
            }
        }
    }
}

아래 코드는 버튼의 클릭 이벤트 입니다.

$("#btnSearch").click(function(){
    treeSearch();
});

실행화면

  1. 버튼을 누르면 price 가 9999999 인 값을 찾아 트리를 펼칩니다.

전체 소스코드

SCRIPT
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>

<script language="javascript">
  var treeView;
  var dataProvider;
  var rows = [
    ["ko","국내"]
    ,["ko.co", "컴퓨터"]
    ,["ko.co.001", "인텔 SSD 520 120GB", 63900]
    ,["ko.co.002", "LED 게이밍키보드", 29700]
    ,["ko.co.003", "팩스무선레이저복합기", 119000]
    ,["ko.bo", "서적"]
    ,["ko.bo.001", "미움받을 용기", 13410]
    ,["ko.bo.002", "기탄 세계명작동화50권", 69000]
    ,["ko.sw", "프로그램"]
    ,["ko.sw.001", "리얼그리드", 9999999]    
    ,["ov", "해외"]
    ,["ov.ha", "가전"]
    ,["ov.ha.001", "32G Amazon phone", 130]
    ,["ov.ha.002", "TDK- Wireless Speaker", 49.99]
    ,["ov.ha.003", "대륙의 실수 QCY QY5s", 18.59]
    ,["ov.tv", "TV/영상"]
    ,["ov.tv.001", "LG 55LF6000", 498]
    ,["ov.tv.002", "Samsung Smart LED FHD 60\"", 897.99]
];

  $(document).ready( function() {

    RealGridJS.setTrace(false);
    RealGridJS.setRootContext("/script");
    
    dataProvider = new RealGridJS.LocalTreeDataProvider();
    treeView = new RealGridJS.TreeView("realgrid");
    treeView.setDataSource(dataProvider);

    dataProvider.setFields([{
      fieldName: "tree"
    }, {
      fieldName: "product"
    }, {
      fieldName: "price"
    }]);

    treeView.setColumns([{
      name: "product",
      fieldName: "product",
      width: 200
    }, {
      name: "price",
      fieldName: "price"
    }]);

    dataProvider.setRows(rows, "tree", false);

    function treeSearch() {
        var searchData = 9999999;
        var parentIds = dataProvider.getChildren(-1);

        for (var i in parentIds) {
            var descendantIds = dataProvider.getDescendants(parentIds[i]);

            for (var j in descendantIds) {
                var fldData = dataProvider.getValue(descendantIds[j], 'price');

                if (searchData == fldData) {
                    var ancestorIds = dataProvider.getAncestors(descendantIds[j]);

                    for(var k = ancestorIds.length - 1 ; k >= 0 ; k--) {
                        var itemIndex = treeView.getItemIndex(ancestorIds[k]);
                        treeView.expand(itemIndex);
                    }
                }
            }
        }
    }

    $("#btnSearch").click(function () {
        treeSearch()
    });
   });    

</script>
HTML
1. <input type="button" class="btn btn-primary btn-xs" id="btnSearch" value="Search" /> 버튼을 누르면 price 가 9999999 인 값을 찾아 트리를 펼칩니다.

<div id="realgrid" style="width: 100%; height: 200px;"></div>

관련 데모 페이지

API 참조