Просмотр содержимого строки таблицы в формате JSON - PullRequest
Новая
       22

Просмотр содержимого строки таблицы в формате JSON

1 голос
/ 17 апреля 2020

Я создал таблицу, в которой нажатие на кнопку открывает и закрывает детали самой строки. В деталях вы можете увидеть JSOn, который я не могу отформатировать, но, прежде всего, я не могу вписать его в размер таблицы.

Есть ли способ?

I сделал это так:

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>

Результат следующий: enter image description here

Заранее спасибо.

edit: я хотел бы показать его в формате 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"
}

1 Ответ

1 голос
/ 17 апреля 2020

использовать тег после. Показать оригинальный текст 

table, th, td {
  border: 1px solid black;
}

  
    Month
    Savings
  
  
    January
    $100
  
  
    February
    {
     "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"
}

UPD: внутри стола

...