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＆amp;提供在模态对话框中显示单元格内容的机会：

$( 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个第一个字符，然后在表中引用了这个新的＆＃34;别名＆＃34; -field。它完美地工作，没有扰乱桌子：

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>

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

3 个答案: