Grails，你如何限制表中字段的顯示長度

-3

我正在使用數據表，並且需要限制表中幾個字段的可顯示長度。在編輯視圖中，您仍然應該能夠處理長字符串。我希望這可以沒有太多的努力。Grails，你如何限制表中字段的顯示長度

好了，該表定義爲：

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

和表的HTML部分：

<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>

很多這些列需要一個以上的線，所以我不希望他們包裝。如果文本是50個字符，但該字段只有10個字符寬，則應該只顯示前10個字符。不應該這樣嗎？

來源

2017-10-10 larand

我解決了我的自我，通過添加一個瞬態字段到域和getter我剛剛複製了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>

來源

2017-10-11 13:04:23 larand

嘗試添加下面的類到您的<td>元素：

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

您也可以使用類似bootbox &提供機會展示在模態對話框單元的內容：

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

來源

2017-10-10 18:03:42

它沒有在我的工作表中，也許是因爲我現在使用數據表？我通過在域中添加一個瞬態字段並在getter中添加了一個新字符，然後在表中引用這個新的「別名」字段，從而解決了這個問題。它完美地工作，沒有桌子的干擾。 – larand

這是不是真正的答案你的問題，但另一種方法，如果你已經使用Datatable利用隱藏列的功能。您可以通過保存localStorage中最後一列的選擇並在用戶再次訪問視圖時重新建立其狀態來使其動態化。我認爲用戶很欣賞這些功能。

你可以找到在這個link

的中隱藏列的行爲的例子基本上你創建你想切換，然後進行一些更改事件影響其狀態列相關的一些複選框

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


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

我希望它是有用的

來源

2017-10-11 02:34:02 user615274

Grails，你如何限制表中字段的顯示長度

回答

相關問題