Kendo UI 그리드 다중 레벨 계층 구조 (n 레벨의 계층 구조)
https://stackoverflow.com//questions/24004905
-
20-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
Kendo UI 격자를 사용하고 있으며 현재 부모 아동 레코드를 적절하게 표시합니다.그러나 나는 실제로 N 레벨 대 엄격한 부모 - 자식을 디스플레이 할 필요가 있다고 밝혀졌습니다.모든 기록이 자식을 갖는 것은 아니지만 일부는 여러 단계를 갖습니다.
현재 그리드 코드 :
var jgrid = $("#boxesgrid").kendoGrid({
columns: [
{
field: "JobId",
hidden: true
},
{
field: "PercentComplete",
hidden: true
},
{
field: "JobStatusId",
hidden: true
},
{
field: "AppName",
title: "App",
template: "<span>${AppName}</span><img class='health-img-r' id=app-${JobId} title='health' src='' alt='health_png' />",
width: "5%",
editable: false,
sortable: false
},
{
field: "JobName",
title: "Box Name",
width: "17%",
filterable: false
},
{
field: "StartTime",
title: "Start Time",
width: "14%",
filterable: false
},
{
field: "EndTime",
title: "End Time",
width: "14%",
filterable: false
},
{
field: "JobStatusId",
title: "Status",
template: "<img class='health-img-l' id=app-${JobId} title='health' src='' alt='health_png' /><span>${JobStatus}</span>",
editable: false,
filterable: false
}
],
sortable: {
mode: "single",
allowUnsort: true
},
pageable: {
pageSizes: [50],
numeric: true,
refresh: true,
pageSize: 50
},
autoBind: false,
scrollable: false,
resizable: true,
detailInit: detailInit,
dataSource: boxesDataSource,
dataBound: function () {
var grid = this;
grid.tbody.find(">tr").each(function () {
var row = $(this).closest("tr");
var model = grid.dataItem(row);
var img = $(this).find("img");
if (model.JobStatusId == 4 && model.PercentComplete < 100) {
img.attr("src", function() {
return imgSrc + imgGreen;
});
} else if (model.JobStatusId == 4) {
img.attr("src", function() {
return imgSrc + imgAmber;
});
} else if (model.JobStatusId == 7) {
img.attr("src", function() {
return imgSrc + imgIce;
});
} else if (model.JobStatusId == 8) {
img.attr("src", function() {
return imgSrc + imgHold;
});
} else if (model.JobStatusId == 5) {
img.attr("src", function() {
return imgSrc + imgBlue;
});
} else {
img.attr("src", function() {
return imgSrc + imgRed;
});
}
});
}
}).data("kendoGrid");
현재 자식 그리드 :
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: {
url: "/api/BoxJobs"
},
parameterMap: function (data) {
data.parentid = e.data.JobId;
data.appid = e.data.AppId;
return kendo.stringify(data);
}
},
schema: {
model: { id: "JobId" }
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
scrollable: false,
sortable: true,
columns: [
{
field: "JobId",
hidden: true
},
{
field: "PercentComplete",
hidden: true
},
{
field: "JobStatusId",
hidden: true
},
{
field: "JobName",
title: "Job Name",
template: "<span>${JobName}</span><img class='health-img-l' id=app-${JobId} title='health' src='' alt='health_png' />",
width: "23%",
filterable: false,
sortable: false
},
{
field: "StartTime",
title: "Start Time",
width: "10%",
editable: false,
filterable: false,
sortable: false
},
{
field: "EndTime",
title: "End Time",
width: "10%",
editable: false,
filterable: false,
sortable: false
},
{
field: "ElapsedTime",
title: "Elapsed</br>Time",
width: "4%",
editable: false,
filterable: false,
sortable: false
},
{
field: "MeanRunTime",
title: "Mean Run</br>Time",
width: "3.5%",
editable: false,
filterable: false,
sortable: false
},
{
field: "PredecessorJobName",
title: "Previous Job",
width: "17%",
filterable: false,
sortable: false
},
{
field: "JobStatusId",
title: "Status",
template: "<img class='health-img-l' id=app-${JobId} title='health' src='' alt='health_png' /><span>${JobStatus}</span>",
editable: false,
filterable: false,
sortable: false
}
],
dataBound: function () {
var grid = this;
grid.tbody.find(">tr").each(function () {
var row = $(this).closest("tr");
var model = grid.dataItem(row);
var img = $(this).find("img");
if (model.JobStatusId == 4 && model.PercentComplete < 100) {
img.attr("src", function() {
return imgSrc + imgGreen;
});
} else if (model.JobStatusId == 4) {
img.attr("src", function() {
return imgSrc + imgAmber;
});
} else if (model.JobStatusId == 7) {
img.attr("src", function() {
return imgSrc + imgIce;
});
} else if (model.JobStatusId == 8) {
img.attr("src", function() {
return imgSrc + imgHold;
});
} else if (model.JobStatusId == 5) {
img.attr("src", function() {
return imgSrc + imgBlue;
});
} else {
img.attr("src", function() {
return imgSrc + imgRed;
});
}
});
}
});
}
샘플 최상위 데이터 :
{"Total":638,
"Data":[
{"JobId":1,"AppId":1,"AppName":"APP1","LobId":2,"LobName":"LOB2","JobName":"NRS_COL_BOX","JobType":"box","TimeZone":"Chicago (Central Standard Time)","ParentJobName":null,"ParentJobId":null,"PredecessorJobName":null,"PredecessorJobId":null,"StartTime":"6/2/2014 5:00:02 PM","EndTime":"","ElapsedTime":"00:58:31","JobStatusId":4,"JobStatus":"Running","MeanRunTime":"06:57:04","PercentComplete":14.00,"TotalCount":638.0,"Children":3}
]
}
샘플 2 차 수준 데이터 :
[
{"JobId":63,"AppId":1,"AppName":"APP1","LobId":2,"LobName":"LOB2","JobName":"NRS_COL2_BOX","JobType":"box","TimeZone":"Chicago (Central Standard Time)","ParentJobName":"NRS_COL_BOX","ParentJobId":1,"PredecessorJobName":null,"PredecessorJobId":null,"StartTime":"6/2/2014 5:00:06 PM","EndTime":"","ElapsedTime":"00:58:27","JobStatusId":4,"JobStatus":"Running","MeanRunTime":"06:57:00","PercentComplete":14.00,"TotalCount":0.0,"Children":3},
{"JobId":64,"AppId":1,"AppName":"APP1","LobId":2,"LobName":"LOB2","JobName":"NRS_COL1_BOX","JobType":"box","TimeZone":"Chicago (Central Standard Time)","ParentJobName":"NRS_COL_BOX","ParentJobId":1,"PredecessorJobName":null,"PredecessorJobId":null,"StartTime":"6/2/2014 5:00:06 PM","EndTime":"","ElapsedTime":"00:58:27","JobStatusId":4,"JobStatus":"Running","MeanRunTime":"01:42:17","PercentComplete":57.00,"TotalCount":0.0,"Children":2},
{"JobId":65,"AppId":1,"AppName":"APP1","LobId":2,"LobName":"LOB2","JobName":"NRS_COL3_BOX","JobType":"box","TimeZone":"Chicago (Central Standard Time)","ParentJobName":"NRS_COL_BOX","ParentJobId":1,"PredecessorJobName":null,"PredecessorJobId":null,"StartTime":"6/2/2014 5:00:06 PM","EndTime":"6/2/2014 5:07:42 PM","ElapsedTime":"00:07:36","JobStatusId":5,"JobStatus":"Success","MeanRunTime":"00:03:17","PercentComplete":100.0,"TotalCount":0.0,"Children":5}
]
샘플 3 레벨 데이터 :
[
{"JobId":265,"AppId":1,"AppName":"APP1","LobId":2,"LobName":"LOB2","JobName":"NRS_COL2_S_CLEAN1","TimeZone":"Chicago (Central Standard Time)","ParentJobName":"NRS_COL2_BOX","ParentJobId":63,"PredecessorJobName":"NRS_COL2_S_TOUCH1","PredecessorJobId":266,"StartTime":"","EndTime":"","ElapsedTime":"00:58:31","JobStatusId":7,"JobStatus":"On Ice","PercentComplete":null,"Children":0},
{"JobId":266,"AppId":1,"AppName":"APP1","LobId":2,"LobName":"LOB2","JobName":"NRS_COL2_S_TOUCH1","TimeZone":"Chicago (Central Standard Time)","ParentJobName":"NRS_COL2_BOX","ParentJobId":63,"PredecessorJobName":null,"PredecessorJobId":null,"StartTime":"","EndTime":"","ElapsedTime":"00:58:31","JobStatusId":7,"JobStatus":"On Ice","PercentComplete":null,"Children":0},
{"JobId":267,"AppId":1,"AppName":"APP1","LobId":2,"LobName":"LOB2","JobName":"NRS_COL2_A_ZFINSNAMA","TimeZone":"Chicago (Central Standard Time)","ParentJobName":"NRS_COL2_BOX","ParentJobId":63,"PredecessorJobName":"NRS_COL2_S_CLEAN1","PredecessorJobId":265,"StartTime":"6/2/2014 5:02:02 PM","EndTime":"","ElapsedTime":"00:58:31","JobStatusId":4,"JobStatus":"Running","PercentComplete":null,"Children":0}
]
전통적인 부모 - 자식 계층 구조에 아무런 문제가 없지만, 세부 템플릿이 자녀를 위해 어떻게 행동하는지조차하는지 고심하고 있습니다.
아이들 / 손자 디스플레이에 적합한 템플릿을 원한다면 추가 자녀가없는 경우 드롭 다운 표시기가 없습니다.나는 데이터라운드에서 데이터를 평가할 수 있다고 가정하지만, 어떻게하는 방법을 보지 못했습니다.
해결책
그것은 잠시 시간이 걸렸지 만, 마침내 Telerik에서 엿보기에서 몇 가지 지침으로 대답을 해결했습니다. 나는 그 솔루션 주위의 머리를 얻는 가장 어려운 시간을 보내고 있었다.
블라디미르 (Telerik)는 자식 데이터가 고려해야할지 여부를 결정하기 위해 성공한 기능을 사용하여 DetailInit 함수에서 사용자 정의 Ajax 호출을 사용한다고 제안했습니다. 내가 무엇이든 상관없이 세부 그리드가 필요하기 때문에 자식 검사를 세부 격자를 만드는 다른 함수로 옮겼습니다. 하위 데이터를 찾으면 DetailInit 매개 변수를 새 격자에 추가합니다. 그렇지 않은 경우, 나는 단순히 새로운 자세한 격자를 렌더링합니다.
ajax initdetail 함수 :
function detailInit(e) {
var eventData = e;
$.ajax({
url: apiUrl + "ProcessJobs",
type: "POST",
data: {BoxId: e.data.JobId, AppId: e.data.AppId},
dataType: "json",
success: function(data, status, xhr) {
initializeDetailGrid(eventData, data);
}
}
아이들을 확인하는 새로운 세부 정보 그리드를 빌드하는 기능 :
function initializeDetailGrid(e, result) {
var moreChildren = result[0].HasChildren;
var gridBaseOptions = {
dataSource: result,
scrollable: false,
sortable: true,
columns: [
{
field: "ParentJobId",
title: "Parent Job"
},
{
field: "JobId",
title: "Job Id"
},
{
field: "JobName",
title: "Job Name",
},
{
field: "JobStatus",
title: "Status"
},
{
field: "JobStatusId",
title: "Status Code"
},
{
field: "HasChildren",
title: "Has Children"
},
{
field: "ChildrenCount",
title: "Child Jobs"
}
]
};
var gridOptions = {};
if (moreChildren) {
gridOptions = $.extend({}, gridBaseOptions, { detailInit: detailInit });
} else {
gridOptions = gridBaseOptions;
};
$("<div/>").appendTo(e.detailCell).kendoGrid(gridOptions);
};
완전성을 위해 샘플 프로젝트의 전체 페이지 및 예제 데이터가 있습니다. 그것은 .NET MVC4 기반 웹 사이트이며, 클라이언트의 데이터 및 kendo UI 용 웹 API 서비스를 사용합니다.
여기에 페이지 코드가 있습니다.
@{
ViewBag.Title = "n-level Grid";
}
<script type="text/javascript">
$(document).ready(function () {
var isParent, appId, lobId, boxId;
var apiUrl = '@ViewBag.ApiUrl';
var lobDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "Lob"
}
},
schema: {
model: {
id: "LobId",
hasChildren: "HasChildren"
}
}
});
var appsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "App"
},
parameterMap: function (data, action) {
if (action === "read") {
data.lobid = lobId;
data.parent = isParent;
return data;
} else {
return data;
}
}
}
});
var filterDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "Theme"
}
},
schema: {
model: { id: "FilterId" }
}
});
var boxesDataSource = new kendo.data.DataSource({
transport: {
read: {
url: apiUrl + "Process"
},
parameterMap: function (data) {
data.appid = appId;
data.parent = isParent;
data.lobid = lobId;
return kendo.stringify(data);
}
},
schema: {
data: "Data",
total: "Total",
model: { id: "JobId" }
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
var lobnav = $("#lobnav").kendoTreeView({
select: function (e) {
var tree = this;
var src = tree.dataItem(e.node);
lobId = src.LobId;
isParent = src.HasChildren;
},
change: function (e) {
appsDataSource.read();
},
dataSource: {
transport: {
read: {
url: apiUrl + "Lob"
}
},
schema: {
model: {
id: "LobId",
hasChildren: "HasChildren"
}
}
},
loadOnDemand: false,
dataTextField: "LobName"
});
var appnav = $("#lobapp").kendoListView({
selectable: "single",
autoBind: false,
change: function () {
var idx = this.select().index();
var itm = this.dataSource.view()[idx];
appId = itm.AppId;
boxesDataSource.query({
page: 1,
pageSize: 10
});
},
template: "<div class='pointercursor'>${AppName}</div>",
dataSource: appsDataSource
});
var jobsfilter = $("#jobfilter").kendoListView({
selectable: "single",
loadOnDemand: false,
template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
dataSource: filterDataSource,
dataBound: function () {
var dsource = $("#jobfilter").data("kendoListView").dataSource;
if (dsource.at(0).FilterName !== "All") {
dsource.insert(0, { FilterId: 0, FilterName: "All" });
}
},
change: function () {
var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
var appDs = appsDataSource.view(), apps = $("#lobapp").data("kendoListView"),
selected = $.map(apps.select(), function (item) {
return appDs[$(item).index()].AppName;
});
if (selected.length > 0) {
if (dataItem.FilterId !== 0) {
var $filter = new Array();
$filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
jgrid.dataSource.filter($filter);
} else {
jgrid.dataSource.filter({});
}
}
}
});
var jgrid = $("#boxesgrid").kendoGrid({
columns: [
{
field: "AppName",
title: "App"
},
{
field: "JobId",
title: "Job Id"
},
{
field: "JobName",
title: "Job Name",
},
{
field: "JobStatus",
title: "Status"
},
{
field: "JobStatusId",
title: "Status Code"
},
{
field: "HasChildren",
title: "Has Children"
},
{
field: "ChildrenCount",
title: "Child Jobs"
}
],
sortable: {
mode: "single",
allowUnsort: true
},
pageable: {
pageSizes: [10],
numeric: true,
refresh: true,
pageSize: 10
},
autoBind: false,
scrollable: false,
resizable: true,
detailInit: detailInit,
dataSource: boxesDataSource
}).data("kendoGrid");
function detailInit(e) {
var eventData = e;
$.ajax({
url: apiUrl + "ProcessJobs",
type: "POST",
data: {BoxId: e.data.JobId, AppId: e.data.AppId},
dataType: "json",
success: function(data, status, xhr) {
initializeDetailGrid(eventData, data);
}
});
};
function initializeDetailGrid(e, result) {
var moreChildren = result[0].HasChildren;
var gridBaseOptions = {
dataSource: result,
scrollable: false,
sortable: true,
columns: [
{
field: "ParentJobId",
title: "Parent Job"
},
{
field: "JobId",
title: "Job Id"
},
{
field: "JobName",
title: "Job Name",
},
{
field: "JobStatus",
title: "Status"
},
{
field: "JobStatusId",
title: "Status Code"
},
{
field: "HasChildren",
title: "Has Children"
},
{
field: "ChildrenCount",
title: "Child Jobs"
}
]
};
var gridOptions = {};
if (moreChildren) {
gridOptions = $.extend({}, gridBaseOptions, { detailInit: detailInit });
} else {
gridOptions = gridBaseOptions;
};
$("<div/>").appendTo(e.detailCell).kendoGrid(gridOptions);
};
});
</script>
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-heading">Line of Business</div>
<div class="panel-body" id="lobnav"></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Application</div>
<div class="panel-body" id="lobapp"></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Filter</div>
<div class="panel-body" id="jobfilter">
</div>
</div>
</div>
<div class="col-md-10">
<div id="boxesgrid"></div>
</div>
데이터는 실제로이 샘플 앱에 대해 하드 코딩되었지만 여전히 웹 API를 통해 리턴합니다. 다음은 최고 수준의 데이터의 샘플입니다.
new Process {JobId = 108, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_108", ParentJobName = null, ParentJobId = null, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 3, HasChildren = true},
new Process {JobId = 109, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_109", ParentJobName = null, ParentJobId = null, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 4, HasChildren = true},
new Process {JobId = 110, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_110", ParentJobName = null, ParentJobId = null, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 2, HasChildren = true},
new Process {JobId = 111, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_111", ParentJobName = null, ParentJobId = null, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 5, HasChildren = true},
여기서는 두 번째 레벨 데이터 (하위 데이터)가 있습니다.
new Process {JobId = 1037, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_1037", ParentJobName = "job_109", ParentJobId = 109, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 1038, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_1038", ParentJobName = "job_109", ParentJobId = 109, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 1039, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_1039", ParentJobName = "job_110", ParentJobId = 110, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 2, HasChildren = true},
new Process {JobId = 1040, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_1040", ParentJobName = "job_110", ParentJobId = 110, JobStatusId = 4, JobStatus = "Running", ChildrenCount = 2, HasChildren = true},
3 번째 레벨 데이터 중 일부 (손자) :
new Process {JobId = 5000, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5000", ParentJobName = "job_1039", ParentJobId = 1039, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 5001, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5001", ParentJobName = "job_1039", ParentJobId = 1039, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 5002, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5002", ParentJobName = "job_1040", ParentJobId = 1040, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 5003, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5003", ParentJobName = "job_1040", ParentJobId = 1040, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 0, HasChildren = false},
new Process {JobId = 5004, AppId = 1, AppName = "App1", LobId = 2, LobName = "Lob2", JobName = "job_5004", ParentJobName = "job_1041", ParentJobId = 1041, JobStatusId = 5, JobStatus = "Success", ChildrenCount = 1, HasChildren = true},
등 ...
테스트에서 4 단계에 대해 올바르게 작동합니다. 여러 중첩 된 격자가 해결할 여러 중첩 된 그리드에 서식 지정 문제가 있습니다.
다른 팁
이 질문이 여전히 열리지 만 간단한 해결책은 다음과 같이 "DETAILINIT"기능에서 재귀를 사용하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/hierarchy">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
var myData = [{ item: 0, title:"Meat" , items:[
{ item: 0.1, title:"Beef"},
{ item: 0.2, title:"Chicken"},
]},
{ item: 1, title:"Vegetables", items:[
{ item: 1.0, title:"Carrot"},
{ item: 1.1, title:"Pies", items:[
{ item: 1.11, title:"Pie1"},
{ item: 1.12, title:"Pie2"},
{ item: 1.13, title:"Pie3"}
]},
]}
];
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
data: myData
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit1,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").last());
},
columns: [
{
field: "item",
title: "ID",
width: "110px"
},
{
field: "title",
title: "Food",
width: "110px"
}
]
});
});
function detailInit1(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.items //data is the current position item, items is its child items
},
scrollable: false,
sortable: true,
pageable: true,
detailInit: detailInit1,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").last());
},
columns: [
{
field: "item",
title: "ID",
width: "110px"
},
{
field: "title",
title: "Food",
width: "110px"
}
]
});
}
</script>
</div>
</body>
</html>
제휴하지 않습니다 StackOverflow
