上图效果:
html:
{
"mData": "summary",
"mRender": function (data, type, row) {
var summarystr = '';
if (row.summary != null) {
if (row.summary.length < 50) {
summarystr = '<div style="word-break:break-all;word-warp:break-word;">' + row.summary + '</div>';
} else {
summarystr = '<div style="word-break:break-all;word-warp:break-word;">'
+ row.summary.substr(0, 50) +
'<br><span style="color:#3ea49d;cursor:pointer;" class="zhan zhan' + row.id + '" dataid="' + row.id + '">' +
'<span style="border: 1px solid #3ea49d;margin:0.5px;padding:0;color:#3ea49d;" >.......展开</span></span>' +
'<span style="display: none;" class="zs' + row.id + '">' + row.summary.substr(50, row.summary.length) +
'<span style="color:#f3565d;cursor:pointer;" class="shou shou' + row.id + '" dataid="' + row.id + '">' +
'<span style="border: 1px solid #f3565d;margin:0.5px;padding:0;color:#f3565d;" >收起</span></span></span></div>';
}
}
var html = [];
html.push(summarystr);
return html.join('');
}
}
js:
//展开和收缩
$(".zhan").live('click', function () {
var strid = $(this).attr("dataid");
$(this).css('display', 'none');
$('.zs' + strid).css('display', 'block');
$('.shou' + strid).css('display', 'block');
});
$(".shou").live('click', function () {
var strid = $(this).attr("dataid");
$(this).css('display', 'none');
$('.zs' + strid).css('display', 'none');
$('.zhan' + strid).css('display', 'block');
});