js table内容过长时，显示部分内容，鼠标悬浮显示全部 - 潇潇love涛涛

js table内容过长时，显示部分内容，鼠标悬浮显示全部

当table内容过长时，显示部分内容，鼠标悬浮显示全部

当前问题

如果输入框没有做字符长度限制，会导致table的某一列显示内容过长，这样会导致table布局发生改变，而且显示不美观。如图：

解决方案

直接上代码吧：
CSS代码如下：

<style>
        td{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            max-width: 240px;
        }
</style>

table代码如下：

$(function() {

            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "无人机",
                showRefresh: false,                   // 是否显示刷新按钮
                showColumns: false,                   // 是否显示隐藏某列下拉框
                showToggle: false,                     // 是否显示详细视图和列表视图的切换按钮
                showExport: false,
                columns: [
                {
                    field: \'id\',
                    title: \'id\',
                    visible: false
                },
                {
                    field: \'droneCode\',
                    title: \'无人机编号\',
                    formatter: paramsMatter
                },
                {
                    field: \'droneName\',
                    title: \'无人机名称\',
                    formatter: paramsMatter
                },
                {
                    field: \'droneModel\',
                    title: \'无人机型号\',
                    formatter: paramsMatter
                },
                {
                    field: \'operateUser\',
                    title: \'操作人员\'
                },
              /*  {
                    field: \'patrolRange\',
                    title: \'巡检范围\'
                },*/
                    {
                        field: \'deptName\',
                        title: \'部门名称\',
                        visible: dept_vis
                    },
                {
                    title: \'操作\',
                    align: \'center\',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if(100 == deptId){
                            actions.push(\'<a class="btn btn-primary btn-xs " href="javascript:void(0)" onclick="configDept(\\'\' + row.id + \'\\')"><i class="fa fa-sitemap"></i>设置部门</a> \');
                        }
                        actions.push(\'<a class="btn btn-success btn-xs \' + editFlag + \'" href="javascript:void(0)" onclick="$.operate.edit(\\'\' + row.id + \'\\')"><i class="fa fa-cogs"></i>巡检设置</a> \');
                        actions.push(\'<a class="btn btn-danger btn-xs \' + removeFlag + \'" href="javascript:void(0)" onclick="$.operate.remove(\\'\' + row.id + \'\\')"><i class="fa fa-remove"></i>删除</a>\');
                        return actions.join(\'\');
                    }
                }]
            };
            $.table.init(options);
        });

鼠标悬停显示全部功能 JS代码如下：

//表格超出宽度鼠标悬停显示td内容
        function paramsMatter(value,row,index) {
            var span=document.createElement("span");
            span.setAttribute("title",value);
            span.innerHTML = value;
            return span.outerHTML;
        }

展示效果如下图：