jqgrid省略号

Question

在jqGrid中，是否有一种本地方式在列的末尾显示“...”，如果它的文本不适合并被截断？

我看到有一个ui省略号类，但我很困惑，如果文本被截断并且一旦调整列后它会自动消失，它是否自动添加？

Answer 1

您可以使用以下CSS

解决问题

<style type="text/css">
    .ui-jqgrid tr.jqgrow td { text-overflow: ellipsis;-o-text-overflow: ellipsis; }
</style>

如果您将获得如下所示的结果：

（见here直播）

在其他一些情况下，另一种CSS风格会更好：

<style type="text/css">
    .ui-jqgrid tr.jqgrow td {
        white-space: normal !important;
        height:auto;
        vertical-align:middle;
        padding-top:3px;
        padding-bottom:3px
    }
</style>

如果结果如下：

（见here直播）。

以上设置都是我常用的设置，我经常使用这些设置取决于客户的要求。

Answer 2

fit text plugin:

 (function($) {
        $.fn.fitText = function(options) {
            options = $.extend({
                width: 0,
                height: 0
            }, options);

            $(this).each(function() {
                var elem = $(this);
                if (options.height > 0) {
                    while (elem.height() > options.height) {
                        elem.text(elem.text().substring(0, (elem.text().length - 4)) + "...");
                    }
                }
                if (options.width > 0) {
                    while (elem.width() > options.width) {
                        elem.text(elem.text().substring(0, (elem.text().length - 4)) + "...");
                    }
                }
            });
        }
    })(jQuery);


calling the function:

    $('.ADHrefUserName').fitText({ width: 200, height: 25 });