FlexGrid과 DetailView

계층적 데이터를 처리하는 가장 간단한 방법은 마스터-세부 모델입니다. 컨트롤을 사용하여 기본 항목을 선택하고, 하나 이상의 추가 컨트롤을 사용하여 기본 항목의 세부 정보를 표시합니다.

이 예시에서는 FlexGrid가 마스터 컨트롤로 사용됩니다. 그리드에서 항목을 선택하고 아래 컨트롤의 세부 정보를 참조하시길 바랍니다:

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
  var products = 'Phones,Cars,Stereos,Watches,Computers'.split(',');
  var data = [];
  for (var i = 0; i < 50; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      product: products[i % products.length],
      date: wijmo.DateTime.addDays(new Date(), i),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000,
    });
  }

  // using a grid as the master
  var theGridMaster = new wijmo.grid.FlexGrid('#theGridMaster', {
    itemsSource: data,
    selectionMode: 'Row',
    isReadOnly: true,
    selectionChanged: function(s, e) {
      updateDetailControls();
    }
  });

  // update detail controls when selection changes
  function updateDetailControls() {
    var item = theGridMaster.collectionView.currentItem;
    var bndCtls = document.querySelectorAll('.bnd-ctl');
    for (var i = 0; i < bndCtls.length; i++) {
      var host = bndCtls[i];
      var prop = host.id.substr(3).toLowerCase();
      var ctl = wijmo.Control.getControl(host);
      if (wijmo.isString(item[prop])) {
        ctl.text = item[prop];
      } else {
        ctl.value = item[prop];
      }
    }
  }

  // set a property on the current item
  function setProperty(prop, val) {
    var v = theGridMaster.collectionView;
    v.editItem(v.currentItem);
    v.currentItem[prop] = val;
    v.commitEdit();
  }

  // define detail controls
  var theCountry = new wijmo.input.ComboBox('#theCountry', {
    itemsSource: countries,
    textChanged: function(s, e) {
      setProperty('country', s.text);
    }
  });
  var theProduct = new wijmo.input.ComboBox('#theProduct', {
    itemsSource: products,
    textChanged: function(s, e) {
      setProperty('product', s.text);
    }
  });
  var theDate = new wijmo.input.InputDate('#theDate', {
    valueChanged: function(s, e) {
      setProperty('date', s.value);
    }
  });
  var theSales = new wijmo.input.InputNumber('#theSales', {
    format: 'n2',
    step: 10,
    valueChanged: function(s, e) {
      setProperty('sales', s.value);
    }
  });
  var theExpenses = new wijmo.input.InputNumber('#theExpenses', {
    format: 'n2',
    step: 10,
    valueChanged: function(s, e) {
      setProperty('expenses', s.value);
    }
  });