GNUI Start your next web project with GNUI.
Gn.util

JsonView

/scss/components/jsonview.scss
v.0.1.0

기본 사용

  • Json 데이터를 화면에 표시하기 위한 컴포넌트
  • Object : key-value 형식으로 출력
  • Array(Object) : 테이블 그리드 형식으로 출력
  • Array(string,number) : 배열 항목을 텍스트로 병합(,)하여 출력

생성 옵션

<div class="new-jsonview"></div>

Gn.create('jsonview', {
  target: '.new-jsonview',
  schema: {
    Type: 'array',
    Disp: 'aws sample 정보',
    Description: 'aws sample 정보 설명',
    Items: {
      Type: 'object',
      Properties: {
        index: {
          Type: 'checkbox',
          Disp: ''
        },
        _id: {
          Type: 'string',
          Disp: '인스턴스ID',
          Description: '인스턴스ID입니다.'
        },
        _type: {
          Type: 'string',
          Disp: '수집기타입'
        },
        test1: {
          Type: 'number',
          Disp: 'Test1 Value'
        },
        test2: {
          Type: 'number',
          Disp: 'Test2 Value'
        },
        updated: {
          Type: 'datetime',
          Disp: '마지막 업데이트',
          $ref: '#/$defs/Datas'
        },
        nodes: {
          Type: 'object',
          Disp: '노드정보',
          Properties: {
            obj1: {
              Type: 'string',
              Disp: 'obj1'
            },
            obj2: {
              Type: 'integer',
              Disp: 'obj2'
            }
          }
        }
      },
      Required: ['_type'],
      Hidden: ['test1', 'test2'],
      SortItems: ['_id']
    },
    $defs: {
      Datas: {
        Type: 'array',
        Disp: '추가 데이터 정보',
        Items: {
          Type: 'object',
          Properties: {
            field1: {
              Type: 'string',
              Disp: '필드 1'
            },
            field2: {
              Type: 'number'
            },
            datas: {
              Type: ['array', 'string'],
              Items: {
                Type: 'object',
                Properties: {
                  id: {
                    Type: 'number',
                    Disp: null
                  },
                  text: {
                    Type: 'string',
                    Disp: null
                  }
                }
              }
            }
          }
        }
      }
    }
  },
  data: [
    {
      index: 0,
      _id: 'd3185f78-7221-103a-8002-0272452c0706',
      _type: 'aws',
      test1: 1234,
      test2: 1231.23,
      updated: 1603427314109,
      nodes: {
        obj1: 'value',
        obj2: 123
      },
      Datas: [
        {
          field1: 'test1',
          field2: 123,
          datas: [
            {
              id: 1,
              text: 'data1'
            },
            {
              id: 2,
              text: 'data2'
            }
          ]
        },
        {
          field1: 'test2',
          field2: 321,
          datas: [
            {
              id: 1,
              text: 'data3'
            },
            {
              id: 2,
              text: 'data4'
            }
          ]
        },
        {
          field1: 'test2',
          field2: 321,
          datas: 'just text'
        }
      ]
    },{
      index: 1,
      _id: 'd3185f78-7221-103a-8002-0125213c0706',
      _type: 'aws',
      test1: 1234,
      test2: 1231.23,
      updated: 1603427314109,
      nodes: {
        obj1: 'value',
        obj2: 123
      },
      Datas: [
        {
          field1: 'test1',
          field2: 123,
          datas: [
            {
              id: 1,
              text: 'data1'
            },
            {
              id: 2,
              text: 'data2'
            }
          ]
        },
        {
          field1: 'test2',
          field2: 321,
          datas: [
            {
              id: 1,
              text: 'data3'
            },
            {
              id: 2,
              text: 'data4'
            }
          ]
        },
        {
          field1: 'test2',
          field2: 321,
          datas: 'just text'
        }
      ]
    }
  ]
});


<div class="new-rawview"></div>

Gn.create('jsonview', {
  target: '.new-rawgrid',
  data: '{"_id": "d3185f78-7221-103a-8002-0272452c0706","_type": "aws","test1": 1234,"test2": 1231.23,"nodes" : {"obj1":"value","obj2":123},"datas": [{"field1":"test1","field2":123,"datas":["data1","data2"]},{"field1":"test2","field2":321,"datas":["data3","data4"]}]}'
})

<div class="add-jsonview"></div>

Gn.create('jsonview', {
  target: '.add-jsonview',
  schema: {
    Type: "array",
    Items: {
      Type: 'object',
      Properties: {
        bignum: {
          Type: "bignumber"
        }
      }
    }
  },
  data: [{
    bignum: {
      CPU: 23.34,
      RAM: {
        value: 26,
        data: [0, 23, 33, 0]
      }
    }
  }]
});
name type default description
target string jsonview를 생성할 대상의 선택자(selector)
schema Object json *gnschema. 생략 시, data를 기준으로 출력된다.
data Array | Object
defWidth string 'auto' Object key 값 출력 넓이. 'auto'로 설정 시 컨텐츠에 맞춤
onSort Function(key, sort, schema) schema의 SortItems에 설정된 항목 정렬 시 수행 이벤트
onSelect Function(value, key, obj, e) 그리드 형식으로 출력된 항목을 클릭 시 수행 이벤트
convert Function(convertername, type, value): string 데이터를 컨버팅하는 함수.
스키마에 설정된 Converter가 존재할 시 해당 함수를 실행하여 리턴된 결과를 렌더링한다.
text 또는 html 사용 가능.
value를 {{parent}}로 정의 시 해당 열에 대한 정보를 가져올 수 있다.
textSets noData string No records available. 데이터가 없을 경우 출력 메시지

메소드

name return description
reRender(param:{data, schema?)) void 전달된 데이트로 그리드를 다시 렌더링한다
getChecked() Array checkbox 타입이 존재하는 경우, 체크된 항목의 데이터를 배열로 리턴한다.

*gnschema

Attributes

attribute description
Type 데이터 타입 아래 단일타입, 복합타입 참조
Disp 항목명
Description 항목설명
RefURL 링크 아래 RefURL 사용법 참조
Target 링크(RefURL) 타겟
Items Array의 항목 기술
Properties Object의 항목 기술
Hidden 화면에 출력하지 않을 항목의 배열
SortItems 정렬아이콘 출력 필드(Object Array 타입에서만 동작)의 배열
Required 필수 항목 필드의 배열
Disabled 클릭 이벤트 비활성화 필드의 배열
Style inline 스타일 ex. 'font-size: 12px; display: block; width: 200px'
StyleClass 스타일 클래스명
Converter 데이터를 컨버팅할 컨버터 convertername, type, value를 배열로 넣음
value에 {{mustache}} 구문 사용가능(RefURL 참조) 생략 시 해당 항목의 데이터 바인딩		 jsonview 컴포넌트 생성 시 convert 메서드를 정의해주어야 사용가능
$ref - $defs 참조 데이터 아래 $ref-$defs 항목 참조

단일타입

type schema data output
string 
{
  "Type": "string",
  "RefURL": "http://www.genians.com",
  "Target": "_blank"
}
        
"다람쥐 헌 쳇바퀴"
number 
{
  "Type": "number"
}
        
10001
byte 
{
  "Type": "byte"
}
        
100000000
datetime 
{
  "Type": "datetime"
}
        
1603427314109
html 
{
  "Type": "html"
}
        
'<img
  src="/styleguide/assets/image.png"
  alt="asset"
/>'
checkbox 
{
  "Type": "checkbox"
}
        
{
  value: '100',
  checked: true,
  // hidden: true
  // 화면에 표시하지 않으려면 true
  // {{mustache}} 구문을 사용하여 조건문을 설정할 수 있다.
}
        
100
array 
{
  Type: 'array',
  Items: {
    Type: ['string','number'],
    RefURL: 'https://search.naver.com/search.naver?query={{data}}'
  }
}
        
["빨강","주황","노랑","초록","파랑"]
percent 
{
  "Type": "percent"
}
        
52
bignumber 
{
  "Type": "bignumber"
}
        
{
  온도: 24,
  습도: {
    value: 60,
    data: [0,10,21,5,18]
  }
}
chart 
{
  "Type": "chart"
}
        
{
  type: 'donut',
  series: [30, 200, 100],
  labels: ['data1','data2','data3']
}

복합 타입

type schema data output
object 
{
  "Type": "object",
  "Disp": "",
  "Description": "",
  "Properties": {
    "data-string": {
      "Type": "string",
      "Disp": "물품명",
      "Description": "product name"
    },
    "data-number": {
      "Type": "number",
      "Disp": "재고"
    },
    'data-reorder': {
      Type: 'string',
      Disp: '재주문가능'
    }
  },
  Hidden: ['data-reorder'] // 화면에 나타내지 않을 프로퍼티명 배열
}
        
{
  'data-string': '부뚜막',
  'data-number': 1489,
  'data-reorder': 'false'
}
array 
{
  "Type": "array",
  "Items": {
    "Type": "object",
    "Properties": {
      "data-string": {
        "Type": 'string',
        "Disp": '물품명',
        "Description": "product name"
      },
      "data-number": {
        "Type": 'number',
        "Disp": '재고'
      }
    }
  }
}
        
[{
  'data-string': '부뚜막',
  'data-number': 1489
},{
  'data-string': '솥뚜껑',
  'data-number': 34
}]

RefURL 사용법

링크 파라메터에 {{mustache}} 구문을 사용할 수 있다.

https://www.google.com/search?q={{data}}
name description
data 해당 항목에 대한 데이터를 반환한다.
schema 해당 항목에 대한 스키마를 반환한다.
$ 전체 데이터 루트를 나타낸다.
루트로부터 jsonpath 문법을 사용할 수 있다.
*property key에 특수문자가 포함되는 경우 $['property-key'] 와 같이 사용한다.
parent 해당 항목의 상위 데이터를 반환한다.

jsonpath key 사용

  • object properties의 key 값으로 jsonpath를 사용할 수 있다.

Style, StyleClass 사용

{{mustache}} 구문을 사용하여 조건문을 설정할 수 있다.

{{parent.test1 == "1234" ? "color: red; font-weight: 900" : "color: blue;"}}
name description
data 해당 항목에 대한 데이터를 반환한다.
parent 해당 항목의 상위 데이터를 반환한다.
$ 전체 데이터를 반환한다.

defs - ref 사용

  • schema에 미리 정의된 defs 객체를 ref로 지정하는 경우, 해당 데이터는 tooltip 형태로 출력된다.

schema data 
{
  Type: 'array',
  Items: {
    Type: 'object',
    Properties: {
      '$.COLLECTOR._id': {
        Type: 'string',
        Disp: '인스턴스ID'
      },
      '$.COLLECTOR._type': {
        Type: 'string',
        Disp: '타입',
        $ref: '#/$defs/Datas'
      },
      '$.COLLECTOR.nodes.obj2': {
        Type: 'number',
        Disp: 'No'
      }
    }
  },
  $defs: {
    Datas: {
      Type: 'array',
      Disp: 'Datas',
      Items: {
        Type: 'object',
        Properties: {
          field1: {
            Type: 'string',
            Disp: '필드1'
          },
          field2: {
            Type: 'number',
            Disp: '필드2'
          },
          field3: {
            Type: 'string',
            Disp: '필드3'
          }
        }
      }
    }
  }
}
        
[
  {
    COLLECTOR: {
      _id: 'data-1-id',
      _type: 'collector',
      test1: 0,
      test2: 0,
      nodes: {
        obj1: '',
        obj2: 0
      },
      datas: {
        field1: 'data-1',
        field2: 0,
        datas: [
          {
            field1: 'data-1',
            field2: 0,
            field3: 'data-1'
          },
          {
            field1: 'data-1',
            field2: 0,
            field3: 'data-1'
          }
        ]
      }
    }
  },
  {
    COLLECTOR: {
      _id: 'data-2-id',
      _type: 'collector',
      test1: 1,
      test2: 1,
      nodes: {
        obj1: '',
        obj2: 1
      },
      datas: {
        field1: 'data-2',
        field2: 1,
        datas: [
          {
            field1: 'data-2',
            field2: 1,
            field3: 'data-2'
          },
          {
            field1: 'data-2',
            field2: 1,
            field3: 'data-2'
          }
        ]
      }
    }
  }
]

Converter 사용

  • schema Converter 항목을 추가하여 데이터를 변환출력 할 수 있다.
  • 생성옵션의 convert Function을 정의하여 사용할 수 있다.

schema data Converter 
{
    Type: 'array',
    Items: {
        Type: 'object',
        Properties: {
            name: {
                Type: 'string',
                Disp: '스위치명'
            },
            status: {
                Type: 'number',
                Disp: '동작상태',
                Converter: ['CodeImageConverter', 'OperStatus']
            }
        }
    }
}
        
[
    {
        name: '부뚜막',
        status: 1
    },
    {
        name: '솥뚜껑',
        status: 0
    }
]
        
(name, type, value) => {
    // name : 'CodeImageConverter'
    // type : 'OperStatus'
    // value : {data.status 값}
    if (value === '1') {
        return '미동작';
    } else {
        return '동작';
    }
}