Question

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

我想通过将json作为例如隐藏的div来实现它，当点击按钮时，我将显示div的内容，但它看起来很难看，我认为有这是一种更好，更优雅的方式。

如果它有帮助，我正在使用rails。

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

Answer 1

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

Answer 2

我曾经处理过一个非常大的网格（167列和2000行），其中一列有很长的内容，所以这样做，我展示了前200个内容的字符然后＆＃34; ... ＆＃34;，当用户在该单元格上盘旋时，我只是在工具提示中显示了整个内容。因此，基本上将整个内容放在单元格中，但首先只显示有限的内容，隐藏溢出并放置一些标记，如＆＃34; ...＆＃34;然后悬停在工具提示中显示全部内容。

Answer 3

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

-

<强>模态

enter image description here

模态元素只是divs绝对位于页面上（位于其他内容之上）。它们可以包含您希望的任何“普通”HTML，基本上只允许您给出pop-up的印象。

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

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

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

Bootstrap Modal（大多数开发者最喜欢的）

LeanModal（我们用这个）

FancyBox（主要用于图片）

-

<强> JSON

处理隐藏文本的方式会稍微复杂一些。

有两种方法可以做到：

AJAX   2隐藏分区

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

这就是我要做的事情：

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

这将允许您创建一个模型＆amp;处理任何类似的JSON请求：

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

def your_json_action
    respond_with @your_code
end

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

-

另一种方法是使用hidden 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>

如何在太长时间内显示td内容

3 个答案: