在footable中保留JSON格式
我试图在一个可移动的表格中以适当间隔的JSON格式显示JSON字符串,但它只是删除了JSON字符串中的所有空白。我曾尝试使用pre标记,尽管它保留了格式,但它并不能满足我的需要。有没有办法将格式保持在TD内 这是我的密码:在footable中保留JSON格式,json,html-table,formatting,hidden,footable,Json,Html Table,Formatting,Hidden,Footable,我试图在一个可移动的表格中以适当间隔的JSON格式显示JSON字符串,但它只是删除了JSON字符串中的所有空白。我曾尝试使用pre标记,尽管它保留了格式,但它并不能满足我的需要。有没有办法将格式保持在TD内 这是我的密码: @foreach (TinCan.Statement statement in Model.TinCanStatementList) { <tr> <td>@statement.actor.name <b>@statement
@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>
}
下面是一个简单的示例,其中标记似乎按预期工作 下面是一个例子,说明了这一点: 如果这不是你需要的,也许你可以在问题中添加更多细节
<!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>