Grails，如何限制 table 中字段的显示长度

Question

我正在使用数据table，需要限制 table 中几个字段的可显示长度。在编辑视图中，您应该仍然能够处理长字符串。我希望这可以不费吹灰之力。

好的，table定义为：

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

和 table 的 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 个字符。这不应该吗？

Answer 1

尝试将以下 class 添加到您的 <td> 元素中：

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

您也可以使用 bootbox 之类的东西并提供在模态对话框中显示单元格内容的机会：

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

Answer 2

这并不是您问题的真正答案，而是一种替代方案，如果您已经使用 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'));
});

希望有用

Answer 3

我自己解决了这个问题，方法是在域中添加一个瞬态字段，在 getter 中，我只是复制了前 10 个字符，然后在 [=] 中引用了这个新的 "alias" 字段21=]。它工作得很好，没有 table:

的干扰

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

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

Grails，如何限制 table 中字段的显示长度

Grails, how do you limit displayed length of a field in a table

grails

field

datatables