SMART datagrid v1.4 > Examples

Back  Forward

Load Tree Data  Example
no-lite

TreeDataLoader.load를 이용하면 서버로 부터 가져온 여러 형식의 원본 데이터를 TreeDataSet으로 로드할 수 있다. 

Code -1
    new TreeDataLoader(dataSet).load('csv', data, {
        start: 1,
        quoted: true,
        ...
    });

load 메소드의 첫번째는 데이터 형식을 지정한다. 현재, 'csv', 'json', 'xml' 세 가지를 지원한다. data는 원본 데이터인데, 첫 매개변수에 지정한 형식에 따라 문자열이거나 Json 객체, 혹은 XML 도큐먼트 객체일 수 있다. 

기존에 있던 데이터행들을 모두 제거한 후 새로운 행들을 생성하고, 로드 완료 후 onRowCountChanged 이벤트가 발생된다. 

1. Csv 데이터

아래와 같은 형식으로 저장된 csv 파일을 서버로부터 가져와 트리 데이터셋을 구성한다. 첫 째 줄은 필드 이름들이 들어 있으므로 로드 옵션의 start1이 된다. 또, 값을 쌍 따옴표로 묶은 필드들이 존재하므로 quotedtrue로 지정하고, NUMBER 필드의 값에 숫자가 아닌 문자가 들어 있으므로 currencytrue로 지정한다. 옵션에 지정할 수 있는 값들에 대한 자세한 설명은 TreeDataLoader.load 토픽을 참조한다. 

중요한 옵션은 treeFielduseTreeField인데 아래 파일에서는 두 번째 필드에 트리 정보가 있으므로 treeField는 1이 되고, 이 필드 값들은 데이터셋에 저장되지 않도록 useTreeField는 false가 된다. 보다 자세한 설명은 load 토픽을 참조한다. 

Icon,Tree,Loan Number,Country,Interest Rate,Currency of Commitment,Project ID,Original Principal Amount,Cancelled Amount,Disbursed Amount,Repaid to IBRD,Sold 3rd Party,First Repayment Date,Last Repayment Date
0,1,IBRD00010,France,4.25,USD,P037383,"$250,000,000.00 ",$0.00 ,"$250,000,000.00 ","$38,000.00 ","$249,962,000.00 ",11/01/1952,05/01/1977
0,1.1,IBRD00020,Netherlands,4.25,USD,P037452,"$191,044,211.75 ",$0.00 ,"$191,044,211.75 ","$103,372,211.75 ","$87,672,000.00 ",04/01/1952,10/01/1972
0,1.2,IBRD00021,Netherlands,4.25,USD,P037452,"$3,955,788.25 ",$0.00 ,"$3,955,788.25 ",$0.00 ,"$3,955,788.25 ",04/01/1953,04/01/1954
0,1.2.1,IBRD00030,Denmark,4.25,USD,P037362,"$40,000,000.00 ",$0.00 ,"$40,000,000.00 ","$17,771,000.00 ","$22,229,000.00 ",02/01/1953,08/01/1972

Csv 형식으로 저장된 text 파일을 읽어 들인다. 

Tree - 1
rows
2. Json 데이터

아래와 같은 Json 배열을 데이터셋으로 로드하기 위해서는 먼저 타입을 "json"으로 지정하고, rows, childRows 옵션을 지정하면 된다. rows 는 최상위 행으로 가져올 객체들이 어떤 것들인 지를 지정하는 것이고, childRows는 그 이후로 자식행의 배열이 어떤 속성에 들어 있는 지를 지정하는 것이다. 이 예제에서는 배열의 최상위 항목을 데이터셋의 최상위 행들로 생성하기 위해 rows를 빈 문자열로 지정하고, "rows" 속성으로 지정된 json 배열을 자식행들로 가져오기 위해 childRows는 "rows"로 지정한다. 

속성들에 대한 보다 자세한 설명은 TreeDataLoader.load 토픽을 참조한다. 

[
  {
    "icon": "0",
    "loan_number": "IBRD00010",
    "country": "France",
    "first_date": "11/01/1952",
    "last_date": "05/01/1977",
    "rows": [
      {
        "icon": "0",
        "loan_number": "IBRD00020",
      },
      {
        "icon": "0",
        "loan_number": "IBRD00021",
        "country": "Netherlands",
        "rows": [
          {
            "icon": "0",
            "loan_number": "IBRD00030",
            "country": "Denmark",
          },
          {
            "icon": "0",
            "loan_number": "IBRD00040",
          }
        ]
      },
      {
        "icon": "0",
        "loan_number": "IBRD00050",
      }
    ]
  },
  {
    "icon": "1",
    "loan_number": "IBRD00060",
    "country": "Chile",

Json 형식으로 저장된 text 파일을 읽어 들인다. 

Tree - 2
rows
3. Xml 데이터

아래와 같이 Xml 텍스트 파일로 전달된 데이터를 트리 데이터셋으로 로드하기 위해서는 먼저 타입을 "xml"로 지정하고, rows, childRows 옵션을 지정하면 된다. Json의 경우와 속성 이름은 동일하지만 지시하는 내용은 다르다. 

rows는 데이터행으로 가져올 xml element들의 tag 이름이다. 아래 예제에서는 row다. childRows는 자식 행들을 가져올 element들을 포함한 element의 tag 이름이다. 예제에서는 rows다. 이 속성은 지정하지 않을 수도 있는데 자식 element들을 포함하는 상위 element가 따로 존재하지 않고, 바로 아래 rows로 지정한 element들이 포함되어 있는 경우다. 

속성들에 대한 보다 자세한 설명은 TreeDataLoader.load 토픽을 참조한다. 

<?xml version="1.0" encoding="UTF-8"?>
<rows>
    <row>
        <icon>0</icon>
        <loan_number>IBRD00010</loan_number>
        <country>France</country>
        <first_date>11/01/1952</first_date>
        <last_date>05/01/1977</last_date>
        <rows>
            <row>
                <icon>0</icon>
                <loan_number>IBRD00020</loan_number>
            </row>
            <row>
                <icon>0</icon>
                <rows>
                    <row>
                        <icon>0</icon>
                        <loan_number>IBRD00030</loan_number>
                    </row>
                    <row>
                        <icon>0</icon>
                        <loan_number>IBRD00040</loan_number>
                    </row>
                </rows>
            </row>
            <row>
                <icon>0</icon>
                <loan_number>IBRD00050</loan_number>
            </row>
        </rows>
    </row>
    <row>
        <icon>1</icon>
        <loan_number>IBRD00060</loan_number>
        <rows>
            <row>
                <icon>1</icon>
                <loan_number>IBRD00070</loan_number>
                <repaid_amount>$0.00</repaid_amount>

Xml 형식으로 저장된 text 파일을 읽어 들인다. 

Tree - 3
rows

소스보기 JSP 

See Also
TreeDataLoader.load
TreeDataSet
TreeView
트리 개요
Examples
트리 데이터셋
Hello Tree