행 세부 정보 사용자 정의
일반 그리드에 쉽게 들어가는 것보다 많은 정보를 포함하는 데이터 개체에 행이 바인딩된 경우도 있습니다.
이러한 시나리오에서는 wijmo.grid.detail 모듈에 포함된 FlexGridDetailProvider 클래스를 사용하는 것이 좋습니다. FlexGridDetailProvider는 사용자가 나머지 데이터를 보기 위해 확장할 수 있는 세부 정보 섹션을 각 행에 만듭니다.
사용자가 상호 작용할 수 있도록 행의 세부 정보 섹션 내에 사용자 정의 HTML 요소를 포함할 수 있습니다. 아래 샘플에서는 누르면 세부 정보가 축소되는 버튼을 세부 정보 섹션에 포함하는 방법을 보여 줍니다.
app.js
index.html
styles.css
import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
//
import * as wjOdata from '@mescius/wijmo.odata';
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridDetail from '@mescius/wijmo.grid.detail';
//
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
//
// get OData categories and products
const url = 'https://services.odata.org/Northwind/Northwind.svc';
const categories = new wjOdata.ODataCollectionView(url, 'Categories', {
fields: ['CategoryID', 'CategoryName', 'Description']
});
const products = new wjOdata.ODataCollectionView(url, 'Products');
//
// shared column definitions
const categoryColumns = [
{ binding: 'CategoryName', header: 'Category Name', width: '*' },
{ binding: 'Description', header: 'Description', width: '2*' }
];
//
// get products for a given category
const _catToProductMap = new Map();
function getProducts(categoryID) {
let categoryProducts = _catToProductMap.get(categoryID);
if (!categoryProducts) {
categoryProducts = products.items.filter(product => (product.CategoryID === categoryID));
_catToProductMap.set(categoryID, categoryProducts);
}
return categoryProducts;
}
//
//
// grid with HTML detail
const customDetail = new wjGrid.FlexGrid('#customDetail', {
autoGenerateColumns: false,
itemsSource: categories,
isReadOnly: true,
headersVisibility: 'Column',
selectionMode: 'Row',
columns: categoryColumns,
itemFormatter: (panel, rowIdx, columnIdx, cell) => {
if ((panel.cellType == wjGrid.CellType.Cell) && (columnIdx == 0)) {
const cat = panel.rows[rowIdx].dataItem;
if (cat) {
cell.innerHTML = `${cat.CategoryName} (ID: ${cat.CategoryID})`;
const control = document.createElement('span');
control.className = 'glyphicon';
if (dpCustom.isDetailAvailable(rowIdx)) {
if (dpCustom.isDetailVisible(rowIdx)) {
control.className = 'glyphicon glyphicon-chevron-up';
control.addEventListener('click', () => dpCustom.hideDetail(rowIdx));
}
else {
control.className = 'glyphicon glyphicon-chevron-down';
control.addEventListener('click', () => dpCustom.showDetail(rowIdx, true));
}
}
cell.insertBefore(control, cell.firstChild);
}
}
},
});
//
//custom show/hide detail provider
const dpCustom = new wjGridDetail.FlexGridDetailProvider(customDetail, {
detailVisibilityMode: 'Code',
rowHasDetail: row => !(row.dataItem.CategoryID % 2),
createDetailCell: function (row) {
// build detail content for the current category
const cat = row.dataItem;
const prods = getProducts(cat.CategoryID);
let html = `ID: <b>${cat.CategoryID}</b><br/>`;
html += `Name: <b>${cat.CategoryName}</b><br/>`;
html += `Description: <b>${cat.Description}</b><br/>`;
html += `<button class="btn btn-default btn-xs">Hide Detail</button>`;
//
// create and return detail cell
const cell = document.createElement('div');
cell.innerHTML = html;
//
// bind button click
cell.querySelector('button').addEventListener('click', e => {
dpCustom.hideDetail(row);
});
return cell;
},
});
}