[]
        
(Showing Draft Content)

XML에 트리 그리드(TreeGrid) 바인딩

XML 문서를 FlexGrid 컨트롤의 계층적 데이터 소스로 사용할 수 있습니다.

DOMParser 객체를 사용하여 XML 문자열을 Document 객체로 구문 분석하고, Document를 루프하여 각각 "products" 배열이 있는 "category" 항목으로 배열을 빌드합니다.

// get the XML string used as a data source
  function getXml() {
  	return '<categories>' +
            '<category id="0" name="Beverages">' +
                '<product id="1" name="Chai" price="18" />' +
                '<product id="2" name="Chang" price="19" />' +
                '<product id="24" name="Guarana Fantastica" price="4.5" />' +
                '<product id="34" name="Sasquatch Ale" price="14" />' +
			'</category>' +
            '<category id="1" name="Condiments">' +
                '<product id="3"	name="Aniseed Syrup" price="10" />' +
                '<product id="4"	name="Chef Anton\'s Cajun Seasoning" price="22" />' +
                '<product id="5"	name="Chef Anton\'s Gumbo Mix" price="21.35" />' +
                '<product id="6"	name="Grandma\'s Boysenberry Spread" price="25" />' +
                '<product id="8"	name="Northwoods Cranberry Sauce" price="40" />' +
                '<product id="15" name="	Genen Shouyu" price="15.5" />' +
            '</category>'
      '</categories>';
    }

  // parse an XML document into an array
  function getProductsByCategory() {
  	var items = [],
    		parser = new DOMParser(),
        xml = getXml(),
        doc = parser.parseFromString(xml, 'application/xml');

		// get categories
    var categories = doc.querySelectorAll('category');
    for (var c = 0; c < categories.length; c++) {
    	var category = categories[c];
      items.push({
      	id: parseInt(category.getAttribute('id')),
        name: category.getAttribute('name'),
        products: []
      });

      // get products in this category
      var products = category.querySelectorAll('product');
      for (var p = 0; p < products.length; p++) {
      	var product = products[p];
        items[items.length - 1].products.push({
        	id: parseInt(product.getAttribute('id')),
          name: product.getAttribute('name'),
          price: parseFloat(product.getAttribute('price'))
        })
      }
    }

    // all done
    return items;
	}  

배열은 itemsSource로 사용되며 childItemsPath 속성은 각 카테고리의 제품을 트리로 표시하는 데 사용됩니다:

import * as wjGrid from '@grapecity/wijmo.grid';

var theGrid = new wjGrid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
    columns: [
        { binding: 'name', header: 'Name', width: '3*' },
        { binding: 'id', header: 'ID', dataType: 'String', width: '*' },
        { binding: 'price', header: 'Unit Price', format: 'n2', dataType: 'Number', width: '*' },
    ],
    headersVisibility: 'Column',
    childItemsPath: 'products',
    treeIndent: 25,
    itemsSource: getProductsByCategory()
});