SMART datagrid v.1 > Examples

Load Tree Data  Example

no-lite

通过使用TreeDataLoader.load，就可以将从服务器导入的多种格式的源数据加载到TreeDataSet。 

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

load方法的第一点是指定数据格式。目前，它支持'csv'、'json'、'xml'等三种格式。 data是源数据，而它根据指定在第一个参数中的格式，可能会是字符串、JSON对象或XML文档对象。 

首先，将会清除现有的所有数据行并创建新的行，而在结束加载后，将会触发onRowCountChanged事件。 

1. CSV数据

从服务器导入被储存为如下格式的CSV文件，并构成树数据组。 因为第一行包含字段名称，所以加载选项的start将会是1。 另外，因为有使用双引号括起来的字段，所以将quoted指定为true，而因为NUMBER字段的值中含有非数字的文本， 所以将currency指定为true。 有关可以在选项中指定的值的详细说明，请参考TreeDataLoader.load主题。 

treeField和useTreeField是两个重要选项，而因为下列文件中，第二个字段中包含树信息，所以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格式的文本文件。 

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格式的文本文件。 

3. XML数据

如同下列代码，为了将以XML文本文件传递的数据加载到树数据组，我们需要首先将类型指定为"xml"并指定rows和childRows选项。 这种方式与JSON相比，两者的属性名称虽然相同，但指示内容却是不一样的。 

Rows是导入至数据行的XML元素的tag名称。 下列例题中为row。 childRows是包含导入子行的元素的元素tag名称。 例题中为rows。这个属性，也会有不被指定的情况，就是没有包含子元素的顶级元素，而是包含通过rows指定的元素时。 

有关属性的详细说明，请参考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格式的文本文件。 

查看源代码 JSP 

See Also

TreeDataLoader.load

TreeDataSet

TreeView

树概述

Examples

树数据组

Hello Tree