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

最新推荐文章于 2024-01-16 09:49:53 发布
最新推荐文章于 2024-01-16 09:49:53 发布
阅读量911 收藏
点赞数 1
分类专栏： JAVA技术

引用：http://www.jb51.net/article/23726.htm

图片：upload/201005/20100531233452190.bmp

 

<!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>
<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(/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}
</style>
</head>
<body>
<table id="tab" border="0" cellspacing="1" cellpadding="0">
<thead>
<tr>
<td width="60"class="tc" ><span>ID</span><div class="ww"></div></td>
<td width="60"class="tc"><span>选中</span><div class="ww"></div></td>
<td width="100" class="tc"><span>姓名</span><div class="ww"></div></td>
<td width="100" class="tc" ><span>生日</span><div class="ww"></div></td>
<td width="180" class="tc" ><span>备注</span><div class="ww"></div></td>
</tr>
</thead>
<tbody>
<tr>
<td height="16">1</td>
<td><input type ="checkbox"></td>
<td>张三</td>
<td>1982-05-27</td>
<td>杯具,全是杯具</td>
</tr>
<tr>
<td>3</td>
<td><input type ="checkbox"></td>
<td>李四</td>
<td>1983-06-27</td>
<td>恩恩我魔兽技术不错</td>
</tr>
<tr>
<td>2</td>
<td><input type ="checkbox"></td>
<td>王五</td>
<td>1983-05-27</td>
<td>波斯王子 时之刃还不错</td>
</tr>
<tr>
<td>4</td>
<td><input type ="checkbox"></td>
<td>赵六</td>
<td>1983-05-27</td>
<td>我叫赵六</td>
</tr>
<tr>
<td>5</td>
<td><input type ="checkbox"></td>
<td>朱八</td>
<td>1986-05-27</td>
<td>洗洗睡吧</td>
</tr>
</tbody>
</table>
<script language="javascript">
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;k<lll;k++)
checkboxs[k].type=="checkbox"&&addListener(checkboxs[k],"click",Bind(this,function(elm,k){
elm.checked==true?(this.checkbox[k] = elm):(delete this.checkbox[k]);
},checkboxs[k],k));
};
for(var l=set.length;i<l;i++){
addListener(this.theadtds[set[i].id],'click',Bind(this,this.sortTable,this.theadtds[set[i].id],set[i].id,set[i].type));
set[i].edit&&(this.edits[set[i].id]={rule:set[i].edit.rule,message:set[i].edit.message});
};
for(l=rows.length;j<l;j++)
this.rows[j]=rows[j];
for(var k=0,l=this.theadtds.length;k<l;k++){
this.clos[k]=[];
this.theadtds[k].setAttribute('clos',k)
addListener(this.theadtds[k],'mousedown',BindAsEventListener(this,this.closdrag));
}
for(var i=0,l=tds1.length;i<l;i++){
var p = i<this.theadtds.length-1?i:i%this.theadtds.length;
this.clos[p][this.clos[p].length] = tds1[i];
this.edits[p]&&tds1[i].setAttribute('edit',p);
}
for(var i=0,l=divs.length;i<l;i++){
addListener(divs[i],'mousedown',BindAsEventListener(this,this.widthdrag));
}
/*---------------------------------------------*/
/*---------------------------------------------*/
addListener(this.thead,'mouseover',BindAsEventListener(this,this.theadhover));
addListener(tab.tBodies[0],'dblclick',BindAsEventListener(this,this.edit));
addListener(this.input,'blur',Bind(this,this.save,this.input));
},
theadhover : function(e){
e = e || window.event;
var obj = e.srcElement ||e.target;
if(obj.nodeName.toLowerCase() =='td')
this.closarg.totdnum = (obj).getAttribute('clos');
else if(obj.nodeName.toLowerCase() =='div')
obj.style.cursor="sw-resize";
},
widthdrag : function(e){
if(Sys.IE){e.cancelBubble=true}else{e.stopPropagation()}
this.widtharg.x = e.clientX;
this.widtharg.td = (e.srcElement ||e.target).parentNode;
if(Sys.IE){
this.widtharg.nexttd = this.widtharg.td.nextSibling;
}else{
this.widtharg.nexttd = this.widtharg.td.nextSibling.nextSibling;
}
this.widtharg.tdwidth = this.widtharg.td.offsetWidth;
this.widtharg.nexttdwidth = this.widtharg.nexttd.offsetWidth;
this.line.style.height = this.table.offsetHeight +"px";
addListener(document,'mousemove',this.widtharg.widthmove);
addListener(document,'mouseup',this.widtharg.widthup);
},
widthmove : function(e){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
var x = e.clientX - this.widtharg.x,left = e.clientX,clientx=e.clientX ;
if(clientx<this.widtharg.x){
if(this.widtharg.x - clientx>this.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<l;i++)
{
tds = rows[i].getElementsByTagName('td');
try{
rows[i].insertBefore(tds[n],tds[o]);
}
catch(err){
return;
}
}
for(var i=0,l=this.theadtds.length;i<l;i++)
this.theadtds[i].setAttribute('clos',i);
},
edit: function(e){
var o = e.srcElement || e.target;
if(!o.getAttribute('edit'))return;
this.inputtd = o;
var v = o.innerHTML;
o.innerHTML = "";
o.appendChild(this.input);
this.input.value=v;
this.input.focus();
},
save : function(o){
var edit=this.edits[o.parentNode.getAttribute('edit')];
if(edit.rule.test(this.input.value)){
this.inputtd.innerHTML = this.input.value;
this.inputtd=null;
}else{
alert(edit.message);
}
},
sortTable :function(td,n,type){
var frag=document.createDocumentFragment(),str= td.getElementsByTagName('span')[0].innerHTML,span=td.getElementsByTagName('span')[0];
if(this.row!=null||td==this.sortCol){
this.rows.reverse();
span.innerHTML =str.replace(/.$/,str.charAt(str.length-1)=="↓"?"↑":"↓") ;
}else{
this.rows.sort(this.compare(n,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);
if(a1==a2)return 0;
return a1<a2?-1:1;
};
}
});
window.onload = function(){
var set = [
{id:0,type:"int"},
{id:2,type:"string",edit:{rule:/^([a-z]|[\u4e00-\u9fa5]){2,}$/i,message:"请输入2位以上的汉字,或者是字母"}},
{id:3,type:"date",edit:{rule:/^\d{4}\-\d{2}\-\d{2}$/,message:"按这中格式输入日期1985-02-30"}},
{id:4,type:"string",edit:{rule:/^.{4,10}$/,message:"请输入4到10个字符"}}
];
new Table($("tab"),set);
}
</script>
</body>
</html>


 

 

_Mr_Yang_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现拖拽移动与缩放效果
10-14
主要为大家详细介绍了原生js实现拖拽移动与缩放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS 实现元素的缩放、拖拽功能
朝花夕拾的博客
04-26 1129
e.wheelDelta 是否大于0还是小于0 然后对元素的width height 分别设置10%拖拽 鼠标当前位置 和鼠标拖拽的位置差值 设置。scrollLeft就是元素拖拽的位置。
js 拖动，缩放总结
slashNie的博客
03-28 178
1、容器dom上绑定：mouseleave事件（mouseout不行）1、给拖动元素添加user-select：none，让元素不可复制。2、判断鼠标位置是否在容器dom范围内。
javascript盒子的拖拽和缩放
阿進在努力~~
06-30 1337
盒子的缩放和拖拽
原生JavaScript元素拖拽缩放
weixin_44815800的博客
04-08 272
使用JS实现的div拖拽效果，也可封装成vue指令
javascript实现表格排序 编辑 拖拽 缩放
12-12
简单表格排序  可以双击编辑 自定义编辑后的 规则  可拖动列进行列替换  可推动边框进行列宽度的缩放  代码如下:  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
HTML+CSS+JS数据可视化大屏平台模板实例6-销售分析
03-25
JavaScript还能处理实时更新数据、交互式筛选、缩放和拖动等功能，让用户能够深入探索数据。 为了使数据与可视化组件关联，通常会使用Ajax或Fetch API从服务器获取JSON或CSV格式的销售数据，然后使用JavaScript解析...
原生JS实现拖拽移动与缩放
Silence_555的博客
12-22 1347
原生JS实现拖拽移动与缩放思路1.基本样式css部分HTML部分2.拖拽功能3.缩放功能 思路 缩放的原理：鼠标按下去时，获取当前的鼠标位置和盒子的宽高，鼠标按下并移动后获取此时的鼠标位置。 拖拽后的宽高=初始宽高+（拖拽后鼠标距离屏幕的位置 - 第一次按下时鼠标距离屏幕的位置）。 1.基本样式 css部分 <style> .box { width: 100px; height: 100px; backgro
js拖动鼠标实现放缩
前端小白
02-18 447
js拖动鼠标实现放缩
js 实现拖拽滚动、滚轮缩放元素函数和案例
GeniusXYT的博客
04-15 2581
js拖动滚动、滚轮缩放元素
表格拖拽、树状拖拽的各种方法
Qxn530的博客
12-01 3872
配置项：Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。第一步：安装第二步：使用方法完整代码。
原生Javascript实现表格行上下拖拽
Dreamy_LIN的博客
05-22 3622
拖放事件 拖动元素时，以此触发的事件： dragstart 按下鼠标并移动时触发 drag 拖动期间持续触发 dragend 松开鼠标触发 拖动到有效的放置目标上时，依次触发： dragenter 元素被拖到放置目标上 dragover 被拖元素在放置目标内移动，持续触发 dragleave或drop dragleave，元素被拖到放置目标外触发。drop元素被拖到有效的放置目标上（默认无效），并松开鼠标触发。 实现代码如下： <!DOCTYPE html> <html> &
表格拖拽实现功能——Sortable.js
最新发布
qq_50384629的博客
01-16 849
Sortable.js是一个Javascript的库，用于在现代浏览器和触摸屏设备上重新排序和拖放列表，不需要支持JQuery。4.使用原生的html5拖放API构建。功能描述：用于列表的重新排放的js库。5.可以从一个列表拖到另一个列表。全部配置项：（现用选相应的属性），同时适应于各种CSS样式库，2.移动的时候执行CSS动画。3.支持拖拽处理和可选文本。1.支持触摸设备和IE9。
Sortablejs实现vue项目表格拖动排序
huivictor的博客
12-15 2528
1.简介： Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。 2.官网： （1）中文文档教程：sortable.js中文文档 - itxst.comhttps://www.itxst.com/sortablejs/neuinffi.ht
Element-ui el-table 使用 SortableJS 实现表格拖拽
qq_52126119的博客
10-10 3536
Element-ui el-table 使用 SortableJS 实现表格拖拽
原生JS 表格列拖拽 适用JqGrid
weixin_43205308的博客
10-31 527
页面引用js就不用多说了，在class添加。不是JqGrid可以注释这个。
sortable.js 实现拖拽
花铛
09-15 7537
是一个 JavaScript 库，用于在现代浏览器和触摸设备上重新排序拖放列表。
element中使用sortablejs进行行列拖拽及封装
DZYMY的博客
02-10 1147
element中使用sortablejs进行行列拖拽及封装
js 表格拖拽排序
05-26
实现表格拖拽排序可以使用HTML5中的drag和drop事件，以及JavaScript的相关操作。以下是一个示例代码： HTML部分： ```html 序号 姓名 年龄 国籍 <td>1 张三 <td>25 中国 <td>2 李四 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值