jqgrid省略記号

Question

jqGridでは、テキストが収まらず切り捨てられた場合、列の最後に「...」を表示するネイティブな方法がありますか？

ui-ellipsisクラスがありますが、テキストが切り捨てられた場合に自動的に追加され、列のサイズが変更されると自動的に消えてしまうのは混乱していますか？

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 });