首页 > 其他 > 详细

easyui 操作列固定在右侧,其余列可横向滚动

时间:2020-04-20 15:07:27      阅读:519      评论:0      收藏:0      [点我收藏+]

1、页面css添加下面代码。

.datagrid-view1 {
left: auto;
right: 0;
}
.datagrid-view2 {
left: 0;
right: auto;
}
.datagrid-view2 .datagrid-body {
padding-right: 21px;
}

2、在datagrid的onLoadSuccess方法内执行以下js即可实现。

$(".datagrid-view1 .datagrid-body").css("overflow-y", "auto");
var timer1 = null;
var timer2 = null;
function a() {
$(".datagrid-view1 .datagrid-body").scroll(function () {
clearTimeout(timer1);
// 解除滚动监听事件,否则两个滚动条一起监听,会导致互相影响
$(".datagrid-view2 .datagrid-body").unbind("scroll");
// 禁止另外一个滚动条滚动,只有在下面定时器绑定事件后才允许滚动
$(".datagrid-view2 .datagrid-body").on(‘scroll mousewheel touchmove‘, function (e) {
e.preventDefault();
e.stopPropagation();
return false;
});
$(".datagrid-view2 .datagrid-body").scrollTop($(".datagrid-view1 .datagrid-body").scrollTop());
timer1 = setTimeout(function () {
$(".datagrid-view2 .datagrid-body").unbind(‘scroll mousewheel touchmove‘);
b();
}, 1000);
});
}
function b() {
$(".datagrid-view2 .datagrid-body").scroll(function () {
clearTimeout(timer2);
$(".datagrid-view1 .datagrid-body").unbind("scroll");
$(".datagrid-view1 .datagrid-body").on(‘scroll mousewheel touchmove‘, function (e) {
e.preventDefault();
e.stopPropagation();
return false;
});
$(".datagrid-view1 .datagrid-body").scrollTop($(".datagrid-view2 .datagrid-body").scrollTop());
timer2 = setTimeout(function () {
$(".datagrid-view1 .datagrid-body").unbind(‘scroll mousewheel touchmove‘);
a();
}, 1000);
});
}
a();
b();


easyui 操作列固定在右侧,其余列可横向滚动

原文:https://www.cnblogs.com/hpwlym/p/12737743.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!