javascript - 如何将 Jquery Datatables Ellipsis 渲染器用于模板字段链接按钮？

Question

当我将它与 Asp-bound field 一起使用时，它工作得很好

看列一个是Ellipsed

但是当在模板字段链接按钮上使用时，它返回空白

看到它是空白的我不知道我应该怎么做才能在链接按钮列字段上应用相同的任何建议？

Eclipsed 的脚本

function pageLoad() {
            var table = $('#gvTest  ').DataTable({
                select: true,
                pageLength: 15,
                lengthChange: false,
                scrollY: "400px",
                scrollX: true,
                scrollCollapse: false,
                order: [15],
                fixedColumns: true,
                columnDefs: [ 
                    { targets: 0, render: $.fn.dataTable.render.ellipsis(7, true) },
                    { targets: 1, render: $.fn.dataTable.render.ellipsis(10, true) },                        
                 ],
                fixedColumns:   {
                    leftColumns: 1,
                }
            });
            $('#BtnReport').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
                });
                var suid = ids;
                var usr = document.getElementById("lblUser").innerText;
                var url2 = "/report/FinalizedReport.aspx?UID=" + suid + "&" + "user=" + usr;
                window.open(url2, '_blank');
                 return false;
            });
            $('#btnAssign').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                 var usr = document.getElementById("lblUser").innerText;
                var url2 = "/PatientAssignment/PatientAssignPage.aspx?UID=" + suid + "&" + "user=" + usr;
                window.location.assign(url2);
                 return false;
            });
             $('#btnAttach').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var arun = ids;
                if (arun) {
                 var width = 700;
                 var height = 350;
                 var left = (screen.width - width) / 2;
                 var top = (screen.height - height) / 2;
                 var params = 'width=' + width + ', height=' + height;
                 params += ', top=' + top + ', left=' + left;
                 params += ', directories=no';
                 params += ', location=no';
                 params += ', menubar=no';
                 params += ', resizable=no';
                 params += ', scrollbars=no';
                 params += ', status=no';
                 params += ', toolbar=no';
                 var strWindowFeatures = params;
                 var URL = "/Attachment/PatientAttachmentPage.aspx?";
                 var usr = document.getElementById("lblUser").innerText;
                 URL = URL + "pattUID=" + arun + "&" + "user=" + usr; +"&" + "url=" + location.href;
                 var win = window.open(URL, "_blank", strWindowFeatures);
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
             $('#btnHistory').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var arun = ids;
                if (arun) {
                 var width = 700;
                 var height = 350;
                 var left = (screen.width - width) / 2;
                 var top = (screen.height - height) / 2;
                 var params = 'width=' + width + ', height=' + height;
                 params += ', top=' + top + ', left=' + left;
                 params += ', directories=no';
                 params += ', location=no';
                 params += ', menubar=no';
                 params += ', resizable=no';
                 params += ', scrollbars=no';
                 params += ', status=no';
                 params += ', toolbar=no';
                 var strWindowFeatures = params;
                 var URL = "/History/WriteHistory.aspx?";
                 var usr = document.getElementById("lblUser").innerText;
                 URL = URL + "pattUID=" + arun + "&" + "user=" + usr; +"&" + "url=" + location.href;
                 var win = window.open(URL, "_blank", strWindowFeatures);
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
              $('#btnEmergency').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                  if (suid) {
                      document.getElementById("pattUID").value = suid;
                      $('#hdnEM').trigger('click');
                      return false;
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
            $('#btnRemoveEm').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                  if (suid) {
                      document.getElementById("pattUID").value = suid;
                      $('#hdnREM').trigger('click');
                      return false;
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
            $.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
    var esc = function ( t ) {
        return t
            .replace( /&/g, '&' )
            .replace( /</g, '&lt;' )
            .replace( />/g, '&gt;' )
            .replace( /"/g, '&quot;' );
    };

    return function ( d, type, row ) {
        // Order, search and type get the original data
        if ( type !== 'display' ) {
            return d;
        }

        if ( typeof d !== 'number' && typeof d !== 'string' ) {
            return d;
        }

        d = d.toString(); // cast numbers

        if ( d.length < cutoff ) {
            return d;
        }

        var shortened = d.substr(0, cutoff-1);

        // Find the last white space character in the string
        if ( wordbreak ) {
            shortened = shortened.replace(/\s([^\s]*)$/, '');
        }

        // Protect against uncontrolled HTML input
        if ( escapeHtml ) {
            shortened = esc( shortened );
        }

        return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
    };
};
         }

下面是我的 GridView

<asp:GridView  ID="gvTest" Width="100%" runat="server"  CssClass="display" AutoGenerateColumns="False" >
   <Columns>
     <asp:BoundField  DataField="PatientID"  HeaderText="Patient ID" >
     </asp:BoundField>
     <asp:TemplateField   HeaderText="Patient Name" SortExpression="PatientName">
    <ItemTemplate  >                
       <asp:LinkButton  ID="lnkVwr"   Text='<%#Eval("PatientName") %>'   OnClientClick = "return imgViewer(this)"  runat="server"    ></asp:LinkButton
       </ItemTemplate>
       </asp:TemplateField>
    </Columns>
 </asp:GridView>

我如何在链接按钮字段上使用它？有什么办法吗？

Answer 1

GridView 中的链接应如下所示:

<a onclick="return imgViewer(this);" id="lnkVwr" href="javascript:__doPostBack(&#39;ctl00$gvTest$ctl11$lnkVwr&#39;,&#39;&#39;)">VDWWD</a>

但是在省略号之后，它看起来像这样:

<span class="ellipsis" title="<a onclick=&quot;return imgViewer(this);&quot; id=&quot;lnkVwr&quot; href=&quot;javascript:__doPostBack('ctl00$gvTest$ctl11$lnkVwr','')&quot; style=&quot;color:#000000!important&quot;>VDWWD</a>"><a&#8230;< span=""></a&#8230;<></span>

如您所见，它把 HTML 弄得一团糟，难怪浏览器不知道如何处理它。

最重要的是，这个函数似乎没有做任何事情或没有被调用:

.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml )

看看这个page它是如何完成的。

我制作了以下片段。它检查字符串中是否存在 href，如果存在，它会跳过字符串的 trim 。

<script type="text/javascript">
    function pageLoad() {
        var table = $('#gvTest').DataTable({
            fixedColumns: true,
            columnDefs: [
                { targets: 0, render: $.fn.dataTable.render.ellipsis() },
                { targets: 1, render: $.fn.dataTable.render.ellipsis() },
            ],
        });
    }

    $.fn.dataTable.render.ellipsis = function () {
        return function (data, type, row) {
            if (type !== 'display') {
                return data;
            }

            if (data.length > 10 && !data.includes("href")) {
                return data.substr(0, 10) + '…';
            } else {
                return data;
            }
        }
    };
</script>