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

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();


上一篇:jquery easyui datagrid()--数据网格操作(二)(--可编辑的数据--)


下一篇:jeecg 笔记之 界面常用整理 - 方便复制粘贴