如何限制datatable列宽--(收缩内容)
2018-03-16 22:52
453 查看
实现功能:dataTable某列内容过长的话,只显示部分内容,鼠标点击显示全部,再点击显示部分。可以切换。
效果图:
鼠标点击:
如果再次点击,备注内容又收缩了。
JS实现代码如下:
var remarkShowLength = 10;//默认现实的字符串长度
datatable中的配置:首先在 columnDefs 中显示文本的时候,如果超长,就只显示部分。然后通过 createdRow ,如果备注信息超长的话,给该td元素添加上onclick时间,鼠标点击的时候,可以进行切换。并且将全部的字符信息 data.remarks 放置到属性中去,以便后面可以取出来。
"createdRow": function( row, data, dataIndex ) {
if(data.remarks.length > remarkShowLength){//只有超长,才有td点击事件
$(row).children('td').eq(7).attr('onclick','javascript:changeShowRemarks(this);');
}
$(row).children('td').eq(7).attr('content',data.remarks);
},
"ajax" : {
"url" : "/cluster/list?importantLevel=" + $('#searchImportantLevelSelect').val()
},
"columnDefs" : [
{
"type": "date",
"targets": 7,
"render": function (data, type, full, meta) {
if (full.remarks.length > remarkShowLength) {
下面从td的属性中取出全部的remark,然后根据当前是显示的全部还是显示的部分信息,进行切换。//切换显示备注信息,显示部分或者全部
function changeShowRemarks(obj){//obj是td
var content = $(obj).attr("content");
if(content != null && content != ''){
if($(obj).attr("isDetail") == 'true'){//当前显示的是详细备注,切换到显示部分
//$(obj).removeAttr('isDetail');//remove也可以
$(obj).attr('isDetail',false);
$(obj).html(getPartialRemarksHtml(content));
}else{//当前显示的是部分备注信息,切换到显示全部
$(obj).attr('isDetail',true);
$(obj).html(getTotalRemarksHtml(content));
}
}
}
//部分备注信息
function getPartialRemarksHtml(remarks){
return remarks.substr(0,remarkShowLength) + ' <a href="javascript:void(0);" ><b>...</b></a>';
}
//全部备注信息
function getTotalRemarksHtml(remarks){
return remarks + ' <a href="javascript:void(0);" >收起</a>';
}
效果图:
鼠标点击:
如果再次点击,备注内容又收缩了。
JS实现代码如下:
var remarkShowLength = 10;//默认现实的字符串长度
datatable中的配置:首先在 columnDefs 中显示文本的时候,如果超长,就只显示部分。然后通过 createdRow ,如果备注信息超长的话,给该td元素添加上onclick时间,鼠标点击的时候,可以进行切换。并且将全部的字符信息 data.remarks 放置到属性中去,以便后面可以取出来。
"createdRow": function( row, data, dataIndex ) {
if(data.remarks.length > remarkShowLength){//只有超长,才有td点击事件
$(row).children('td').eq(7).attr('onclick','javascript:changeShowRemarks(this);');
}
$(row).children('td').eq(7).attr('content',data.remarks);
},
"ajax" : {
"url" : "/cluster/list?importantLevel=" + $('#searchImportantLevelSelect').val()
},
"columnDefs" : [
{
"type": "date",
"targets": 7,
"render": function (data, type, full, meta) {
if (full.remarks.length > remarkShowLength) {
return getPartialRemarksHtml(full.remarks);//显示部分信息
} else {return full.remarks;//显示原始全部信息 }
}
}
]
下面从td的属性中取出全部的remark,然后根据当前是显示的全部还是显示的部分信息,进行切换。//切换显示备注信息,显示部分或者全部
function changeShowRemarks(obj){//obj是td
var content = $(obj).attr("content");
if(content != null && content != ''){
if($(obj).attr("isDetail") == 'true'){//当前显示的是详细备注,切换到显示部分
//$(obj).removeAttr('isDetail');//remove也可以
$(obj).attr('isDetail',false);
$(obj).html(getPartialRemarksHtml(content));
}else{//当前显示的是部分备注信息,切换到显示全部
$(obj).attr('isDetail',true);
$(obj).html(getTotalRemarksHtml(content));
}
}
}
//部分备注信息
function getPartialRemarksHtml(remarks){
return remarks.substr(0,remarkShowLength) + ' <a href="javascript:void(0);" ><b>...</b></a>';
}
//全部备注信息
function getTotalRemarksHtml(remarks){
return remarks + ' <a href="javascript:void(0);" >收起</a>';
}
相关文章推荐
- Office 365 IT Professional—— 如何限制用户与外部用户共享OneDrive内容?
- C#.NET常见问题(FAQ)-如何让文本框textbox内容限制为数字
- 如何让IE读取本地网页时不提示“Internet Explorer 已经限制此文件显示可能访问您的计算机的活动内容。”
- 替换Word内容的时候如何突破500字符的限制
- 如何在限制页面中显示的内容的字数?
- 如何利用AJAX进行文件的上传,并对上传内容进行限制,在项目中总会遇见这样的问题,下面就为大家举个栗子。 HTML代码 <form id="uploadForm" enctype="multipar
- 如何实现 对输入框的文本内容进行限制的功能
- 如何去掉“为了保护您的安全,IE已限制此文件显示可能访问您的计算机的活动内容,单击此处查看选项”
- 如何将文本框中的内容显示在Gridview控件中【DataTable的用法创建行和列】
- 如何实现 对输入框的文本内容进行限制的功能
- 如何设置让excel的单元格列宽随内容增加而变宽
- 【原】如何实现IE6下块级元素的内容自动收缩
- bootstrap modal插件弹出窗口如何限制最大高度,并且在内容过多时可以滚动显示
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- IOS-如何干掉UITextField的长按手势菜单与输入内容限制
- 如何限制多行输入框的内容的长度
- C#.NET常见问题(FAQ)-如何让文本框textbox内容限制为数字
- EditText如何限制输入内容
- dataTable某列内容过长自动收缩
- 将Word文档发给别人时如何限制别人只能修改文档部分内容