使用展开和收起处理table 表格列文本过长

# 场景：

在做后台页面时，经常用到表格，有时候表格列的内容过长，导致所在行拉的很高，严重影响美观性和可用性。

# 解决方案：

1. 不展示内容过长的列。如果没有必要可以不展示或者另放在一个详情页面，毕竟表格宽度有限，只需要展示关键列。

2. 截取展示，只展示内容的前几个字，比如20字，后面省略号，点击省略号展开详情，这种只适合中等长度的列。

3. 当内容实在很长，可以考虑使用弹出框加滚动条的效果，这样多长的内容都能拿的下。

# 记录第二种截取展示

思路：一般现成的表格组件都对列提供格式化函数，可以在列格式化时，进行判读当内容大于界限时，展示部分内容，但是需要把完整的内容放在td的自定义属性中，并加上一个点击相应行数，再这个函数中判断当前是否是完整内容，部署在获取自定义中的完整内容，在展示出来。

#代码（以data-table为例）

列格式化函数：

createdCell(td, cellData, item, row, col) {
    if (item.errorRecord) {
    var part = ''
    $(td).attr("content",item.errorRecord);
    if(item.errorRecord.length > 50){//只有超长，才有td点击事件
         part = getPartialRemarksHtml(item.errorRecord);//显示部分信息
        $(td).attr('isDetail',false);
        $(td).attr('onclick','javascript:changeShowRemarks(this);');
    } else {
         part = item.errorRecord
        $(td).attr('isDetail',true);
    }
   $(td).html(part);
  }
}

展开收起函数：

function changeShowRemarks(obj) {//obj是td
    var content = $(obj).attr("content");
    if (content != null && content != '') {
        if ($(obj).attr("isDetail") == 'true') {//当前显示的是详细备注，切换到显示部分
            $(obj).attr('isDetail', false);
            $(obj).html(getPartialRemarksHtml(content));
        } else {
            //当前显示的是部分备注信息，切换到显示全部
            $(obj).attr('isDetail', true);
            $(obj).html(getTotalRemarksHtml(content));
        }
    }
}

//部分备注信息
function getPartialRemarksHtml(remarks) {
    return remarks.substr(0, 50) + '&nbsp;&nbsp;<a href="javascript:void(0);" ><b>...</b></a>';
}

//全部备注信息
function getTotalRemarksHtml(remarks) {
    return remarks + '&nbsp;&nbsp;<a href="javascript:void(0);" ><span class="glyphicon glyphicon-chevron-up"></a>';
}
 

ps: 参考其它大神的