jquery - 截断数据表中的单元格，还可以在工具提示中预览全文

Question

如何截断评论单元格(一列)，同时插入显示截断文本全文的工具提示？

我仅尝试截断文本，并且在我的工具提示中显示了截断的文本..

<table id="example" class="table table-bordered" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.ShortDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ClientName)
        </th>
        <th>
            @Html.DisplayName("Type")
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ProjectValueHr)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ProjectValueMoney)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CommentPipeline)
        </th>
        <th>
            @Html.DisplayName("Owner")
        </th>

        <th>
            @Html.DisplayNameFor(model => model.JobStatusName)
        </th>
        <th>
            @Html.DisplayName("Modified By")
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ModifiedTimeStamp)
        </th>
        <th>
            @Html.DisplayName("Created By")
        </th>
        <th>
            @Html.DisplayNameFor(model => model.LostComment)
        </th>
        <th>
            Options
        </th>
    </tr>
   <tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ShortDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ClientName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.NameFCO)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.ProjectValueHr)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ProjectValueMoney)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CommentPipeline)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FullName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.JobStatusName)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.FullName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ModifiedTimeStamp)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShortDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LostComment)
            </td>
            <td style="display: inline">
                <button type="button" class="editView" data-id="@item.PipelineID" data-toggle="modal" data-target="#modalEdit">Edit</button>
                <button type="button" class="btnDetails" data-toggle="modal" data-id="@item.PipelineID" data-target="#detailsModal">More</button>
            </td>
        </tr>
    }
</tbody>
</table>
<script>  

 function strtrunc(str, max, add) {
    add = add || '...';
    return (typeof str === 'string' && str.length > max ? str.substring(0, max) + add : str);
};
   $(document).ready(function () {
    'use strict';
    t = $('#example').DataTable({
        "bProcessing": true,
        "bStateSave": true,
        "iDisplayLength": 10000,
        dom: 'Bfrtip',
        'columnDefs': [
          {
              'targets': 5,
              'render': function(data, type, full, meta){
                  if(type === 'display'){
                      data = strtrunc(data, 20);
                  }

                  return data;
              }
          }
        ],
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
            $(nRow).children("td").css("overflow", "hidden");
            $(nRow).children("td").css("white-space", "nowrap");
            $(nRow).children("td").css("text-overflow", "ellipsis");
        },
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print', 'colvis', {
                text: 'Create',
                action: function (e, dt, node, config) {
                    alert('Button activated');
                    $('#createViewModal').modal('show');
                }
            }
        ]
    });
</script>

Answer 1

您可以使用 CSS 截断文本，然后使用 JS 填充 mouseenter 上的 title 属性:

<style type="text/css">
td.myrow {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>    

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
    $(function() {
        $("td.myrow").mouseenter(function() {
            $(this).attr("title", $(this).html());
        });
    });
</script>

<table border="1" width="300">
<tr>
<td class="myrow">Some long text goes here...</td>
<td class="myrow">Some long text goes here...</td>
<td class="myrow">Some long text goes here...</td>
</tr>
</table>