bootstrap table

1bootstrap table表格单元格信息过长显示省略...，悬停显示详细信息

在定义的表格中添加如下属性

<table id="policeAssessmentTable" style="table-layout:fixed;"></table>

引入myTable.css

.colStyle {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

在实例化表格的属性中添加如下属性

{
            field: 'specialTime',
            title: '专题时间',
            align: 'center',
            valign: 'middle',
            sortable: true,
            class: 'colStyle',//重点
            sortable: true,
            formatter: specialTimeMatter//重点
        }, {
            field: 'trainSummary',
            title: '培训总结',
            align: 'center',
            valign: 'middle',
            class: 'colStyle',
            sortable: true,
            formatter: trainSummaryMatter
        }

定义对应的方法

//自定义表格宽度,超出部分文字隐藏,悬浮显示
function specialTimeMatter(value, row, index) {
    var values = row.specialTime;
    if (values == undefined) {
        return "-";
    }
    var specialTimespan = document.createElement('span');
    specialTimespan.setAttribute('title', values);
    specialTimespan.innerHTML = values;
    return specialTimespan.outerHTML;
}

function trainSummaryMatter(value, row, index) {
    var values = row.trainSummary;
    if (values == undefined) {
        return "-";
    }
    //values = values.replace(/\s+/g,' ')//替换空格
    // values = values.replace(/\},/,'},');//换行
    var span = document.createElement('span');
    span.setAttribute('title', values);
    span.innerHTML = values;
    return span.outerHTML;
}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

2设置带着已选中的复选框分页

 paginationFirstText: "首页",
 paginationPreText: "上一页",
 paginationNextText: "下一页",
 paginationLastText: "末页", 
 maintainSelected:true,              //	设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项。
        //height:500,
        columns: [{
            checkbox: true,
            align: 'center',
            valign: 'middle',
            formatter: function (i,row) {            // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
                if($.inArray(row.specialId,Array.from(overAllIds))!=-1){    // 因为 Set是集合,需要先转换成数组
                    return {
                        checked : true               // 存在则选中
                    }
                }
            }
        }

function checkBoxEvent() {
    $('#tb_departments').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows){
        var datas = $.isArray(rows) ? rows : [rows];        // 点击时获取选中的行或取消选中的行
        examine(e.type,datas);                                 // 保存到全局 Set() 里
    });
}

var overAllIds = new Array();  //全局数组

function examine(type,datas){
    if(type.indexOf('uncheck')==-1){
        $.each(datas,function(i,v){
            // 添加时，判断一行或多行的 id 是否已经在数组里 不存则添加　
            overAllIds.indexOf(v.xh) == -1 ? overAllIds.push(v.xh) : -1;
        });
    }else{
        $.each(datas,function(i,v){
            overAllIds.splice(overAllIds.indexOf(v.xh),1);    //删除取消选中行
        });
    }

    //console.log(overAllIds);
}

调用,在页面加载函数中调用 checkBoxEvent();

获取选中的值

function{ 
/**var policeAssessmentIdList = $('#tb_departments').bootstrapTable('getSelections');
        var policeAssessmentIdArray = [];
        for (var i = 0; i < policeAssessmentIdList.length; i++) {
            policeAssessmentIdArray.push(policeAssessmentIdList[i].xh);
            }
            alert(policeAssessmentIdArray.toString())
*/
        alert(overAllIds.toString);//此处取到所有选中的值
}

//点击选中行，改变选中行的背景颜色
function changeColor(tableid){
    $(tableid).on('click-row.bs.table', function (e, row, element){
        $('.success').removeClass('success');//去除之前选中的行的，选中样式
        $(element).addClass('success');//添加当前选中的 success样式用于区别
        var index = $(tableid).find('tr.success').data('index');//获得选中的行的id
        //alert(index);
    });
}