77 lines
3.5 KiB
JavaScript
77 lines
3.5 KiB
JavaScript
|
/**
|
|||
|
|
* Created by ttang on 2016/5/24.
|
|||
|
|
*/
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
resizeable_table = function(colS,colE,padding){
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onmousedown(event){
|
|||
|
|
if (resizeable == true){
|
|||
|
|
var evt =event||window.event;
|
|||
|
|
mousedown = true;
|
|||
|
|
screenXStart = evt.screenX;
|
|||
|
|
tdWidth = targetTd.offsetWidth;
|
|||
|
|
tdWidth2 = targetTd.nextElementSibling.offsetWidth;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
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){
|
|||
|
|
var width = (tdWidth + (evt.screenX - screenXStart)) - 10 + "px";//计算后的新的宽度
|
|||
|
|
var width2 = (tdWidth2 - (evt.screenX - screenXStart)) - 10 + "px";
|
|||
|
|
console.log(width, width2);
|
|||
|
|
if (width<60){
|
|||
|
|
targetTd.style.width = "60px";
|
|||
|
|
console.log("width<60");
|
|||
|
|
}else if(width2<60){
|
|||
|
|
targetTd.nextElementSibling.style.width2 = "60px";
|
|||
|
|
console.log("width2<60");
|
|||
|
|
}else{
|
|||
|
|
targetTd.style.width = width;
|
|||
|
|
targetTd.nextElementSibling.style.width = width2;
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
var trObj = tblObj.rows[0];
|
|||
|
|
if(srcObj.offsetWidth - offsetX <=4){//实际改变本单元格列宽
|
|||
|
|
targetTd=srcObj;
|
|||
|
|
resizeable = true;
|
|||
|
|
srcObj.style.cursor='col-resize';//修改光标样式
|
|||
|
|
}else if(offsetX <=4 && srcObj.cellIndex > 0){//实际改变前一单元格列宽，但是表格左边框线不可拖动
|
|||
|
|
targetTd=trObj.cells[srcObj.cellIndex - 1];
|
|||
|
|
resizeable = true;
|
|||
|
|
srcObj.style.cursor='col-resize';
|
|||
|
|
}else{
|
|||
|
|
resizeable = false;
|
|||
|
|
srcObj.style.cursor='default';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
document.onmouseup = function(event){
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|