js 表格排序(编辑+拖拽+缩放)

Table

body{ font-size:12px}
#tab{ border-collapse: collapse;}
.edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;}
#tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94}
#tab tbody td{ overflow:hidden}
#tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; }
#tab td.tc{text-align:center;}
.cc{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;}
#tab td.red{border-color:#f30;}
.ww{height:100%;width:1px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize}

.line{ width:2px; background-color:#999999; position:absolute; display:none}

var Sys = (function(ua){
var s = {};
s.IE = ua.match(/msie ([\d.]+)/)?true:false;
s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false;
s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false;
s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;
s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;
s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;
return s;
})(navigator.userAgent.toLowerCase());
function $(Id){
return document.getElementById(Id);
};
function addListener(element,e,fn){
element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
};
function removeListener(element,e,fn){
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
};
var Css = function(e,o){
if(typeof o=="string")
{
e.style.cssText=o;
return;
}
for(var i in o)
e.style[i] = o[i];
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
};
};
var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
};
};
var Extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
};
};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var Table = new Class({
initialize : function(tab,set){
this.table = tab;
this.thead = tab.getElementsByTagName('thead')[0]; //常用的dom元素做成索引
this.theadtds = this.thead.getElementsByTagName('td'); //
this.rows = []; //里面tbodys记录所有tr的引用 这里用数组记录是因为数组有reverse方法,可以用来正序,反序
this.clos = {}; //里面记录所有列元素的引用
this.edits = {}; //编辑表格的规则和提示
this.sortCol = null; //记录哪列正在排序中
this.inputtd = null; //记录哪个input被编辑了
this.closarg ={
tdnum : null,
totdnum : null,
closmove : BindAsEventListener(this,this.closmove),
closup : BindAsEventListener(this,this.closup)
};//关于列拖拽的一些属性方法
this.widtharg ={
td : null,
nexttd : null,
x : 0,
tdwidth : 0,
nexttdwidth : 0,
widthmove : BindAsEventListener(this,this.widthmove),
widthup : BindAsEventListener(this,this.widthup)
};
var i=0,j=0,d=document,rows =tab.tBodies[0].rows,tds1 = tab.tBodies[0].getElementsByTagName('td'),edit=[];
var divs = this.thead.getElementsByTagName('div');
this.input = d.createElement('input'); //编辑用的input
this.input.type = "text";
this.input.className = 'edit';
this.img = d.body.appendChild(d.createElement('div'));
this.img.className ="cc" ;
this.line = d.body.appendChild(d.createElement('div'));
this.line.className = 'line';
this.line.style.top = tab.offsetTop +"px";
if(Sys.IE6){
this.checkbox = {}; //记录那些checkbox被选中了 处理ie6不兼容的问题
var checkboxs = tab.getElementsByTagName('input'),k =0;
for(var lll=checkboxs.length;kthis.widtharg.tdwidth-35)
left = this.widtharg.x - this.widtharg.tdwidth+35;
}
if(clientx>this.widtharg.x)
{
if(clientx - this.widtharg.x>this.widtharg.nexttdwidth-35)
left = this.widtharg.x + this.widtharg.nexttdwidth-35;
}
Css(this.line,{display:"block",left:left+"px"});
},
widthup : function(e){
this.line.style.display = "none";
var x= parseInt(this.line.style.left) - this.widtharg.x;
this.widtharg.nexttd.style.width = this.widtharg.nexttdwidth -x +'px';
this.widtharg.td.style.width = this.widtharg.tdwidth + x +'px';
removeListener(document,'mousemove',this.widtharg.widthmove);
removeListener(document,'mouseup',this.widtharg.widthup);
},
closdrag : function(e){
e = e || window.event;
var obj = e.srcElement ||e.target;
if(obj.nodeName.toLowerCase()=="span")obj =obj.parentNode;
this.closarg.tdnum = obj.getAttribute('clos');;
addListener(document,'mousemove',this.closarg.closmove);
addListener(document,'mouseup',this.closarg.closup);
},
closmove : function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
Css(this.img,{display:"block",left:e.clientX+9+"px",top:e.clientY+20+"px"});
},
closup : function(){
this.img.style.display = "none";
removeListener(document,'mousemove',this.closarg.closmove);
removeListener(document,'mouseup',this.closarg.closup);
if(this.closarg.totdnum==this.closarg.tdnum)return;
var rows =this.table.getElementsByTagName('tr'),tds,n,o;
if((parseInt(this.closarg.tdnum)+1)==parseInt(this.closarg.totdnum))
{
o = this.closarg.tdnum;
n = this.closarg.totdnum;
}
else
{
n = this.closarg.tdnum;
o = this.closarg.totdnum;
}
for(var i=0,l=rows.length;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]