Wijmo grid를 사용한 여러 - 아무튼직장인

쉬운 목차

1. 하드 코딩된 데이터가 있는 간단한 래스터

전체 코드

<!DOCTYPE html>
<html>
<head>
  <title>FlexGrid Example</title>
  <link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" />
  <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
  <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.js"></script>
  <script>
    window.onload = function () {
      // FlexGrid 생성
      var grid = new wijmo.grid.FlexGrid('#grid', {
        autoGenerateColumns: false
      });

      // grid data 설정
      var data = (
        { id: 1, name: 'John', age: 30 },
        { id: 2, name: 'Mary', age: 25 },
        { id: 3, name: 'Bob', age: 40 }
      );
      grid.itemsSource = data;

      // grid에 column 추가
      grid.columns.push(new wijmo.grid.Column({ binding: 'id', header: 'id' }));
      grid.columns.push(new wijmo.grid.Column({ binding: 'name', header: '이름' }));
      grid.columns.push(new wijmo.grid.Column({ binding: 'age', header: '나이' }));
    };
  </script>
</head>
<body>
  <div id="grid"></div>
</body>
</html>

코드 설명

'추천 관련글,

<!-- 1. wijmo FlexGrid 컨트롤에 style을 포함하는 css -->
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" />
<!-- 2. wijmo FlexGrid 컨트롤의 javascript 파일을 로드 -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<!-- Wijmo FlexGrid 컨트롤의 특정 기능을 담당하는 자바스크립트 파일을 로드 -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.js"></script>

wijmo FlexGrid 컨트롤은 JavaScript로 작성되므로 이 컨트롤을 사용하려면 HTML 문서에 JavaScript 파일을 포함해야 합니다.

`wijmo.min.js` 파일을 HTML 문서에 붙여넣으면 “FlexGrid 컨트롤” 및 “Wijmo의 모든 UI 구성 요소”.사용할 수 있습니다.

삼.

`wijmo.grid.js` 파일은 `데이터 소스 바인딩, 열 설정 및 FlexGrid 편집` 뒷면 작업 FlexGrid 컨트롤의 모든 기능을 사용할 수 있습니다.

Wijmo FlexGrid 컨트롤은 기본적으로 wijmo.min.js 파일에 포함되어 있으므로 wijmo.grid.js 파일 없이 FlexGrid를 사용할 수 있지만 wijmo.grid.js 파일을 로드할 수 있습니다. FlexGrid 컨트롤의 특정 기능 확장개인화 할 수 있습니다.

두 파일의 기능에는 이 점에서 다른 FlexGrid 컨트롤이 포함됩니다.

– `wijmo.min.js`는 FlexGrid 컨트롤과 함께 작동합니다.

– “wijmo.grid.js”는 FlexGrid 컨트롤의 고급 기능을 확장하거나 개인화하는 데 사용됩니다.

// FlexGrid 생성
var grid = new wijmo.grid.FlexGrid('#grid', {
	autoGenerateColumns: false
});

`wijmo.grid.FlexGrid` 개체를 인스턴스화하고 그리드 컨테이너로 사용할 HTML 요소(#grid)를 전달하여 새 FlexGrid 인스턴스를 만듭니다.

‘wijmo.grid.FlexGrid’는 Wijmo FlexGrid 컨트롤을 만드는 JavaScript 클래스FlexGrid 컨트롤입니다. 대량의 데이터 표시, 필터링, 정렬, 그룹화, 편집, 선택 다음과 같은 기능을 포함하는 고급 그리드 컨트롤입니다.

`new wijmo.grid.FlexGrid(‘#grid’, { autoGenerateColumns: false }); 사용 `#그리드’ 요소에 FlexGrid 컨트롤 만들기autoGenerateColumns 옵션을 false로 설정하여 자동 열 생성을 비활성화합니다.

생성된 FlexGrid 인스턴스는 “Grid” 변수에 할당되며 이 변수(Grid)를 통해 그리드의 속성, 이벤트, 메서드에 접근할 수 있습니다.

// grid data 설정
var data = (
    { id: 1, name: 'John', age: 30 },
    { id: 2, name: 'Mary', age: 25 },
    { id: 3, name: 'Bob', age: 40 }
);
grid.itemsSource = data;

래스터 데이터를 지정하는 배열을 만듭니다.

배열의 각 요소는 그리드의 행을 나타내는 객체이고 각 객체는 그리드의 열을 나타냅니다.

이 예에서 행에는 “ID”, “Name”, “Age”라는 세 줄이 있습니다.

각 헤더에 ID, 이름, 나이와 같은 세 개의 텍스트가 있는 것을 이해할 수 있습니까?

FlexGrid 컨트롤은 데이터 그리드를 표시하는 데 사용되는 UI 구성 요소입니다. 이 예제의 컨트롤은 데이터를 바인딩하여 그리드의 행과 열을 표시합니다.

여기 ‘엘리먼트 소스’ 속성은 그리드에 표시할 데이터 설정하던 일

“데이터”. 가변적이다 그리드에 표시할 데이터 저장JavaScript 배열입니다.

`grid.itemsSource = 데이터`FlexGrid 컨트롤의 “itemsSource” 속성에 “data” 변수를 할당하여 데이터를 설정합니다.

이 방법 FlexGrid 컨트롤은 데이터 배열의 데이터를 사용하여 그리드를 만듭니다.하다.

// grid에 column 추가
grid.columns.push(new wijmo.grid.Column({ binding: 'id', header: 'id' }));
grid.columns.push(new wijmo.grid.Column({ binding: 'name', header: '이름' }));
grid.columns.push(new wijmo.grid.Column({ binding: 'age', header: '나이' }));

`wijmo.grid.column` 객체 생성 `그리드.컬럼` 열을 배열에 추가하여 그리드에 열을 추가합니다.

각 열 개체는 데이터 배열의 속성 이름(바인딩, 헤더)으로 구성됩니다.

1. 바인딩할 컬럼을 지정하는 “binding” 속성

2. 표시할 열 머리글 텍스트를 지정하는 머리글

페이지가 로드되면 FlexGrid 컨트롤이 렌더링되고 스크립트에 지정된 데이터와 열이 그리드에 표시됩니다.

2. 외부 API에서 가져온 JSON 데이터 그리드

<!DOCTYPE html>
<html>
<head>
  <title>FlexGrid Example</title>
  <link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" />
  <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
  <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.js"></script>
  <script>
    window.onload = function () {
      // FlexGrid 인스턴스 생성
      var grid = new wijmo.grid.FlexGrid('#grid', {
        autoGenerateColumns: false
      });

      // API에 GET 요청을 보내서 JSON 데이터를 가져오기
      fetch('https://jsonplaceholder.typicode.com/todos')
        .then(response => response.json())
        .then(data => {
          // 그리드의 itemSource를 JSON 데이터로 설정
          grid.itemsSource = data;

          // 그리드에 column 추가
          grid.columns.push(new wijmo.grid.Column({ binding: 'id', header: 'ID' }));
          grid.columns.push(new wijmo.grid.Column({ binding: 'userId', header: 'User ID' }));
          grid.columns.push(new wijmo.grid.Column({ binding: 'title', header: 'Title' }));
          grid.columns.push(new wijmo.grid.Column({ binding: 'completed', header: 'Completed' }));
        })
        .catch(error => console.error(error));
    };
  </script>
</head>
<body>
  <div id="grid"></div>
</body>
</html>

코드 설명

// API에 GET 요청을 보내서 JSON 데이터를 가져오기
fetch('https://jsonplaceholder.typicode.com/todos')
    // HTTP response를 parsing하고 JSON 데이터를 자바스크립트 객체로 변환
    .then(response => response.json())
    .then(data => {
        // 그리드의 itemSource를 JSON 데이터로 설정
        grid.itemsSource = data;

        // 그리드에 column 추가
        grid.columns.push(new wijmo.grid.Column({ binding: 'id', header: 'ID' }));
        grid.columns.push(new wijmo.grid.Column({ binding: 'userId', header: 'User ID' }));
        grid.columns.push(new wijmo.grid.Column({ binding: 'title', header: 'Title' }));
        grid.columns.push(new wijmo.grid.Column({ binding: 'completed', header: 'Completed' }));
    })
    .catch(error => console.error(error));
};

“술책”. 기능으로 `https://jsonplaceholder.typicode.com/todos` API에서 JSON 데이터를 가져옵니다.

1. JavaScript에서 “가져오기” HTTP 요청을 보내고 서버에서 응답을 받는 기능모두.

2. `fetch`는 약속을 반환합니다. “그 다음에”. HTTP 응답을 구문 분석하고 JSON 데이터를 JavaScript 개체로 변환하는 메서드입니다. 이 변환된 데이터를 grid.itemsSource 속성에 할당하여 FlexGrid 컨트롤에 표시합니다.하다.

이 데이터는 Todo 항목의 목록을 나타내며 각 항목에는 id, userId, title, completed 등의 속성이 있습니다.

데이터를 가져온 후 `grid.itemsSource` 속성으로 FlexGrid 컨트롤의 데이터 설정하다.

`그리드.컬럼` 데이터 소스에 바인딩된 열은 배열로 이동되고 각 열의 헤더 텍스트는 “머리글”. 속성을 통해 설정됩니다.