<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrapTable</title>
<script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
<script src="../../widgets/dnQuery/lib/bootstrapTable/bootstrap-table.js"></script>
<link rel="stylesheet" href="../../widgets/dnQuery/lib/bootstrapTable/bootstrap-table.css"/>
<link rel="stylesheet" type="text/css" href="../../libs/bootstrap/css/bootstrap.min.css">
<style>
.colStyle {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div style="width: 300px;height: 300px">
<table id="staArea" class="table"></table>
</div>
<script>
window.onload = function () {
var areaData = [
{type:"林地",area:1523},
{type:"草地",area:5523},
{type:"耕地",area:2523},
];
$('#staArea').bootstrapTable('destroy').bootstrapTable({
columns: [
{
field: '',
title: '序号',
formatter: function (value, row, index) {
return index+1;
},
align:'center',
halign:'center',
valign:'middle'
},{
field: 'type',
title: '类型',
align:'center',
halign:'center',
valign:'middle'
},{
field: 'area',
title: '面积/公顷',
align:'center',
halign:'center',
valign:'middle',
//width: 250,
class:'colStyle',//表中内容过长,显示省略号
formatter(value, row, index){//内容过长省略的内容,鼠标放上去显示
var values = value;
var span=document.createElement('span');
span.setAttribute('title',values);
span.innerHTML = value;
return span.outerHTML;
},{
title: '操作',
formatter: function (value, row, index) {//表格中增加按钮
var btnString = '<button id="returnInfo">详细信息</button>';
return btnString;
},
events: operateEvents,//给按钮注册事件
align:'center',
halign:'center',
valign:'middle'
}],
data: areaData,
striped:true,
height:400,//表格的高度
sortName:sort_name,//按照这个排序
sortOrder:'desc', //降序排列;默认增序(asc)
search:true, //搜索框
pagination:true, //设置为 true 会在表格底部显示分页条。
paginationLoop:false, //设置为 true 启用分页条无限循环的功能。
pageSize:5,//每页初始显示的条数
pageList:[10,15,20],
showFooter:true,//显示列脚
onDblClickRow:function(row){
},
})
}
</script>
</body>
</html>
注意:
class:'colStyle',//表中内容过长,显示省略号
formatter(value, row, index){//内容过长省略的内容,鼠标放上去显示
var values = value;
var span=document.createElement('span');
span.setAttribute('title',values);
span.innerHTML = value;
return span.outerHTML;
}
//操作中的按钮点击事件注册
window.operateEvents = {
'click #returnInfo': function (e, value, row, index) {
}
};
需要配合width使用