Kendo UI Grade multi nível da hierarquia (n-níveis de hierarquia)
https://stackoverflow.com//questions/24004905
-
20-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu estou usando o Kendo UI Grade e, atualmente, exibir pai e filho registros de forma adequada.No entanto, acontece que eu realmente precisa display n-níveis de vs.estritamente pai-filho.Nem todos os recordes ter filhos, mas alguns vão ter vários níveis.
Grelha actual código:
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");
Atual grade filho:
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;
});
}
});
}
});
}
Exemplo de nível superior dados:
{"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}
]
}
Exemplo de 2º nível de dados:
[
{"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}
]
Exemplo de 3º nível de dados:
[
{"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}
]
Eu não tenho nenhum problema com a tradicional hierarquia pai-filho, mas eu estou lutando com mesmo como eu vou fazer o detalhe do modelo de comportar-se para essas crianças.
Eu gostaria de que o modelo seja adequado para o filho/neto apresentar - não suspensa do indicador se não tiver mais filhos.Eu suponho que eu possa avaliar os dados de ligação de dados, mas simplesmente não estou a ver como fazê-lo.
Solução
Levou um tempo, mas eu finalmente funcionou uma resposta com alguma orientação de peeps em Telerik.Eu estava apenas tendo o momento mais difícil de obter a minha cabeça em torno da solução.
Vladimir (em Telerik) sugeriu que eu usar um personalizado chamada ajax no detailInit função usando uma função do sucesso para determinar se eu tivesse filho de dados a considerar.Desde que eu precisava detalhes grade de não importa o quê, mudei a criança de seleção em outra função que cria o detalhe da grade.Se eu encontrar a criança de dados, adicionar um detailInit parâmetro para a nova grade.Se não, eu simplesmente compor o novo detalhe da grade.
O ajax initDetail função:
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);
}
}
A função de construir novos detalhes grade com a seleção para as crianças:
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);
};
Para completar, aqui é a página completa e de dados de exemplo do projeto de exemplo.Ele é um .Net MVC4 com o site, usando a API da Web de serviços de dados e o Kendo UI para o cliente.
Aqui é a página de código:
@{
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>
Os dados, na verdade, é codificado para este aplicativo de exemplo, mas eu ainda devolvê-lo via Web API.Aqui está um exemplo do mais alto nível de dados:
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},
Aqui está um segundo nível de dados (filho de dados):
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},
Alguns de 3º nível de dados (netos):
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},
E assim por diante...
Ele está funcionando corretamente para 4 níveis no meu teste.Há problemas de formatação, com as múltiplas grades aninhadas que vou abordar.
Outras dicas
Não sei se esta questão ainda está em aberto, mas uma solução simples é usar a recursividade no "DetailInit função", como abaixo:
<!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>Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
