boostraptable 创建表格过程
1。插入<table></table>标签
<div id="totalCal" style="width: 940px">
<!--插入表格样式-->
<table id="tb" style="width: 940px;background-color: #0D223F; " table table-bordered>
</table>
<!-- <span class="m_b">回路: </span> -->
</div>
2.动态创建表格(客户端方式调用)
function init(newSelects) {
// body...
$('#tb').bootstrapTable({
data: newSelects,
toolbar: '#toolbar',
pagination: true, //是否显示分页
striped: true, //表格显示条纹,默认为false
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
pageList: [10, 20], // 设置页面可以显示的数据条数
pageNumber: 1, // 首页页码
pageSize: 10,//单页记录数
sortName: 'disname',
sidePagination: "client",
columns: [{
field: 'disname',
title: '塔号',
align: 'center',
valign: 'middle'
},
{
field: 'dis',
title: '导线对地最短距离',
align: 'center',
valign: 'middle'
}, {
field: 'mdis',
title: '弧垂最低点',
align: 'center',
valign: 'middle'
}, {
field: 'gotoLoad',
title: '定位',
align: 'center',
valign: 'middle',
formatter: operateFormatter //自定义表单
}
],
responseHandler: function (data) {
return data.rows;
}
});
}
//格式化操作
function operateFormatter(value, row, index) {
var towerid=row.towerid;
return ['<i class="layui-icon" lay-event="local" style="cursor:pointer" onclick=GotoLoad("'+towerid+'",'+row.lon+','+row.lat+','+row.alt+')></i>',].join('');
}
//定位
function GotoLoad(towerid,lon, lat, alt) {
// var lon = parseFloat(121.225);
// var lat = parseFloat(22.880);
// var alt = parseFloat(1000);
//开始渲染线
parent.RenderLineBytowerId(towerid);
parent.flyToLocation(lon, lat, alt);
}
3.如何调用
1.初始化数据
$(function () {
var newSelects = '';
init(newSelects);
});
2.填充表格
function CaculateDis() {
var empty = [];
$("#tb").bootstrapTable('load', empty);//清空表格数据
var data1 = parent.GetEvOnlyDistance();
var newSelects = $.parseJSON(data1).data;//load 数据,是数组[object]
$("#tb").bootstrapTable('load', newSelects);//
}
4.遇到问题,表格数据没有清空。原因是由于,后台的List集合在下一次点击后,没有清空,保留上一次的值。