时间戳

首页 > 解决方案 > 以 JSON 格式查看表格行详细信息中的内容

javascript - 以 JSON 格式查看表格行详细信息中的内容

问题描述

我创建了一个表，在该表中单击一个按钮会打开和关闭行本身的详细信息。在详细信息中，您可以看到我无法格式化的 JSOn，但最重要的是我无法将其放入表格的大小中。

有什么办法吗？

我是这样做的：

HTML

<section>
<table style="font-family: arial, sans-serif;  border-collapse: collapse; width: 100%; table-layout: fixed; " 
        >
    @* Intestazione *@
    <thead>
        <tr>
            <th>
                ID TRANSAZIONE
            </th>
            <th>
                DATA
            </th>
            <th>
                DESCRIZIONE
            </th>
            <th>
                SORGENTE
            </th>
            <th>
                DETTAGLI
            </th>
        </tr>
    </thead>

    @* Valori Table *@
    <tbody>
        @if (Model.Tracelog != null)
        {
            @foreach (var item in Model.Tracelog)
            {
                <tr class="expandable @((item.TransactionSequence == "1") ? "request" : "response")">
                    <td>
                        @Html.DisplayFor(modelItem => item.TransactionId)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.TraceDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.TraceDescription)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.SourceName)
                    </td>
                    <td>
                        <input class="btn btn-info" type="button" value="Apri Dettagli">
                    </td>
                </tr>
                <tr>
                    <td colspan="5">
                        @(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(item.TraceBlob)));
                    </td>
                </tr>
            }
        }
    </tbody>
</table>

CSS

  <style>

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }
</style>
<style type="text/css">


    .request {
        background-color: LightGreen;
    }

    .response {
        background-color: LightCoral;
    }
</style>

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.expandable').nextAll('tr').each(function () {
            if (!($(this).is('.expandable')))
                $(this).hide();
        });
        $('.expandable input[type=button]').click(function () {
            var trElem = $(this).closest("tr");
            trElem.nextAll('tr').each(function () {
                if ($(this).is('.expandable')) {
                    return false;
                }
                $(this).toggle();
            });
        });
        $('#expand_all').click(function () {
            $('.expandable').nextAll('tr').each(function () {
                if (!($(this).is('.expandable')))
                    $(this).show();
            });
        });
        $('#collaps_all').click(function () {
            $('.expandable').nextAll('tr').each(function () {
                if (!($(this).is('.expandable')))
                    $(this).hide();
            });
        })
    });
</script>

结果如下： 在此处输入图像描述

提前致谢。

编辑：我想以 JSON 格式显示它，即：

{
     "MessageBody": {
         "IdGateway": "002",
         "MsgId": "a8beaabe-80da-4721-bc67-7983ee87d516",
         "Timestamp": "1579516070021",
         "Version": "1.0",
         "Period": "300000",
         "SensorsStatus": [
             {
                 "SensorId": "status",
                 "SensorValue": "0"
             }
         ]
     },
     "Topic": "CERT / 01234 / GICS / STATUS / 002"
}

标签： javascripthtmlcssrazor-pages

解决方案

之后使用标签。它显示原始文本

table, th, td {
  border: 1px solid black;
}
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td><pre>{
     "MessageBody": {
         "IdGateway": "002",
         "MsgId": "a8beaabe-80da-4721-bc67-7983ee87d516",
         "Timestamp": "1579516070021",
         "Version": "1.0",
         "Period": "300000",
         "SensorsStatus": [
             {
                 "SensorId": "status",
                 "SensorValue": "0"
             }
         ]
     },
     "Topic": "CERT / 01234 / GICS / STATUS / 002"
}</pre></td>
  </tr>
</table>

UPD：表内

推荐阅读