bootstrap-table 滚动条时错位
横向滚动条，拉到最右边，经过input栏位 触发updateCell 方法 就会造成标题栏错位，但是滚动条随便拉一下，又好了，请问这个要怎么解决。有人遇到过吗
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet"href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<style>
.table{
font-size: 12px;
}
.form-control{
font-size: 12px;
}
</style>
</head>
<body>
<body class="white-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 select-table" style="width:1000px;">
<table id="bootstrap-table"></table>
</div>
</div>
</div>
</div>
<script type="text/javascript" >
var data = [{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}
,{"id1":"测试1","id2":"测试2","id3":"测试3","id4":"测试4","id5":"测试5","id6":"测试6","id7":"测试7","id8":"测试8","id9":"测试9","id10":"测试10","id11":"测试11","id12":"测试12","id13":"测试13","id14":"测试14","id15":"测试15","id16":"测试16"}];
$('#bootstrap-table').bootstrapTable({
data: data,
height: 500,
pagination: true,
showSearch: false,
showColumns: false,
showExport:true,
showRefresh: true,
toolbar: "toolbar",
uniqueId: "id1",
sidePagination: "client",
pageSize: 50,
pageList: [50,500,1000,3000,5000],
columns: [
{
field: 'id1',
title: 'id1111111111111111111111111111111111111111',
},
{
field: 'id2',
title: 'id22222222222222222222222222222222222222222',
},
{
field: 'id3',
title: 'id33333333333333333333333333333333333333333333',
formatter: function(value, row, index) {
var div = "<div style='width:150px;'>"+value+"</div>";
return div;
}
},
{
field: 'id4',
title: 'id44444444444444444444444444444444444',
},
{
field: 'id5',
title: 'id55555555555555555555555555555555555555555',
},
{
field: 'id6',
title: 'id666666666666666666666666666666666',
formatter: function(value, row, index) {
var div = "<div style='width:150px;'>"+value+"</div>";
return div;
}
},
{
field: 'id7',
title: 'id7777777777777777777777777777777777777777777',
formatter: function(value, row, index) {
var div = "<div style='width:150px;'>"+value+"</div>";
return div;
}
},
{
field: 'id8',
title: 'id888888888888888888',
},
{
field: 'id9',
title: 'id999999999999999',
},
{
field: 'id10',
title: 'id1000000000000000000',
formatter: function (value, row, index) {
return sprintf('<input class="form-control" type="text" required name="id10" style="background:#E1FFFF;border-color:#c66161;width: 150px;" value="%s" onblur="changeRowData(' + index + ', this);" />', value);
}
},
{
field: 'id11',
title: 'id11111111111111111111',
},
{
field: 'id12',
title: 'id122222222222222222',
formatter: function (value, row, index) {
return sprintf('<input class="form-control" type="text" required name="id10" style="background:#E1FFFF;border-color:#c66161;width: 150px;" value="%s" onblur="changeRowData(' + index + ', this);" />', value);
}
},
{
field: 'id13',
title: 'id13333333333333333333',
formatter: function (value, row, index) {
return sprintf('<input class="form-control" type="text" required name="id10" style="background:#E1FFFF;border-color:#c66161;width: 150px;" value="%s" onblur="changeRowData(' + index + ', this);" />', value);
}
},
{
field: 'id14',
title: 'id1444444444444444444444',
},
{
field: 'id15',
title: 'id155555555555555555555',
},
{
field: 'id16',
title: 'id16666666666666666666666',
}],
//height: tableHeight,
//pagination: true,
//pageSize: 20,
//pageList: [20,50,100,500,1000,3000],
});
function changeRowData(index, obj) {
var value = $(obj).val();
var name = $(obj).attr('name');
//var row = $("#bootstrap-table").bootstrapTable('getData')[index];
//row[name] = value;
$("#bootstrap-table").bootstrapTable('updateCell',{index: index, field: name, value: value});
$('#bootstrap-table').bootstrapTable();
}
function sprintf(str){
var args = arguments, flag = true, i = 1;
str = str.replace(/%s/g, function () {
var arg = args[i++];
if (typeof arg === 'undefined') {
flag = false;
return '';
}
return arg == null ? '' : arg;
});
return flag ? str : '';
}
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论