테이블 시트를 여러 보기에 바인딩하도록 SpreadJS DataManager를 사용하는 방법

고급기능 테이블 시트를 여러 보기에 바인딩하도록 SpreadJS DataManager를 사용하는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2022-07-29 15:39 조회 655회 댓글 0건

본문

관련링크

SpreadJS Data Manager는 데이터 관계 및 보기와 그 어느 때보다 빠르고 쉽게 테이블 시트의 바인딩된 데이터와 연결하고 상호 작용하는 성능을 위해 빌드된 강력한 데이터 엔진 API입니다. Data Manager는 전체 데이터 표를 로드하고 데이터 소스에서 특정 필드를 사용하여 여러 보기를 쉽게 만들어 단순히 표준 데이터 바인딩을 사용하는 것보다 더욱 유연하고 훨씬 빠른 성능을 제공합니다.

이 블로그에서는 기본 Data Manager를 만들고 일부 데이터를 추가한 다음 테이블 시트에 여러 보기를 바인딩하고 SpreadJS 워크북에 표시하는 방법을 보여 드리겠습니다. 이 블로그의 샘플을 다운로드하여 아래 내용을 따라해 보실 수 있습니다.

Data Manager

시작하기 전에 NPM을 사용하여 이 응용 프로그램에 필요한 필수 SpreadJS 파일을 설치해야 합니다.

npm install @grapecity/spread-sheets @grapecity/spread-sheets-tablesheet

Data Manager 만들기

첫 번째 단계는 DataManager를 만드는 것입니다. SpreadJS를 사용하면 새 Spread의 인스턴스를 만들고 Data Manager를 가져온 다음 표를 추가하는 것만큼 간단합니다.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
var dataManager = spread.dataManager();
var orderTable = dataManager.addTable("orderTable", {
    remote: {
        read: {
            url: "./Order.json"
        }
    }
});
var customerTable = dataManager.addTable("customerTable", {
    remote: {
        read: {
            url: "./Customer.json"
        }
    }
});
var employeeTable = dataManager.addTable("employeeable", {
    remote: {
        read: {
            url: "./Employee.json"
        }
    }
});

이 블로그에서는 데이터를 포함하는 단순 JSON 파일만 사용하지만 데이터 소스에 바인딩하거나 특정 URL에서 읽을 수도 있습니다.

스타일 만들기를 시작하기 전에 표 간의 관계를 추가하려고 합니다. 이를 위해 다른 표에서 특정 필드를 선택하고 이들 간의 연결을 만들 수 있습니다.

dataManager.addRelationship(orderTable, "CustomerId", "customer", customerTable, "Id", "orders");
dataManager.addRelationship(orderTable, "EmployeeId", "employee", employeeTable, "Id", "orders");

보기 만들기

Data Manager의 보기를 만들기 전에 일부 필드에 대한 일부 스타일 정의, 특히 고객의 다른 배송 주소 필드와 회사 및 연락처 이름을 결합하는 것으로 시작할 수 있습니다.

// Create special styles for relationships
var addressStyle = {
   formatter: 'Ship To: {{=CONCAT(Property(@, "ShipAddress"), ", ", PROPERTY(@, "ShipCity"))}}'
};
var customerStyle = {
   formatter: '{{=CONCAT(PROPERTY(@, "CompanyName"), ", ", PROPERTY(@, "ContactName"))}}'//,
};

var dateStyle = { formatter: 'MM/dd/yyyy' };

여러 보기는 개별 테이블 시트에 정의하고 바인딩할 수 있으며 이 블로그에서는 세 개의 보기를 만들겠습니다.

고객별 주문
직원별 주문
일반 주문

고객별 주문을 먼저 시작하겠습니다. 시작하려면 테이블 시트를 SpreadJS 인스턴스에 추가하고 새 행과 작업 열을 숨깁니다.

var customerOrderSheet = spread.addSheetTab(0, "Orders by Customer", GC.Spread.Sheets.SheetType.tableSheet);
customerOrderSheet.options.allowAddNew = false; //Hide new row option
customerOrderSheet.actionColumn.options({ visible: false }); //Hide action column

이제 관련된 데이터 필드에 대해 만든 스타일을 활용하여 이전에 만들었던 표에 보기를 추가할 수 있습니다.

var customerOrderView = orderTable.addView("customerOrderView", [
  { value: "Id", width: 100 },
  { value: "OrderDate", width: 120, style: dateStyle, caption: "Order Date"},
  { value: "ShippedDate", width: 120, caption: "Shipped Date" },
   /**
    * customer.companyName - this is a related field from the customer table
    * update the customerId in orderTable by select from customer table.
    */
  { value: "customer", width: 350, caption: "Customer", style: customerStyle },
   /**
    * [=@] this column will contain the full row as a value, the formatter formula will extract the shipping address from the full row.
    * Format functions can be used to customize column display value
    * use star-size "2*" to set column width relative to the viewport width
    */
  { value: "=[@]", caption: "Address", style: addressStyle, width:320}
]);

마지막으로 테이블 시트에서 해당 데이터 보기를 설정할 수 있습니다.

customerOrderView.fetch().then(function() {
   customerOrderSheet.setDataView(customerOrderView);
});

유사한 코드는 직원 보기 별로 주문을 만드는 데 사용할 수 있으며 기본 주문에 대한 단순 보기를 사용할 수 있습니다.

//Initialize a table sheet
var orderSheet = spread.addSheetTab(2, "Orders", GC.Spread.Sheets.SheetType.tableSheet);
orderSheet.options.allowAddNew = false; //Hide new row option
orderSheet.actionColumn.options({ visible: false }); //Hide action column
var defaultOrderView = orderTable.addView("defaultOrderView", [
  { value: "Id", width: 80 },
  { value: "CustomerId", width: 100 },
  { value: "ShipName", width: 100 },
  { value: "EmployeeId", width: 120 },
  { value: "OrderDate", width: 100, style: dateStyle },
  { value: "RequiredDate", width: 120, style: dateStyle },
  { value: "ShippedDate", width: 120, style: dateStyle },
  { value: "ShipVia", width: 80 },
  { value: "Freight", width: 80 },
  { value: "ShipAddress", width: 120 },
  { value: "ShipCity", width: 100 },
  { value: "ShipRegion", width: 100 },
  { value: "ShipPostalCode", width: 140 },
  { value: "ShipCountry", width: 120 }
]);
defaultOrderView.fetch().then(function() {
   orderSheet.setDataView(defaultOrderView);
});

이것이 Data Manager에서 여러 보기를 만드는 데 필요한 전부입니다. 이 기능을 사용해보려면 SpreadJS의 체험판을 지금 다운로드 하시기 바랍니다. 웹사이트에서 실시간으로 운영되는 데모를 살펴보십시오.

지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!