bootstrap 单元格内容悬框

bootstrap 单元格内容悬框

JS代码
为columns[]中的对象添加formatter属性并指定调用方法

 var templateTableParams = {
        classes: "table table-bordered table-hover",
        url: "后台访问路经",
        method: 'post',
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        cache: false,     //是否使用缓存，默认为true
        striped: true,    //是否显示行间隔色
        singleSelect: true,   //单选
        clickToSelect: true,  //是否启用点击选中行
        height:600,
        queryParams:function () {
            var params = {
                djh: $("#djh").val(),
                jhlb: $("#jhlb").val(),
                lxdh:$("#lxdh").val(),
                orderNo:$("#orderNo").val(),
                itemCode: $("#itemCode").val(),
                itemName: $("#itemName").val(),
                startDate:$('#startDate').val(),
                endDate:$('#endDate').val()
            };
            return params;
        },
        columns: [
            {
                checkbox: true
            },
            {
                title: '序号', halign: "center", align: 'center',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            },
    {
        field: 'djh', title: '单据号',halign:"center"
    },

    {
        field: 'jhlb', title: '计划类别', align:'center',halign:"center"

    },
    {
        field: 'lrrname', title: '采购员',align:'center', halign:"center",formatter :'paramsMatter'
    }
        ],
        cardView:(function(){ return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent); })(),
        trimOnSearch: true,
        onlyInfoPagination:false,//显示总记录数  必须打开pagination=true
        pagination: false,      //显示分页
        pageNumber: 1,             //初始化加载第一页，默认第一页
        pageSize:10,               //每页记录数
        pageList:[5,10,20],     //可供选择的每页的行数
        idField: 'id',
        uniqueId: 'id',
        smartDisplay:false     
    };
       //表格超出宽度鼠标悬停显示td内容
    function paramsMatter(value,row,ind   ex, field) {
        var span=document.createElement('span');
        span.setAttribute('title',value);
        span.innerHTML = value;
        return span.outerHTML;
    }

页面效果如下

鼠标放到单元格上就会出现一个悬框展示单元格中的内容，悬框的宽度取决单元格的数据量