CSS样式
/* 表格组件样式 */
.hide{display: none !important;}
.scroll-table-box {
position: relative;
overflow: hidden;
}
.scroll-table-head {
width: 100%;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
z-index: 98;
}
.scroll-table-body {
max-height: 400px;
overflow: hidden;
position: relative;
}
.scroll-table-box .redDot{
font-size: 13px;
color: red;
position: absolute;
left: 1px;
top: 7px;
}
.scroll-table-fixed-left {
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
z-index: 98;
box-shadow: 0 0 10px -2px;
}
.scroll-table-fixed-left .scroll-table-fixed-left-head {
position: relative;
}
.scroll-table-fixed-left .scroll-table-fixed-left-body {
position: relative;
overflow: hidden;
}
.scroll-table-box .tb1{
width: 100%;
table-layout: fixed;
}
.scroll-table-box .tb1 th,.scroll-table-box .tb1 td{
text-align: center;
}
.scroll-table-box .tb1 th {
line-height: 20px;
box-sizing: border-box;
}
.scroll-table-box .tb1 td{
padding: 8px 3px;
box-sizing: border-box;
}
.scroll-table-box .tb1 td .td_div{
line-height: 16px;
text-align: center;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
}
.scroll-table-box .tb1 td .td_div .td_div_text{
display: inline-block;
font-size: 12px;
*display: inline;
*zoom: 1;
}
.scroll-table-box .tb1 td .td-input {
width: 60px;
color: red;
text-align:center;
text-indent: 0px;
border: 1px solid #A5A5A5;
box-sizing: border-box;
}
.scroll-table-box .tb1 td .td_div input{
display: inline-block;
width: 98%;
text-align: center;
font-size:12px;
*display: inline;
*zoom: 1;
}
.scroll-table-box .tb1 .bug-tr td{
border-bottom: none;
}
.scroll-table-box .tb1 .no-data-tr td{
border-bottom: none;
}
.scroll-bar-box {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
padding: 0 22px;
background-color: #d6d6d6;
opacity: .8;
box-sizing: border-box;
z-index: 99;
}
.scroll-bar-box .left-arrow{
width: 20px;
height: 10px;
position: absolute;
left: 0px;
top: 0px;
margin: 0;
background: #fff;
}
.scroll-bar-box .right-arrow{
width: 20px;
height: 10px;
position: absolute;
right: 0px;
top: 0px;
margin: 0;
background: #fff;
}
.arrow {
display: inline-block;
margin: 0;
font-size: 22px;
background: transparent;
*display: inline;
*zoom: 1;
}
.scroll-bar-box .left-arrow .icon-zuojiantoushixinxiao,
.scroll-bar-box .right-arrow .icon-youjiantoushixinxiao{
width: 100%;
height: 10px;
line-height: 10px;
}
.scroll-bar {
position: absolute;
left: 22px;
top: 0;
height: 100%;
background-color: #848484;
cursor: pointer;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.scroll-bar-box:hover {
opacity: .9;
}
.v-scroll-bar-box {
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 100%;
padding: 22px 0px;
background-color: #d6d6d6;
opacity: .8;
box-sizing: border-box;
z-index: 99;
}
.v-scroll-bar-box .up-arrow{
width: 10px;
height: 20px;
position: absolute;
left: 0px;
top: 0px;
margin: 0;
background: #fff;
}
.v-scroll-bar-box .down-arrow{
width: 10px;
height: 20px;
position: absolute;
left: 0px;
bottom: 0px;
margin: 0;
background: #fff;
}
.v-scroll-bar-box .up-arrow .icon-shangjiantoushixinxiao,
.v-scroll-bar-box .down-arrow .icon-xiajiantoushixinxiao{
width: 100%;
height: 20px;
line-height: 20px;
position: absolute;
left: -6px;
}
.v-scroll-bar {
position: absolute;
left: 0;
top: 22px;
width: 100%;
height:50px;
background-color: #848484;
cursor: pointer;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.v-scroll-bar-box:hover {
opacity: .9;
}
.no_border_top th,
.no_border_top td{
border-bottom: none;
}
JS代码
/* move.js */
function transform(el,attr,val){
if(!el.transform){
el.transform = {
};
}
if(val === undefined){
return el.transform[attr];
}
el.transform[attr] = val;
var str = "";
for(var s in el.transform){
switch(s){
case "rotate":
case "rotateX":
case "rotateY":
case "rotateZ":
case "skewX":
case "skewY":
str += s +"("+el.transform[s]+"deg) ";
break;
case "scale":
case "scaleX":
case "scaleY":
str += s +"("+el.transform[s]+") ";
break;
case "translateX":
case "translateY":
case "translateZ":
str += s +"("+el.transform[s]+"px) ";
break;
}
}
el.style.WebkitTransform = el.style.transform = str;
}
function css(el,attr,val){
var transformAttr = ["rotate","rotateX","rotateY","rotateZ","skewX","skewY","scale","scaleX","scaleY","translateX","translateY","translateZ"];
for(var i = 0; i < transformAttr.length; i++){
if(attr == transformAttr[i]){ //如果 attr 等transform其中一个值就代表用用户想要操作的是 transform
return transform(el,attr,val);
}
}
if(val === undefined){
val = getComputedStyle(el)[attr];
// console.log(val);
val = parseFloat(val);
return val;
}
if(attr == "opacity"){
el.style[attr] = val;
} else {
el.style[attr] = val + "px";
}
}
/*固定表格滑动脚本开始*/
function tableSwiperFunc(init) {
/*表格主滑动区域*/
var wrap_body = init.wrap_body;
var scroll_body = init.scroll_body;
var wrap_body_width = 0;
var wrap_body_height = 0;
var scroll_body_width = 0;
var scroll_body_height = 0;
/*表格头部区域*/
var wrap_head = init.wrap_head;
var scroll_head = init.scroll_head;
/*表格左边固定区域*/
var left_wrap_body = init.left_wrap_body;
var left_scroll_body = init.left_scroll_body;
transform(scroll_body, "translateX", 0);
transform(scroll_body, "translateY", 0);
transform(scroll_head, "translateX", 0);
transform(left_scroll_body, "translateY", 0);
/* 竖向滚动条 */
var verticalBarHeight = 0; // 设置竖向滚动条的初始高度
var verticalBoxHeight = 0; // 设置竖向滚动条外层父级的高度
var verticalBarRange = []; // 竖向滚动条滚动范围
var verticalAreaRange = []; // 竖向区域滚动范围
function setVerticalBar() {
wrap_body_height = $(wrap_body).height();
scroll_body_height = $(scroll_body).height();
verticalBoxAllHeight = wrap_body_height - 7; // 包括内边距
verticalBoxHeight = verticalBoxAllHeight - 44; // 可滑动的区域高度
if (scroll_body_height <= wrap_body_height) {
verticalBarHeight = 0;
$(init.vertical_bar).parent().css({height: '0', visibility: 'hidden'});
} else {
verticalBarHeight = (wrap_body_height/scroll_body_height)*verticalBoxHeight;
$(init.vertical_bar).parent().css({height: verticalBoxAllHeight, visibility: 'visible'});
if (verticalBarHeight<50) {
verticalBarHeight = 50;
}
}
$(init.vertical_bar).height(verticalBarHeight);
verticalBarRange = [22,verticalBoxHeight - verticalBarHeight + 22];
verticalAreaRange = [0,scroll_body_height - wrap_body_height];
}
setVerticalBar();
//竖向滚动条滚动事件
var startY = 0;
var endY = 0;
var top = 22;
var elemTargetY = 0;
function down1(e){
setVerticalBar();
startY = e.clientY;
top = $(init.vertical_bar).position().top;