Grails、テーブル内のフィールドの表示長を制限する方法

Question

私はdatatablesを使用しており、テーブル内のいくつかのフィールドの表示可能な長さを制限する必要があります。編集ビューでは、引き続き長い文字列を処理できるはずです。 あまり努力することなくそれが可能であることを願っています。

   var table = $('#gridProducts').DataTable({ 
       "scrollY": "600px", 
       "scrollX": "1000px", 
       "scrollCollapse": true, 
       "paging": false, 
       "searching": true, 
       "dom": '<"top"i>rt<"bottom"lp><"clear">', 
       "select": true 

とテーブルのHTML部分：これらの列の多くは、私はもっとして1行が必要です

<table id="gridProducts" class="display" width="100%"> 
<colgroup> 
    <col width="1%"/> <!-- Del --> 
    <col width="3%"/> <!-- ID --> 
    <col width="3%"/> <!-- Mill --> 
    <col width="3%"/> <!-- Species --> 
    <col width="8%"/> <!-- Dimension --> 
    <col width="10%"/> <!-- Length --> 
    <col width="5%"/> <!-- Grade --> 
    <col width="3%"/> <!-- KD --> 
    <col width="3%"/> <!-- Currency --> 
    <col width="3%"/> <!-- FSC --> 
    <col width="3%"/> <!-- PEFC --> 
    <col width="3%"/> <!-- CW --> 
    <col width="3%"/> <!-- UC --> 
    <col width="3%"/> <!-- InStock --> 
    <col width="3%"/> <!-- Sold --> 
    <col width="3%"/> <!-- Offered --> 
    <col width="3%"/> <!-- Available --> 
    <col width="3%"/> <!-- W01 --> 
    <col width="3%"/> <!-- W02 --> 
    <col width="3%"/> <!-- W03 --> 
    <col width="3%"/> <!-- W04 --> 
    <col width="3%"/> <!-- W05 --> 
    <col width="3%"/> <!-- W06 --> 
    <col width="3%"/> <!-- W07 --> 
    <col width="3%"/> <!-- W08 --> 
    <col width="3%"/> <!-- W09 --> 
    <col width="3%"/> <!-- W10 --> 
    <col width="3%"/> <!-- W11 --> 
    <col width="3%"/> <!-- W12 --> 
</colgroup> 
<thead> 
    <tr> 
     <sec:ifAnyGranted roles="ROLE_ADMIN,ROLE_SALES,ROLE_SUPPLIER"> 
      <th>Del</th> 
     </sec:ifAnyGranted>  
     <th>Id</th> 
     <th>Mill</th> 
     <th>Species</th> 
     <th>Dimension</th> 
     <th>Length</th> 
     <th>Grade</th> 
     <th>KD(%)</th> 
     <th>Cur</th> 
     <th>FSC</th> 
     <th>PEFC</th> 
     <th>CW</th> 
     <th>UC</th> 
     <th>InStock</th> 
     <th>Sold</th> 
     <th>Offer</th> 
     <th>Avail(m3)</th> 
     <th>${myTag.weekNo(offset: "1")}</th> 
     <th>${myTag.weekNo(offset: "2")}</th> 
     <th>${myTag.weekNo(offset: "3")}</th> 
     <th>${myTag.weekNo(offset: "4")}</th> 
     <th>${myTag.weekNo(offset: "5")}</th> 
     <th>${myTag.weekNo(offset: "6")}</th> 
     <th>${myTag.weekNo(offset: "7")}</th> 
     <th>${myTag.weekNo(offset: "8")}</th> 
     <th>${myTag.weekNo(offset: "9")}</th> 
     <th>${myTag.weekNo(offset: "10")}</th> 
     <th>${myTag.weekNo(offset: "11")}</th> 
     <th>${myTag.weekNo(offset: "12")}</th> 
    </tr> 
</thead> 
<tbody> 

    <g:each in="${prodBuffer}" status="i" var="pb"> 
     <tr class="${ (i % 2) == 0 ? 'even': 'odd'}"> 
      <sec:ifAnyGranted roles="ROLE_ADMIN,ROLE_SALES, ROLE_SUPPLIER"> 
       <td> 
        <g:link action="deleteProduct" controller="ordersAndStore" params="[prodID:pb.id]" 
        onclick="return confirm('Are you sure?')"> 
        X 
        </g:link> 
       </td> 
      </sec:ifAnyGranted>  
      <td> <g:link action="edit" controller="prodBuffer" params="[id:pb.id]"> ${pb.id}</g:link></td> 
      <td>${pb.sawMill?:'UnDefined'}</td> 
      <td>${pb.species}</td> 
      <td>${pb.dimension}</td> 
      <td>${pb.length}</td> 
      <td>${pb.grade}</td> 
      <td>${pb.kd}</td> 
      <td>${pb.currency}</td> 
      <td>${pb.priceFSC}</td> 
      <td>${pb.pricePEFC}</td> 
      <td>${pb.priceCW}</td> 
      <td>${pb.priceUC}</td> 
      <td>${pb.volumeInStock}</td> 
      <td>${pb.volumeOnOrder}</td> 
      <sec:ifAnyGranted roles="ROLE_ADMIN,ROLE_SALES"> 
       <td><div id="${pb.id}" class="offers" >${pb.volumeOffered}</div></td> 
      </sec:ifAnyGranted>  
      <sec:ifNotGranted roles="ROLE_ADMIN,ROLE_SALES">  
       <td>${pb.volumeOffered}</td> 
      </sec:ifNotGranted>  
      <td>${pb.volumeAvailable}</td> 
      <g:each in="${pb.plannedVolumes}" status="j" var="pv"> 
       <td>${pv.volume}</td> 
      </g:each> 
     </tr> 
    </g:each> 
</tbody> 

[OK]を、テーブルは次のように定義されそれらをラップすることを望まない。テキストが50文字で、フィールドの幅が10文字の場合は、最初の10文字のみを表示する必要があります。 それは可能ではありませんか？あなたの<td>要素に次のクラスを追加し

Answer 1

ドメインに一時的なフィールドを追加してゲッターに自分自身を解決しました。私はちょうど最初の10文字をコピーし、テーブルのこの新しい "エイリアス"フィールドを参照しました。これは、テーブルの外乱のない完璧に働いた：

class ProdBuffer { 
int id 
String dimension 
String length 

...

static transients = ['shortLength','shortDimension'] 

public String getShortLength() { length.substring(0, Math.min(length.length(), 10)); } 
public String getShortDim() { dimension.substring(0, Math.min(dimension.length(), 10)); } 

、表に：

<table id="gridProducts" class="display"> 
    <colgroup> 
     <col width="1em"/> <!-- Del --> 
... 
    </colgroup> 
    <thead> 
     <tr> 
    ... 

     <th>Dimension</th> 
      <th>Length</th> 
      <th>Grade</th> 
     </tr> 
    </thead> 
    <tbody> 
    ... 

     <td class="shrink">${pb.sawMill?:'UnDefined'}</td> <!-- This (shrink) didn't work--> 
     <td>${pb.species}</td> 
     <td>${pb.shortDim}</td>  <!-- New alias field --> 
     <td>${pb.shortLength}</td> <!-- New alias field --> 
     <td>${pb.grade}</td> 

Answer 2

試してみてください。

.shrink{ 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    cursor: pointer; 
} 

あなたはまた、モーダルダイアログ内のセルの内容を表示するための機会を提供bootbox &のようなものを使用することができます

$(document).on('click', '.shrink', function() { 
    bootbox.alert(this.innerHTML); 
}); 

Answer 3

これは、あなたの質問に対する答えではありませんが、すでにDatatableを使用している場合は、列を非表示にするという機能を利用しています。 localStorageの最後の列の選択を保存し、ユーザーが再びビューにアクセスしたときにその状態を再設定することで、動的にすることができます。私はユーザーがこれらの機能を理解していると思う。

あなたは基本的に、あなたがトグルし、その後

<div> 
    <label> 
    <input type="checkbox" id="col1"> Hide First Column 
    </label> 
</div> 


$('#col1').change(function() { 
    dt.columns(0).visible(!$(this).is(':checked')); 
}); 

その状態に影響を与えるためにいくつかの変更イベントを実行したい列に関連するいくつかのチェックボックスを作成するには、この link

で列を非表示の動作の例を見つけることができます

私はそれが役に立つといいです