如何限制datatable列宽--(收缩内容)
2021-8-10 前端达人 前端及开发文章及欣赏
var remarkShowLength = 10;//默认现实的字符串长度
"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 {
}
}
]
//切换显示备注信息,显示部分或者全部 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>'; }
原文链接:https://blog.csdn.net/zz_chst/article/details/79587936?utm_source=blogxgwz5
蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
*博客内容为网友个人发布,仅代表博主个人观点,如有侵权请联系工作人员删除。