代码之家 › 专栏 › 技术社区 › larand

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

field datatables grails

-3

larand · 技术社区 · 7 年前

我正在使用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部分:

<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个字符。难道这不可能吗?

3 回复 | 直到 7 年前

Mike W 7 年前

尝试将以下类添加到 <td> 元素:

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

你也可以使用类似 bootbox &提供在模式对话框中显示单元格内容的机会:

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

Mario 7 年前

这实际上并不是对您的问题的回答,但如果您已经使用了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'));
});

我希望它有用

larand 7 年前

我自己解决了这个问题,在域中添加了一个瞬态字段,在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>