Kendo UI Grid 多级层次结构(n 级层次结构) [英] Kendo UI Grid multi level hierarchy (n-levels of hierarchy)

问题描述

我正在使用 Kendo UI Grid 并且当前正确显示父子记录.然而，事实证明我实际上需要显示 n 级与严格的父子级.并非每条记录都会有子项，但有些记录会有多个级别.

当前网格代码:

 var jgrid = $("#boxesgrid").kendoGrid({列: [{字段:作业ID"，隐藏:真实},{字段:百分比完成"，隐藏:真实},{字段:JobStatusId"，隐藏:真实},{字段:应用名称"，title: "应用程序",模板:<span>${AppName}</span><img class='health-img-r' id=app-${JobId} title='health' src='' alt='health_png'/>",宽度:5%"，可假，可排序:假},{字段:工作名称"，title: "框名",宽度:17%"，可过滤:假},{字段:开始时间"，title: "开始时间",宽度:14%"，可过滤:假},{字段:结束时间"，title: "结束时间",宽度:14%"，可过滤:假},{字段:JobStatusId"，title: "状态",模板:<img class='health-img-l' id=app-${JobId} title='health' src='' alt='health_png'/><span>${JobStatus}</跨度>",可假，可过滤:假}],可排序:{模式:单"，允许未排序:真},可分页:{页面大小:[50]，数字:真，刷新:真实，页面大小:50},自动绑定:假，可滚动:假，可调整大小:真实，细节初始化:细节初始化，数据源:boxesDataSource，数据绑定:函数(){var grid = this;grid.tbody.find(">tr").each(function () {var row = $(this).closest("tr");var 模型 = grid.dataItem(row);var img = $(this).find("img");if (model.JobStatusId == 4 && model.PercentComplete < 100) {img.attr("src", function() {返回 imgSrc + imgGreen;});} else if (model.JobStatusId == 4) {img.attr("src", function() {返回 imgSrc + imgAmber;});} else if (model.JobStatusId == 7) {img.attr("src", function() {返回 imgSrc + imgIce;});} else if (model.JobStatusId == 8) {img.attr("src", function() {返回 imgSrc + imgHold;});} else if (model.JobStatusId == 5) {img.attr("src", function() {返回 imgSrc + imgBlue；});} 别的 {img.attr("src", function() {返回 imgSrc + imgRed;});}});}}).data("kendoGrid");

当前子网格:

function detailInit(e) {$("
").appendTo(e.detailCell).kendoGrid({数据源: {运输: {读: {url: "/api/BoxJobs"},参数映射:函数(数据){data.parentid = e.data.JobId;data.appid = e.data.AppId;返回 kendo.stringify(data);}},架构:{模型:{ id:工作ID"}},服务器分页:真，服务器过滤:真，服务器排序:true},可滚动:假，可排序:真实，列: [{字段:作业ID"，隐藏:真实},{字段:百分比完成"，隐藏:真实},{字段:JobStatusId"，隐藏:真实},{字段:工作名称"，title: "职位名称",模板:<span>${JobName}</span><img class='health-img-l' id=app-${JobId} title='health' src='' alt='health_png'/>",宽度:23%"，可过滤:假，可排序:假},{字段:开始时间"，title: "开始时间",宽度:10%"，可假，可过滤:假，可排序:假},{字段:结束时间"，title: "结束时间",宽度:10%"，可假，可过滤:假，可排序:假},{字段:已用时间"，标题:经过的时间"，宽度:4%"，可假，可过滤:假，可排序:假},{字段:平均运行时间"，标题:平均运行时间"，宽度:3.5%"，可假，可过滤:假，可排序:假},{字段:PredecessorJobName"，title: "以前的工作",宽度:17%"，可过滤:假，可排序:假},{字段:JobStatusId"，title: "状态",模板:<img class='health-img-l' id=app-${JobId} title='health' src='' alt='health_png'/><span>${JobStatus}</跨度>",可假，可过滤:假，可排序:假}],数据绑定:函数(){var grid = this;grid.tbody.find(">tr").each(function () {var row = $(this).closest("tr");var 模型 = grid.dataItem(row);var img = $(this).find("img");if (model.JobStatusId == 4 && model.PercentComplete < 100) {img.attr("src", function() {返回 imgSrc + imgGreen;});} else if (model.JobStatusId == 4) {img.attr("src", function() {返回 imgSrc + imgAmber;});} else if (model.JobStatusId == 7) {img.attr("src", function() {返回 imgSrc + imgIce;});} else if (model.JobStatusId == 8) {img.attr("src", function() {返回 imgSrc + imgHold;});} else if (model.JobStatusId == 5) {img.attr("src", function() {返回 imgSrc + imgBlue；});} 别的 {img.attr("src", function() {返回 imgSrc + imgRed;});}});}});}

样本顶级数据:

 {"Total":638,数据":[{"JobId":1,"AppId":1,"AppName":"APP1","LobId":2,"LobName":"LOB2","JobName":"NRS_COL_BOX","JobType":"box","TimeZone":"芝加哥(中部标准时间)","ParentJobName":null,"ParentJobId":null,"PredecessorJobName":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}]}

样本二级数据:

<预><代码>[{"JobId":63,"AppId":1,"AppName":"APP1","LobId":2,"LobName":"LOB2","JobName":"NRS_COL2_BOX","JobType":"box","TimeZone":"芝加哥(中部标准时间)","ParentJobName":"NRS_COL_BOX","ParentJobId":1,"PredecessorJobName":null,"PredecessorJobId":null,"StartTime":"6/2/20145: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":"芝加哥(中部标准时间)","ParentJobName":"NRS_COL_BOX","ParentJobId":1,"PredecessorJobName":null,"PredecessorJobId":null,"StartTime":"6/2/20145: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":"芝加哥(中部标准时间)","ParentJobName":"NRS_COL_BOX","ParentJobId":1,"PredecessorJobName":null,"PredecessorJobId":null,"StartTime":"6/2/20145:00:06 PM","EndTime":"6/2/2014 5:07:42 PM","ElapsedTime":"00:07:36","JobStatusId":5,"JobStatus":"成功","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":"芝加哥 (中央标准时间)","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":"芝加哥 (中央标准时间)","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":"芝加哥 (中央标准时间)","ParentJobName":"NRS_COL2_BOX","ParentJobId":63,"PredecessorJobName":"NRS_COL2_S_CLEAN1","PredecessorJobId":265,"StartTime":"6/2/2014 PM 5:02:02","EndTime":"","ElapsedTime":"00:58:31","JobStatusId":4,"JobStatus":"Running","PercentComplete":null,"Children":0}]

我对传统的父子层次结构没有任何问题，但我什至在如何让细节模板为它的孩子表现的过程中挣扎.

我希望模板适合子/孙显示 - 如果没有其他子项，则没有下拉指示符.我假设我可以评估 databound 上的数据，但我只是不知道如何去做.

解决方案

这花了一段时间，但我终于在 Telerik 的窥视者的一些指导下找到了答案.我只是在最困难的时间里思考解决方案.

Vladimir(在 Telerik)建议我在 detailInit 函数中使用自定义 ajax 调用，使用成功时的函数来确定我是否有要考虑的子数据.因为无论如何我都需要细节网格，所以我将子检查移动到另一个创建细节网格的函数中.如果我找到子数据，我会向新网格添加一个 detailInit 参数.如果没有，我只需渲染新的细节网格.

ajax initDetail 函数:

function detailInit(e) {var eventData = e;$.ajax({url: apiUrl + "ProcessJobs",类型:POST"，数据:{BoxId:e.data.JobId，AppId:e.data.AppId}，数据类型:json"，成功:功能(数据，状态，xhr){initializeDetailGrid(eventData, 数据);}}

使用检查子项构建新细节网格的功能:

function initializeDetailGrid(e, result) {var moreChildren = result[0].HasChildren;var gridBaseOptions = {数据源:结果，可滚动:假，可排序:真实，列: [{字段:ParentJobId"，书名:《父母的工作》},{字段:作业ID"，标题:作业 ID"},{字段:工作名称"，title: "职位名称",},{字段:工作状态"，书名:《状态》},{字段:JobStatusId"，标题:状态码"},{字段:HasChildren"，书名:《有孩子》},{字段:ChildrenCount"，标题:儿童工作"}]};var gridOptions = {};如果(更多儿童){gridOptions = $.extend({}, gridBaseOptions, { detailInit: detailInit });} 别的 {gridOptions = gridBaseOptions;};$("
").appendTo(e.detailCell).kendoGrid(gridOptions);};

为了完整起见，这里是示例项目的完整页面和示例数据.它是一个基于 .Net MVC4 的网站，使用 Web API 服务提供数据，并为客户端使用 Kendo UI.

这是页面代码:

@{ViewBag.Title = "n 级网格";}<script type="text/javascript">$(document).ready(function () {var isParent, appId, lobId, boxId;var apiUrl = '@ViewBag.ApiUrl';var lobDataSource = new kendo.data.DataSource({运输: {读: {url: apiUrl + "Lob"}},架构:{模型: {id: "LobId",hasChildren: "HasChildren"}}});var appsDataSource = new kendo.data.DataSource({运输: {读: {url: apiUrl + "应用程序"},参数映射:函数(数据，动作){如果(动作 ===阅读"){数据.lobid = lobId;data.parent = isParent;返回数据；} 别的 {返回数据；}}}});var filterDataSource = new kendo.data.DataSource({运输: {读: {url: apiUrl + "主题"}},架构:{模型:{ id:过滤器Id"}}});var boxDataSource = new kendo.data.DataSource({运输: {读: {url: apiUrl + "进程"},参数映射:函数(数据){数据.appid = appId;data.parent = isParent;数据.lobid = lobId;返回 kendo.stringify(data);}},架构:{数据:数据"，总计:总计"，模型:{ id:工作ID"}},服务器分页:真，服务器过滤:真，服务器排序:true});var lobnav = $("#lobnav").kendoTreeView({选择:功能(e){无功树=这个；var src = tree.dataItem(e.node);lobId = src.LobId;isParent = src.HasChildren;},改变:功能(e){appsDataSource.read();},数据源: {运输: {读: {url: apiUrl + "Lob"}},架构:{模型: {id: "LobId",hasChildren: "HasChildren"}}},按需加载:假，数据文本字段:LobName"});var appnav = $("#lobapp").kendoListView({可选:单"，自动绑定:假，改变:函数(){var idx = this.select().index();var itm = this.dataSource.view()[idx];appId = itm.AppId;boxDataSource.query({页数:1，页面大小:10});},模板:<div class='pointercursor'>${AppName}</div>",数据源:appsDataSource});var jobsfilter = $("#jobfilter").kendoListView({可选:单"，按需加载:假，模板:<div class='pointercursor' id=${FilterId}>${FilterName}</div>",数据源:过滤器数据源，数据绑定:函数(){var dsource = $("#jobfilter").data("kendoListView").dataSource;if (dsource.at(0).FilterName !== "All") {dsource.insert(0, { FilterId: 0, FilterName: "All" });}},改变:函数(){var itm = this.select().index(), dataItem = this.dataSource.view()[itm];var appDs = appsDataSource.view(), apps = $("#lobapp").data("kendoListView"),selected = $.map(apps.select(), function (item) {返回 appDs[$(item).index()].AppName;});if (selected.length > 0) {如果 (dataItem.FilterId !== 0) {var $filter = new Array();$filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });jgrid.dataSource.filter($filter);} 别的 {jgrid.dataSource.filter({});}}}});var jgrid = $("#boxesgrid").kendoGrid({列: [{字段:应用名称"，标题:应用程序"},{字段:作业ID"，标题:作业 ID"},{字段:工作名称"，title: "职位名称",},{字段:工作状态"，书名:《状态》},{字段:JobStatusId"，标题:状态码"},{字段:HasChildren"，书名:《有孩子》},{字段:ChildrenCount"，标题:儿童工作"}],可排序:{模式:单"，允许未排序:真},可分页:{页面大小:[10]，数字:真，刷新:真实，页面大小:10},自动绑定:假，可滚动:假，可调整大小:真实，细节初始化:细节初始化，数据源:boxesDataSource}).data("kendoGrid");函数细节初始化(e){var eventData = e;$.ajax({url: apiUrl + "ProcessJobs",类型:POST"，数据:{BoxId:e.data.JobId，AppId:e.data.AppId}，数据类型:json"，成功:功能(数据，状态，xhr){initializeDetailGrid(eventData, 数据);}});};函数 initializeDetailGrid(e, 结果) {var moreChildren = result[0].HasChildren;var gridBaseOptions = {数据源:结果，可滚动:假，可排序:真实，列: [{字段:ParentJobId"，书名:《父母的工作》},{字段:作业ID"，标题:作业 ID"},{字段:工作名称"，title: "职位名称",},{字段:工作状态"，书名:《状态》},{字段:JobStatusId"，标题:状态码"},{字段:HasChildren"，书名:《有孩子》},{字段:ChildrenCount"，标题:儿童工作"}]};var gridOptions = {};如果(更多儿童){gridOptions = $.extend({}, gridBaseOptions, { detailInit: detailInit });} 别的 {gridOptions = gridBaseOptions;};$("
").appendTo(e.detailCell).kendoGrid(gridOptions);};});<div class="col-md-2"><div class="panel panel-default"><div class="panel-heading">业务线</div><div class="panel-body" id="lobnav"></div>
<div class="panel panel-default"><div class="panel-heading">应用程序</div><div class="panel-body" id="lobapp"></div>

<div class="panel panel-default"><div class="panel-heading">过滤器</div><div class="panel-body" id="jobfilter">

<div class="col-md-10"><div id="boxesgrid"></div>