如何将 Jquery Datatables Ellipsis 渲染器用于模板字段链接按钮？
Posted
技术标签:
【中文标题】如何将 Jquery Datatables Ellipsis 渲染器用于模板字段链接按钮？【英文标题】：how to use Jquery Datatables Ellipsis renderer for template field link button? 【发布时间】：2018-10-28 13:32:14 【问题描述】：当我将它与 Asp-bound field 一起使用时，它运行良好
看column一个是Ellipsed
但是在template field link button 上使用时，它返回空白
看到它是空白的我不知道我应该怎么做才能在链接按钮列字段上应用相同的任何建议？
我的script 为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, '<' )
.replace( />/g, '>' )
.replace( /"/g, '"' );
;
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+'…</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>
如何在链接按钮字段中使用它？ 有什么办法吗？
【问题讨论】：
【参考方案1】：GridView 中的链接应如下所示：
<a onclick="return imgViewer(this);" id="lnkVwr" href="javascript:__doPostBack('ctl00$gvTest$ctl11$lnkVwr','')">VDWWD</a>
但是在省略号之后，它看起来像这样：
<span class="ellipsis" title="<a onclick="return imgViewer(this);" id="lnkVwr" href="javascript:__doPostBack('ctl00$gvTest$ctl11$lnkVwr','')" style="color:#000000!important">VDWWD</a>"><a…< span=""></a…<></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>
【讨论】：
以上是关于如何将 Jquery Datatables Ellipsis 渲染器用于模板字段链接按钮？的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Jquery Datatables Ellipsis 渲染器用于模板字段链接按钮？
如何在 jQuery 导出时将 dataTables 中的所有 tableHeader 值更改为大写