td 内容太长时如何显示？

Question

我有一个 html 表，其中一个字段太大，它是一个 JSON 文件。 我想通过以下方式显示它：TD 内容将是一个按钮，单击它时，JSON 内容将显示在新窗口中。

我想通过把 JSON 作为一个隐藏的 div 来做，当按钮被点击时，我会显示那个 div 的内容，但它看起来很丑陋，我认为有一个更好更优雅的方式正在做。

如果有帮助，我正在使用导轨。

这样做的最佳方法是什么？

Answer 1

这是以前的问题，对这个问题有很好的答案。

您可以添加一个 onClick 事件，您可以在其中删除裁剪，以显示整个内容，反之亦然。

Answer 2

我曾经处理过一个非常大的网格（167 列和 2000 行），其中一列的内容非常长，所以这样做了，我显示了大约前 200 个字符的内容，然后是“...”，当用户悬停时在那个单元格上，我只是在工具提示中显示了整个内容。 因此，基本上将整个内容放在单元格中，但首先通过隐藏溢出并放置一些诸如“...”之类的标记来仅显示有限的内容，然后悬停在工具提示中显示整个内容。

Answer 3

这里的底线是您需要在按钮上使用 Javascript 来加载pop-up / modal ； 然后在该新元素中显示 JSON 文件的内容。 如何显示 JSON 应该使用AJAX或使用hidden div

——

模态

模态元素只是绝对定位在页面上（在其他内容之上）的divs 。 它们可以包含您希望的任何“普通”HTML，并且基本上只是让您给人一种pop-up的印象。

它们实际上只是在事件绑定之后出现的启用 JS 的 div 元素。 我建议在您的按钮上使用其中之一 - 您需要绑定按钮的“点击”事件以触发模式加载：

#app/assets/javascripts/application.js
$(document).on("click", ".button", function(){
   // Trigger modal
});

您可以使用许多模态 JS 插件：

• Bootstrap Modal （大多数开发人员的最爱）
• LeanModal （我们使用这个）
• FancyBox （主要用于图片）

——

JSON

处理隐藏文本的方法会稍微棘手一些。

有两种方法可以做到：

1. AJAX 2 隐藏 Div

Ajax 方式是最有效的（避免将任何多余的数据添加到您的页面）； 但这是最棘手的。

这是我要做的：

#app/assets/javascripts/application.js
$(document).on("click", ".button", function(){
    $.ajax({
        url: "your_json_url",
        dataType: "json",
        success: function(data){
            // Trigger Modal
        }
    });
});

这将允许您创建模型并处理任何 JSON 请求，如下所示：

#app/controllers/your_controller.rb
respond_to :json, only: :your_json_action

def your_json_action
    respond_with @your_code
end

这将基本上采用ajax响应，并将其附加到您可以显示的表单中。

——

另一种方法是使用隐藏的 div ：

#css
.hidden { display: none; }

#view
<table>
    <tr>
        <td>test</td>
        <td>test2</td>
        <td>
            test3
            <div class="hidden">
                your json content here
            </div>
        </td>
    </tr>
</table>