ASP.NET Core FlexGrid ASP.NET MVC TreeView 컨트롤을 사용하여 계층 구조 그룹 추가
페이지 정보
작성자 GrapeCity
작성일 2022-10-12 09:39 조회 413회
댓글 0건
본문
관련링크
Flexgrid의 계층 구조 데이터에 대한 이러한 행의 동작은 여러 열을 사용하는 추가 정보가 포함된 TreeView와 유사합니다. 행에 자식 항목이 있는 경우 행에 대해 토글 아이콘이 표시되고 이 아이콘을 클릭하면 TreeView와 마찬가지로 확장/축소됩니다.
또한 TreeGrid에는 노드의 계층 구조를 나타내는 "Level" 속성이 포함되어 있습니다. 낮은 수준의 노드에는 높은 수준의 노드가 포함되어 있습니다.
이 블로그에서는 FlexGrid에서 계층 데이터를 표시하는 다양한 방법에 대해 살펴봅니다.
그룹화
계층 데이터 바인딩 및 편집
바운딩 해제 모드를 사용하여 계층 데이터 표시
XML 데이터 바인딩
지연 로드
그룹화
FlexGrid는 기본적으로 데이터베이스에 바인딩을 지원합니다. 데이터는 데이터베이스에 저장된 순서대로 표시할 수 있습니다. 그러나 열을 집계하려는 경우 명시적으로 계산해야 합니다.
이 문제를 해결하기 위해 FlexGrid에는 열에 대한 집계를 설정하는 그룹화 기능이 있습니다.
다음은 모델에서 FlexGrid의 데이터 소스를 설정하기 위한 소스입니다.
<c1-flex-grid group-header-format="{value}" auto-generate-columns="false" style="height:300px">
<c1-flex-grid-column binding="ID" header="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="First" header="First"></c1-flex-grid-column>
<c1-flex-grid-column binding="Last" header="Last"></c1-flex-grid-column>
<c1-flex-grid-column binding="Hired" header="Hired"></c1-flex-grid-column>
<c1-flex-grid-column binding="Sales" header="Sales"></c1-flex-grid-column>
<c1-flex-grid-column binding="Downloads" header="Downloads"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active" header="Active"></c1-flex-grid-column>
<c1-items-source source-collection="Model" ></c1-items-source>
</c1-flex-grid>FlexGrid에서 그룹화를 추가하려면 PropertyGroupDescription 인스턴스를 groupDescriptions 속성에 추가해야 합니다.
다음은 그룹화를 적용하고 집계를 추가하기 위한 코드입니다.
<c1-flex-grid group-header-format="{value}" auto-generate-columns=false style="height:300px">
<c1-flex-grid-column binding="ID" header="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="First" header="First"></c1-flex-grid-column>
<c1-flex-grid-column binding="Last" header="Last"></c1-flex-grid-column>
<c1-flex-grid-column binding="Hired" header="Hired" ></c1-flex-grid-column>
<c1-flex-grid-column binding="Sales" header="Sales" aggregate="Sum"></c1-flex-grid-column>
<c1-flex-grid-column binding="Downloads" header="Downloads" aggregate="Sum"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active" header="Active"></c1-flex-grid-column>
<c1-items-source source-collection="Model" group-by="Country"></c1-items-source>
</c1-flex-grid>다음은 FlexGrid에 그룹화를 적용한 이후 FlexGrid의 모양을 보여 줍니다.
이 이미지에서는 회색으로 강조 표시된 그룹 행에서 국가별로 그룹화된 Sales와 Downloads를 관찰할 수 있습니다.
계층 데이터 바인딩 및 편집
경우에 따라 데이터 객체는 플랫 레코드 집합이 아니라 계층 구조적일 수 있습니다. FlexGrid에서 이러한 데이터를 표시하기 위해 child-items-path 속성을 사용할 수 있습니다. 이 속성 값은 자식 항목을 가진 항목의 속성일 수 있습니다.
다음은 계층적 데이터를 보여 주는 코드입니다.
<c1-flex-grid auto-generate-columns=false child-items-path="Children" height="500px"> <c1-flex-grid-column binding="Header" width="*"> </c1-flex-grid-column> <c1-flex-grid-column binding="DateModified"></c1-flex-grid-column> <c1-flex-grid-column binding="Size"></c1-flex-grid-column> <c1-items-source source-collection="Model"></c1-items-source> </c1-flex-grid>
FlexGrid에는 다음과 같이 표시됩니다.
기본적으로 FlexGrid 노드는 편집을 허용하지 않습니다. 사용자가 편집하도록 하려면 loaded-rows 이벤트를 처리하고 해당 행에 대해 isReadOnly 속성을 false로 설정해야 합니다.
다음은 동일한 내용에 해당하는 코드입니다.
<script>
function loadedRows(s,e){
for (let i = 0;i<s.rows.length;i++){
s.rows[i].isReadOnly = false;
}
}
</script>
<c1-flex-grid auto-generate-columns=false child-items-path="Children" height="500px" loaded-rows="loadedRows"></c1-flex-grid>바운딩 해제 모드를 사용하여 계층 데이터 표시
바운딩 해제 모드를 사용하면 클라이언트 측에서 데이터 항목을 만들어 기존 FlexGrid에 추가할 수 있습니다. 이 경우 itemsSource는 null일 수 있고 행을 푸시하고 FlexGrid의 setCellData() 메서드를 사용하여 셀 데이터를 설정해 JS 코드를 사용하여 행을 추가할 수 있습니다.
다음은 JS 코드를 사용하여 계층 데이터에서 TreeGrid를 보여 주는 코드입니다.
// Controller Code
[HttpGet,Route("Home/GetData")]
public string GetResult()
{
var list = Folder.Create(Directory.GetCurrentDirectory()).Children;
return JsonConvert.SerializeObject(list);
}
//View Code
<c1-flex-grid id="ubgrid" auto-generate-columns="false" >
<c1-flex-grid-column header="Header" width="*"></c1-flex-grid-column>
<c1-flex-grid-column header="Modified Date"></c1-flex-grid-column>
<c1-flex-grid-column header="Size" align="right" ></c1-flex-grid-column>
</c1-flex-grid>
<script>
c1.documentReady(function () {
let grid = wijmo.Control.getControl("#ubgrid");
// set FlexGrid data
$.get("/Home/GetData").then(function(d) {
setGridData(grid, JSON.parse(d));
})
});
function setGridData(grid,data) {
for (let r = 0; r < data.length; r++) {
// add header
var header = data[r];
var row = new wijmo.grid.GroupRow();
row.dataItem = header;
row.isReadOnly = false;
row.level = 0;
grid.rows.push(row);
grid.setCellData(row.index, 0, header.Header);
if (header.Children) {
addChild(grid, header, 1);
}
}
}
function addChild(grid, parent, level){
for (var c = 0; c < parent.Children.length; c++) {
// add children
var child = parent.Children[c];
row = new wijmo.grid.GroupRow();
row.dataItem = child;
row.isReadOnly = false;
row.level = level;
grid.rows.push(row);
grid.setCellData(row.index, 0, child.Header);
if (child.DateModified) {
grid.setCellData(row.index, 1, new Date(child.DateModified));
}
grid.setCellData(row.index, 2, child.Size);
if (child.Children) {
addChild(grid, child, level+1);
}
}
}
</script>XML 데이터 바인딩
이 기능은 기존 응용 프로그램에서 XML 형식의 데이터를 이미 가지고 있는 사용자에게 또는 API가 XML 데이터를 반환하는 경우 유용합니다.
XML 파일의 데이터를 표시하려면 XML 데이터를 읽어 IEnumerable 데이터로 변환해야 합니다. 이러한 데이터는 나중에 FlexGrid로 바인딩합니다.
다음은 동일한 내용에 해당하는 코드입니다.
XML 데이터를 목록으로 변환
public class TProduct
{
public int Id { get; set; }
public string Name { get; set; }
public List<TEditions> Products { get; set; }
}
public class TEditions
{
public string Name { get; set; }
public double Price { get; set; }
public double Discount { get; set; }
public string? PromoCode { get; set; }
}
public class ProductInfo
{
public static List<TProduct> GetProducts(string path)
{
var _items = new List<TProduct>();
var _xml = XElement.Load(path);
var _products = _xml.Elements("Product");
foreach (var item in _products)
{
_items.Add(new TProduct()
{
Id = Convert.ToInt32(item.Attribute("id").Value),
Name = item.Attribute("name").Value,
Products = new List<TEditions>()
});
var _editions = item.Elements("Edition");
foreach (var _edition in _editions)
{
_items[_items.Count - 1].Products.Add(new TEditions()
{
Name = _edition.Attribute("name").Value,
Discount = Convert.ToDouble(_edition.Attribute("discount")?.Value),
Price = Convert.ToDouble(_edition.Attribute("price").Value),
PromoCode = _edition.Attribute("promocode")?.Value
});
}
}
return _items;
}
} // Controller
public IActionResult XMLBinding()
{
var _path = Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot\Content\ProductsInfo.xml");
return View(ProductInfo.GetProducts(_path));
}
//View
@model List<TProduct>
<c1-flex-grid auto-generate-columns="false" child-items-path="Products" headers-visibility="Column">
<c1-flex-grid-column binding="Name" header="Name" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Price" header="Price" format="c0" align="right"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" header="Discount" format="p2" align="right"></c1-flex-grid-column>
<c1-flex-grid-column binding="PromoCode" header="Promo Code" ></c1-flex-grid-column>
<c1-items-source source-collection="Model"></c1-items-source>
</c1-flex-grid>
지연 로드
지연 로드는 요구 시 데이터를 로드하기 때문에 용량이 큰 데이터 집합을 사용할 때 데이터를 가져오는 시간을 단축하는 새로운 개념입니다. 또한 모든 노드의 전체 데이터를 로드하는 대신 노드가 확장되면 요구 시 데이터를 로드할 수 있어 계층적 보기에 대한 로드 시간을 단축하는 데 유용합니다.
OnClientGroupCollapsedChanged 이벤트를 통해 노드의 확장/축소를 감지하여 이렇게 할 수 있습니다. 이를 구현하기 위해 모델을 사용하여 FlexGrid를 바인딩합니다. 나중에 확장 아이콘을 클릭하여 노드를 확장해 ajax를 호출하고 가져온 데이터를 대상 항목의 Children 속성으로 푸시할 것입니다.
:
지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
