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

Question

我正在使用数据表，需要限制表中几个字段的可显示长度。在编辑视图中，您应该仍然能够处理长字符串。 我希望不用太多努力就能做到这一点。

好的，表定义为：

                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 个字符。 这不应该是可能的吗？

Answer 1

尝试将以下类添加到您的 <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 个字符，然后在表中引用了这个新的“别名”字段。它完美地工作，不会干扰桌子：

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>