socialforge/public/javascripts/resizeable_table.js

84 lines
3.6 KiB
JavaScript
Raw Normal View History

2016-05-27 14:44:32 +08:00
/**
* Created by ttang on 2016/5/24.
*/
2016-06-24 15:54:56 +08:00
/* $(document).ready(function(){
2016-06-02 13:45:06 +08:00
$("th").each(function(){
$(this).css("width",$(this).width()-1);
});
2016-06-01 13:46:05 +08:00
resizeable_table = function(colS,colE,p1,p2){
2016-05-27 14:44:32 +08:00
var headerTds = document.getElementById("homework_table").rows[0].cells;
var mousedown = false;
var resizeable = false;
var targetTd;
var screenXStart =0;
var tdWidth = 0;
var headerWidth = 0;
var tblObj = document.getElementById("homework_table");
var tblWidth = tblObj.offsetWidth;
for(var i = colS;i<colE;i++){
addListener(headerTds[i],"mousedown",onmousedown);
addListener(headerTds[i],"mousemove",onmousemove);
2016-06-07 15:30:17 +08:00
addListener(headerTds[i],"mouseup",onmouseup);
2016-05-27 14:44:32 +08:00
}
function onmousedown(event){
if (resizeable == true){
var evt =event||window.event;
mousedown = true;
screenXStart = evt.screenX;
tdWidth = targetTd.offsetWidth;
tdWidth2 = targetTd.nextElementSibling.offsetWidth;
2016-06-01 13:46:05 +08:00
totalWidth = tdWidth + tdWidth2;
2016-05-27 14:44:32 +08:00
}
}
function onmousemove(event){
var evt =event||window.event;
var srcObj = getTarget(evt);
var offsetX = evt.offsetX || (evt.clientX - srcObj.getBoundingClientRect().left);//这个比较关键解决了Firefox无offsetX属性的问题
if (mousedown == true){
2016-06-01 13:46:05 +08:00
var width = (tdWidth + (evt.screenX - screenXStart)) - p1 + "px";//计算后的新的宽度
var width2 = (tdWidth2 - (evt.screenX - screenXStart)) - p2 + "px";
2016-06-23 14:58:40 +08:00
if (parseInt(width)<5 || parseInt(width2)<5 || tdWidth > totalWidth || tdWidth2 > totalWidth){
2016-06-01 13:46:05 +08:00
tartgetTd = null;
resizeable = false;
mousedown = false;
2016-05-27 14:44:32 +08:00
}else{
targetTd.style.width = width;
targetTd.nextElementSibling.style.width = width2;
}
}else{
var trObj = tblObj.rows[0];
2016-06-07 15:30:17 +08:00
if(srcObj.offsetWidth - offsetX <=5){//实际改变本单元格列宽
2016-05-27 14:44:32 +08:00
targetTd=srcObj;
resizeable = true;
2016-06-07 15:30:17 +08:00
for(var i = colS;i<colE;i++){
headerTds[i].style.cursor='col-resize';//修改光标样式
};
2016-05-27 14:44:32 +08:00
}else{
resizeable = false;
2016-06-01 16:09:01 +08:00
mousedown = false;
2016-05-27 14:44:32 +08:00
srcObj.style.cursor='default';
}
}
}
2016-06-07 15:30:17 +08:00
function onmouseup(event){
tartgetTd = null;
resizeable = false;
mousedown = false;
document.body.style.cursor='default';
}
2016-06-01 16:09:01 +08:00
document.body.onmouseup = function(event){
2016-05-27 14:44:32 +08:00
tartgetTd = null;
resizeable = false;
mousedown = false;
document.body.style.cursor='default';
}
function getTarget(evt){
return evt.target || evt.srcElement;
}
function addListener(element,type,listener,useCapture){
element.addEventListener?element.addEventListener(type,listener,useCapture):element.attachEvent("on" + type,listener);
}
}
2016-06-24 15:54:56 +08:00
});
*/