【问题标题】:how to use Jquery Datatables Ellipsis renderer for template field link button?如何将 Jquery Datatables Ellipsis 渲染器用于模板字段链接按钮?
【发布时间】:2018-10-28 13:32:14
【问题描述】:

当我将它与 Asp-bound field 一起使用时,它运行良好

column一个是Ellipsed

但是在template field link button 上使用时,它返回空白

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

我的scriptEclipsed

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>';
    };
};
         }

下面是我的网格视图

<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>

如何在链接按钮字段中使用它? 有什么办法吗?

【问题讨论】:

    标签: javascript c# jquery asp.net datatables


    【解决方案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是怎么做的。

    我做了以下sn-p。它检查字符串中是否存在href,如果存在,则跳过字符串的修剪。

    <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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-06-05
      • 2019-06-04
      • 2021-10-08
      • 2011-12-27
      • 2023-03-19
      • 1970-01-01
      • 2012-04-27
      • 1970-01-01
      相关资源
      最近更新 更多