如何使用Jquery Datatables Ellipsis渲染器作为模板字段链接按钮? [英] how to use Jquery Datatables Ellipsis renderer for template field link button?
本文介绍了如何使用Jquery Datatables Ellipsis渲染器作为模板字段链接按钮?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我将它与Asp-bound field一起使用时，它运行良好
When I am using that with Asp-bound field it's working perfectly
外观column一个是Ellipsed
但是在template field link button上使用时，它返回空白
But when using on template field link button it's returning blank
看到它为空白我不知道该怎么做才能对链接按钮列字段应用相同的建议?
see it's blank I don't know what should I do to apply the same on the link button columns fields any suggestion?
我的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>
如何在链接"按钮字段上使用它? 有什么办法吗?
How can I use this on link button field? Is there any way to do that?
推荐答案
GridView中的链接应如下图所示
A link in the GridView should look like this
<a onclick="return imgViewer(this);" id="lnkVwr" href="javascript:__doPostBack('ctl00$gvTest$ctl11$lnkVwr','')">VDWWD</a>
但是在省略号之后看起来像这样
But after Ellipsis it looks like this
<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，也难怪浏览器不知道如何处理它.
As you can see it made a complete mess of the HTML and it's no wonder the browser does not know what to do with it.
最重要的是，该函数没有执行任何操作或未被调用:
On top of that it seems that this function doesn't do anything or does not gets called:
.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml )
在此页面上查看其完成方式 https://datatables.net/blog/2016-02-26
Take a look on this page how it is done https://datatables.net/blog/2016-02-26
我做了以下片段.它会检查字符串中是否存在href，如果存在，则跳过对字符串的修剪.
I made the following snippet. It checks if an href is present in the string and if there is, skips the trimmming of the string.
<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渲染器作为模板字段链接按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
