表格的自定义排序编辑拖拽缩放

thomas0988
浏览: 472996 次
性别:
来自: 南阳
最近访客更多访客>>

zzc125
yuyuanhua
小小书僮
dingli123
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

博客分类：
前台
专业知识
终于能闲下来做点自己想做的事情了..
简单表格排序
可以双击编辑自定义编辑后的规则
可拖动列进行列替换
可推动边框进行列宽度的缩放
ie6下中文不自动换行
非ie下字母和数字也不自动换行确实让人恼火
chrome浏览器下点击运行好像问题很大拿到本地测试会比较好
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Table</title>
</head>
<style type="text/css">
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(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_t.bmp);color:#183C94;word-break:break-all}
#tab tbody td{overflow:hidden;word-break:break-all;}
#tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; }
#tab td.tc{text-align:center;}
.div{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;}
.line{ width:2px; background-color:#999999;  position:absolute; display:none}
.dr{height:100%;width:2px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize}
.r{float:right;}
.l{float:left;}
#tab thead td.thover{ background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif);background-repeat:repeat-x;}
</style>
<body >
<table id="tab"  border="0" cellspacing="1" cellpadding="0">
 <thead>
   <tr>
       <td width="80"class="tc" ><span class="l">ID</span><div class="r dr"></div></td>
       <td width="80"class="tc"><span class="l">选中</span><div class="r dr"></div></td>
       <td  width="130" class="tc"><span class="l">姓名</span><div class="r dr"></div></td>
       <td width="130" class="tc" ><span class="l">生日</span><div class="r dr"></div></td>
       <td width="220" class="tc" ><span class="l">备注</span><div class="r dr"></div></td>
   </tr>
  </thead>
  <tbody>
  <tr>
    <td height="16">1</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>小三</td>
    <td>1982-05-27</td>
    <td>杯具,全是杯具</td>
  </tr>
  <tr>
    <td>3</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>李四</td>
    <td>1983-06-27</td>
    <td>恩恩我魔兽技术不错</td>    
  </tr>
  <tr>
    <td>2</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>王五</td>
    <td>1987-05-27</td>
    <td>波斯王子 时之刃还不错</td>    
  </tr>
  <tr>
    <td>4</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>赵六</td>
    <td>1988-05-27</td>
    <td>我叫赵六</td>    
  </tr>
  <tr>
    <td>5</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>朱八</td>
    <td>1984-05-27</td>
    <td>洗洗睡吧</td>    
  </tr>
  <tr>
    <td>6</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>阿斯多夫</td>
    <td>1984-06-27</td>
    <td>阿斯多夫暗室逢灯</td>    
  </tr>
  <tr>
    <td>7</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>杯具</td>
    <td>1984-06-27</td>
    <td>很多的杯具</td>    
  </tr>
  <tr>
    <td>8</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>餐具</td>
    <td>1984-02-27</td>
    <td>很多的餐具</td>    
  </tr>
  <tr>
    <td>8</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>洗具</td>
    <td>1984-08-27</td>
    <td>很多的洗具</td>    
  </tr> 
  <tr>
    <td>9</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>内牛满面</td>
    <td>1984-12-27</td>
    <td>10快一晚</td>    
  </tr>
  <tr>
    <td>10</td>
    <td><input type ="checkbox"><input name="ss" type="radio"  /></td>
    <td>犀利哥</td>
    <td>1984-12-21</td>
    <td>嘿嘿</td>    
  </tr>                        
  </tbody>
</table>
<script language="javascript">
(function(window,undefined){
window.Sys = function (ua){
    var b = {
        ie: /msie/.test(ua) && !/opera/.test(ua),
        opera: /opera/.test(ua),
        safari: /webkit/.test(ua) && !/chrome/.test(ua),
        firefox: /firefox/.test(ua),
        chrome: /chrome/.test(ua)
    },vMark = "";
    for (var i in b) {
        if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
    }
    b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
    b.ie6 = b.ie && parseInt(b.version, 10) == 6;
    b.ie7 = b.ie && parseInt(b.version, 10) == 7;
    b.ie8 = b.ie && parseInt(b.version, 10) == 8;   
    return b;
}(window.navigator.userAgent.toLowerCase());

window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

window.$ = function(Id){
    return document.getElementById(Id);
};
window.addListener = function(element,e,fn){
    !element.events&&(element.events = {});
    element.events[e]&&(element.events[e][addListener.guid++]=fn)||(element.events[e] = {'0':fn});
    element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);
};
window.addListener.guid = 1;
window.removeListener = function(element,e,fn){
    var handlers = element.events[e],type;
    if(fn){
        for(type in handlers)
            if(handlers[type]===fn){
                element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
                delete handlers[type];
            }
    }else{
        for(type in handlers){
            element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]);
            delete handlers[type];
        }
    }        
};
window.setStyle = function(e,o){
    if(typeof o=="string")
        e.style.cssText=o;
    else    
        for(var i in o)
            e.style[i] = o[i];
};

var slice = Array.prototype.slice;
window.Bind = function(object, fun) {
    var args = slice.call(arguments).slice(2);
    return function() {
            return fun.apply(object, args);
    };
};
window.BindAsEventListener = function(object, fun,args) {
    var args = slice.call(arguments).slice(2);
    return function(event) {
        return fun.apply(object, [event || window.event].concat(args));
    }
};
//copy from jQ
window.Extend = function(){
	var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;
	if ( typeof target === "boolean" ) {
		deep = target;
		target = arguments[1] || {};
		i = 2;
	}
	if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
		target = {};
	for(;i<length;i++){
		if ( (options = arguments[ i ]) != null )
			for(var name in options){
				var src = target[ name ], copy = options[ name ];
				if ( target === copy )
					continue;
				if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
					target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
				}	
				else if(copy !== undefined)
					target[ name ] = copy;						
			}
	}
	return target;			
};
window.objPos = function(o){
	var x = 0, y = 0;
	do{x += o.offsetLeft;y += o.offsetTop;}while((o=o.offsetParent));
	return {'x':x,'y':y};
}
window.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;
};
window.hasClass  = function(element, className){ 
	return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)')); 
} ;
window.addClass  = function(element, className) { 
	!this.hasClass(element, className)&&(element.className += " "+className);
} 
window.removeClass = function(element, className) { 
	hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ')); 
} 
})(window);

var Table = new Class({
    options :{
        minWidth : 62
    },
    initialize : function(tab,set){
        this.table      = tab;
        this.rows       = [];             //里面记录所有tr的引用
        this.sortCol    = null;           //记录哪列正在排序中
        this.inputtd    = null;           //记录哪个td正在被编辑了
        this.editconfig = {};             //编辑表格的规则和提示
        this.thead      = tab.getElementsByTagName('thead')[0];
        this.theadTds   = tab.getElementsByTagName('thead')[0].getElementsByTagName('td'); //常常用到的dom集合可以用个属性来引用
        this.tbodyTds   = tab.getElementsByTagName('tbody')[0].getElementsByTagName('td');
        this.closConfig = {
			on    : false,
            td    : null,
            totd  : null
        };
		this.widthConfig = {
			td          : null,
			nexttd      : null,
			x           : 0,
			tdwidth     : 0,
			nexttdwidth : 0
		};
		Extend(this,this.options);
		//不知道原因 反正不设置就会乱跳
		(Sys.ie6||Sys.chrome)&&(tab.width=tab.offsetWidth)
         //记录那些checkbox,radio被选中了   ie6在做dom操作的时候不会记住这些状态
        if(Sys.ie6){
            this.checkbox = {};          
            var checkboxs = tab.getElementsByTagName('input'),i=0,l=checkboxs.length;
            for(;i<l;i++)
                (checkboxs[i].type=="checkbox"||checkboxs[i].type=="radio")&&
                addListener(checkboxs[i],"click",Bind(this,function(elm,i){
                    elm.checked==true?(this.checkbox[i] = elm):(delete this.checkbox[i]);
                },checkboxs[i],i));        
        };
        var i=0,l=set.length,rows =tab.tBodies[0].rows,d=document,tabTads=tab.getElementsByTagName('td'),length=this.theadTds.length;
        //编辑用的input
		this.input = d.createElement('input');  
        this.input.type = "text";
        this.input.className = 'edit';
        //用于显示正在拖拽的div
        this.div = d.body.appendChild(d.createElement('div'));
        this.div.className ="div";
		//进行缩放的时候显示的竖线
		this.line = d.body.appendChild(d.createElement('div'));
		this.line.className = 'line';
		this.line.style.top = objPos(tab).y +"px";
		//遍历set 做一些设置                           
        for(;i<l;i++){
            //给需要排序的猎头绑定事件
            addListener(this.theadTds[set[i].id],'click',Bind(this,this.sortTable,this.theadTds[set[i].id],set[i].type));
            //给需要编辑的表给列定义所需配置
            set[i].edit&&(this.editconfig[set[i].id]={rule:set[i].edit.rule,message:set[i].edit.message});
        }
        //把 所有的tr放到一个数组 用于排序    
        for( i=0,l=rows.length;i<l;i++)
            this.rows[i]=rows[i];
         
                   //遍历所有的td 做一些设置     
        for( i=0,l=tabTads.length;i<l;i++){
            //将头部的td全部做上标记 拖拽的时候要用到
            i<length&&tabTads[i].setAttribute('clos',i);
            //将需要编辑的td添加edit属性
            i>=length&&this.editconfig[i%length]&&tabTads[i].setAttribute('edit',i%length);
        }
        
        //绑定 拖拽 和缩放的操作
        addListener(this.thead,'mousedown',BindAsEventListener(this,this.dragOrWidth));
        
        //拖拽的时候 记录移动到了那列td上
        addListener(this.thead,'mouseover',BindAsEventListener(this,this.theadHover));
		
		//唉
		addListener(this.thead,'mouseout',BindAsEventListener(this,this.theadOut));
        
        //绑定编辑事件 根据e.srcElement or e.target去判断是哪个表格被编辑    
        addListener(tab,'dblclick',BindAsEventListener(this,this.edit));    
        
        //当离开input时候保存下修改的内容
        addListener(this.input,'blur',Bind(this,this.save,this.input));                  
    },
    sortTable :function(td,type){ //td为点击的那个元素 n 为哪一列进行排序 type为进行什么类型的排序
        var frag=document.createDocumentFragment(),span=td.getElementsByTagName('span')[0],str= span.innerHTML;
        if(td===this.sortCol){
            this.rows.reverse();
            span.innerHTML =str.replace(/.$/,str.charAt(str.length-1)=="↓"?"↑":"↓") ;
        }else{
            this.rows.sort(this.compare(td.getAttribute('clos'),type));
            span.innerHTML = span.innerHTML + "↑";
					this.sortCol!=null&&(this.sortCol.getElementsByTagName('span')[0].innerHTML = this.sortCol.getElementsByTagName('span')[0].innerHTML.replace(/.$/,''));//把之前那列排序的标识去掉
        };
        for(var i=0,l=this.rows.length;i<l;i++)
            frag.appendChild(this.rows[i]);
        this.table.tBodies[0].appendChild(frag);
        if(Sys.ie6){
            for(var s in this.checkbox)
                this.checkbox[s].checked = true;
        }
        this.sortCol = td;   //记录哪一列正在排序中          
    },
    compare :function(n,type){
		return function (a1,a2){
			var convert ={
				int    : function(v){return parseInt(v)},
				float  : function(v){return parseFloat(v)},
				date   : function(v){return v.toString()},
				string : function(v){return v.toString()}
			};
			!convert[type]&&(convert[type]=function(v){return v.toString()});
			a1 =convert[type](a1.cells[n].innerHTML);
			a2 =convert[type](a2.cells[n].innerHTML);
			return a1==a2?0:a1<a2?-1:1;           
		};
    },
    edit: function(e){
        var elem = this.inputtd=e.srcElement || e.target;
        if(!elem.getAttribute('edit'))return;
        this.input.value = elem.innerHTML;
        elem.innerHTML = "";
        elem.appendChild(this.input);
        this.input.focus();
    },
    save : function(elem){
		var editinfo=this.editconfig[elem.parentNode.getAttribute('edit')],status={
			"[object Function]" : 'length' in editinfo.rule&&editinfo.rule(this.input.value)||false,        
			"[object RegExp]"   : 'test' in editinfo.rule&&editinfo.rule.test(this.input.value)||false
		}[Object.prototype.toString.call(editinfo.rule)],_self=this;
		//如果不符合条件  修改提示信息
		typeof status != "boolean"&&(editinfo.message = status);
		if(status===true){
			this.inputtd.innerHTML = this.input.value;
			this.inputtd=null;
		}else{
			alert(editinfo.message);
			//firefox下  直接用input.focus()不会执行  用setTimeout可以执行
			setTimeout(function(){_self.input.focus()},0);
		}                     
    },
    theadHover  : function(e){
        var elem = e.srcElement || e.target;
        if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on){
            this.closConfig.totd = elem.getAttribute('clos');
			!hasClass(elem,'thover')&&addClass(elem,'thover');
		}	        
    },
	theadOut : function(e){
        var elem = e.srcElement || e.target;
        if(elem.nodeName.toLowerCase() ==='td'&&this.closConfig.on)removeClass(elem,'thover')
	},
    dragOrWidth : function(e){
        var elem = e.srcElement || e.target,widthConfig=this.widthConfig;
        
        //执行拖拽
        if(elem.nodeName.toLowerCase()==='td'){
            this.closConfig.td = elem.getAttribute('clos');
            addListener(document,'mousemove',BindAsEventListener(this,this.dragMove));
            addListener(document,'mouseup',Bind(this,this.dragUp));
			this.closConfig.on = true;
			Sys.ie?this.thead.setCapture(false):e.preventDefault();
        }
                   
		//执行宽度缩放
		if(elem.nodeName.toLowerCase()==='div'){
			Sys.ie?(e.cancelBubble=true):e.stopPropagation();
			//如果是最后一个td里面的div 不进行缩放
			if(this.theadTds[this.theadTds.length-1]===elem.parentNode)return
			Sys.ie?this.thead.setCapture(false):e.preventDefault();
			widthConfig.x = e.clientX;
			widthConfig.td = elem.parentNode;
			widthConfig.nexttd = widthConfig.td.nextSibling;
			while(widthConfig.nexttd.nodeName.toLowerCase()!="td"){
				 widthConfig.nexttd = widthConfig.nexttd.nextSibling;
			};
			widthConfig.tdwidth     = widthConfig.td.offsetWidth;
			widthConfig.nexttdwidth = widthConfig.nexttd.offsetWidth;
			this.line.style.height  = this.table.offsetHeight +"px";
			addListener(document,'mousemove',BindAsEventListener(this,this.widthMove));
			addListener(document,'mouseup',Bind(this,this.widthUp));                                                
		}
    },
    dragMove : function(e){
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        setStyle(this.div,{display:"block",left:e.clientX+9+"px",top:e.clientY+20+"px"});
    },
    dragUp :function(){
        var closConfig = this.closConfig,rows = this.table.getElementsByTagName('tr'),td,n,o,i=0,l=rows.length;
		this.div.style.display = "none";
        removeListener(document,'mousemove');
        removeListener(document,'mouseup');
		Sys.ie&&this.thead.releaseCapture();
		closConfig.on = false;	
		if(closConfig.totd===null)return;
		removeClass(this.theadTds[closConfig.totd],'thover');
        //在同一列 不进行列替换
        if(closConfig.td === closConfig.totd)return;
		
		//进行列替换 如果
		if(closConfig.td*1+1===closConfig.totd*1){
			n = closConfig.totd;
			o = closConfig.td;
		}else{
			n = closConfig.td;
			o = closConfig.totd;
		}
        for(;i<l;i++){
            td = rows[i].getElementsByTagName('td');
            rows[i].insertBefore(td[n],td[o]);
        }                 
                   
        //重新标识表头
        for(i=0,l=this.theadTds.length;i<l;i++)
            this.theadTds[i].setAttribute('clos',i);
		closConfig.totd=closConfig.td=null;      
    },
	widthMove : function(e){
		window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
		var widthConfig = this.widthConfig,x = e.clientX - widthConfig.x,left = e.clientX,clientX=left;
		if(clientX<widthConfig.x&&widthConfig.x - clientX>widthConfig.tdwidth-this.minWidth){
			left = widthConfig.x - widthConfig.tdwidth+this.minWidth;
		}
		if(clientX>widthConfig.x&&clientX - widthConfig.x>widthConfig.nexttdwidth-this.minWidth){
			left =widthConfig.x + widthConfig.nexttdwidth-this.minWidth;        
		}
		setStyle(this.line,{display:"block",left:left+"px"});    
	},
	widthUp : function(){
		this.line.style.display = "none";
		var widthConfig = this.widthConfig,x= parseInt(this.line.style.left) - widthConfig.x;  
		widthConfig.nexttd.style.width = widthConfig.nexttdwidth -x -1 +'px';
		widthConfig.td.style.width = widthConfig.tdwidth + x -1 +'px';
		Sys.ie&&this.thead.releaseCapture();
		removeListener(document,'mousemove');
		removeListener(document,'mouseup');
	}            
});
window.onload = function(){
    function checkName(val){
        if(val.replace(/^\s+$/g,'')==='') return '姓名输入不能为空';
        if(val.replace(/^\s+|\s+$/,'').length>10) return '姓名长度不能大于10个字符';
        if(!/^[\u4e00-\u9fa5a-z]+$/i.test(val)) return '姓名只能输入中文或者是字母';
        return true;
    };
	function checkRemark(val){
		if(val.replace(/^\s+$/g,'')==='') return '备注输入不能为空';
		if(val.replace(/^\s+|\s+$/,'').length>15) return '备注长度不能大于15个字符';
		if(!/^[\u4e00-\u9fa5\w\s]+$/i.test(val)) return '备注只能输入中文数字下划线空格';
		return true;
	}
    var set = [
        {id:0,type:"int"},
        {id:2,type:"string",edit:{rule:checkName,message:''}},
        {id:3,type:"date",edit:{rule:/^\d{4}\-\d{2}\-\d{2}$/,message:"按这中格式输入日期 1985-02-30"}},
        {id:4,type:"string",edit:{rule:checkRemark,message:''}}
    ];
    new Table($("tab"),set);
}
</script>
</body>
</html>
分享到：
页面层次拖拽效果 | Web开发系列 - Web Chart
2012-11-23 16:26
浏览 896
评论(0)
分类:Web前端
查看更多
发表评论

您还没有登录,请您登录后再发表评论
最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

表格的自定义排序编辑拖拽缩放

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

表格的自定义排序 编辑 拖拽 缩放

评论

发表评论

相关推荐

mysql 定时任务

tomcat服务器大数量数据提交Post too large解决办法

Tomcat启动内存设置

Java串口包Javax.comm的安装

在 Java 应用程序中访问 USB 设备

mysql定时器

oracle安装成功后，更改字符集

js iframe 打印 打印预览 页眉页脚的设立

不同小图标的编码网页中的大于号，小于号，应该用编码来代替,HTML中特殊字符和与之对应的ASCII代码

利用html5调用本地摄像头拍照上传图片

必须Mark！最佳HTML5应用开发工具推荐

Mobl试用二

Nginx安装部署

Nginx配置文件详细说明

table中的超长字符串用省略号表示的css样式

axis调用cxf

js实现页面打印功能实例代码(附去页眉页脚功能代码)

javascript:window.print() 打印

网页设置A4大小

表格设置边框 效果

最近访客更多访客>>

表格的自定义排序编辑拖拽缩放

js iframe 打印打印预览页眉页脚的设立

表格设置边框效果
