Kendo Window Json 漂亮的打印 Mvc

Question

我是新手，我正在尝试弄清楚如何在 Kendo Window 上漂亮地打印 Json，这是我正在使用的函数：

function DisplayRequestSample(eventRequestSample) {
    var kendoWindow = $("<div />").kendoWindow({
        title: "Event Request Sample",
        resizable: false,
        modal: true,
        animation: false,
        width: 700,
        height: 600
    });
    kendoWindow.data("kendoWindow")
        .content(JSON.stringify(JSON.parse(eventRequestSample),null,4))
        .center().open();       
}

当前输出：

{ "TrackingID": "89449f04-86b8-4e48-ad1d-52fde970261d", "RequestorID": "Web", "EventType": "Blah", "Environment": "TEST", "ProfileID": 0 }

但是我怎样才能放置适当的空格和换行符/缩进。

JSON.stringify 没有缩进 Json，不确定我是否使用正确。感谢您对此进行调查。

Answer 1

问题是您在 DIV 和 DIV 中打印 JSON 并删除空格、制表符、换行符...所以您应该将它放在一个元素中作为一个 PRE，类似于：

kendoWindow.data("kendoWindow")
    .content("<pre>" +
             JSON.stringify(JSON.parse(eventRequestSample),null,4)
             "</pre>")
    .center().open();

第二个选项是使用 CSS 为您的 DIV 获取相同的格式。您应该使用 style='white-space: pre-wrap;' 并且 Window 初始化类似于：

var kendoWindow = $("<div style='white-space: pre-wrap;  '/>").kendoWindow({

显示第二种方法的代码片段：

function DisplayRequestSample(eventRequestSample) {
  var kendoWindow = $("<div style='white-space: pre-wrap;'/>").kendoWindow({
    title: "Event Request Sample",
    resizable: false,
    modal: true,
    animation: false,
    width: 300,
    height: 200
  });
  kendoWindow.data("kendoWindow")
  .content(JSON.stringify(JSON.parse(eventRequestSample),null,4))
  .center().open(); 
}

DisplayRequestSample('{ "TrackingID": "89449f04-86b8-4e48-ad1d-52fde970261d", "RequestorID": "Web", "EventType": "Blah", "Environment": "TEST", "ProfileID": 0 }');

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>

Kendo Window Json 漂亮的打印 Mvc

Kendo Window Json Pretty print Mvc

json

kendo-ui

kendo-window