在footable <td>中保留JSON格式答案

【问题标题】：Retain JSON formatting in footable <td>在footable <td>中保留JSON格式
【发布时间】：2014-07-09 12:13:00
【问题描述】：

我正在尝试在可脚注的表<td> 中以适当间隔的 JSON 格式显示 JSON 字符串，但它只是删除了 JSON 字符串中的所有空格。我曾尝试使用 pre 标记，尽管它保留了格式，但它并不能满足我的需要。有什么方法可以将格式保存在 TD 中？

这是我的代码：

@foreach (TinCan.Statement statement in Model.TinCanStatementList)
{
  <tr> 
    <td>@statement.actor.name <b>@statement.verb.display.ToJObject()["und"]</b> '@statement.target.ToJObject(TinCan.TCAPIVersion.V101)["definition"]["name"]["en-US"]'</td>  
    <td>@statement.ToJObject()</td>
  </tr>
}

【问题讨论】：

标签： json html-table formatting hidden footable

【解决方案1】：

这是一个简单的例子，<pre> 标记似乎按预期工作。

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
  <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <link rel="stylesheet" href="footable.core.css" />
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script data-require="bootstrap@*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
  <script src="footable.js"></script>
</head>

<body>
  <table class="table demo default footable" data-filter="#filter" data-filter-text-only="false">
    <thead>
      <tr>
        <th data-toggle="true" class="footable-first-column">Col 1</th>
        <th>Col 2</th>
        <th data-hide="phone,tablet">Col 3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="" style="display: table-row;">
        <td></td>
        <td>
          <pre>{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}</pre>
        </td>
        <td>Blah Blah Blah</td>
      </tr>
      <tr class="" style="display: table-row;">
        <td></td>
        <td>
          <pre>{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}</pre>
        </td>
        <td>Blah Blah Blah</td>
      </tr>
      <tr class="" style="display: table-row;">
        <td></td>
        <td>
          <pre>{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}</pre>
        </td>
        <td>Blah Blah Blah</td>
      </tr>
    </tbody>
  </table>
  <script type="text/javascript">
    $(function() {
      $('table').footable();
    });
  </script>
</body>
</html>

这是一个证明这一点的 plunk：http://plnkr.co/edit/qlKxfddZV7RYGISQkNWW

如果这不是您所需要的，也许您可以在问题中添加更多细节。

【讨论】：