文档章节

表格列拖拽及排序

IceRainYWC
 IceRainYWC
发布于 2017/10/09 15:15
字数 721
阅读 17
收藏 0

来自:http://runjs.cn/detail/fxvbffhz

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      *{
          margin:0;
          padding:0;
      }
      #chenkbox{
            margin: 100px auto;
            width: 500px;
            position: relative;
      }
      table{
            width: 500px;
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
      }
     th{
            background: #ebf3f0;
            font-size: 13px;
            color:#000002;
     }
     th,td{
             text-align: center;
             border: 1px solid #dcdbdb;
            padding: 2px 6px;
     }
     #box{position:absolute;display:none;opacity:0.9;background:#fff;text-align: center;top:0;}
    </style>
</head>
<body>
<div id="chenkbox"> 
<table id="tableSort">
           <tr>
             <th onclick="sortTable('tableSort',0)">
                     序列
                </th>
                <th onclick="sortTable('tableSort',1)">
                     名称
                </th>
                <th onclick="sortTable('tableSort',2)">
                    数量
                </th>
                <th onclick="sortTable('tableSort',3)">
                   单价(Q点)
                </th>
                <th onclick="sortTable('tableSort',4)">
                    总计(Q点)
                </th>
           </tr>  
       <tr>
                <td>1</td>
                <td>农场话费A</td>
                <td>2</td>
                <td>50</td>
                <td>100</td>
       </tr>
       <tr>
                <td>2</td>
                <td>飞车道具C</td>
                <td>1</td>
                <td>80</td>
                <td>80</td>
       </tr>
       <tr>
                <td>3</td>
                <td>空间K</td>
                <td>1</td>
                <td>120</td>
                <td>120</td>
       </tr>
       <tr>
                <td>4</td>
                <td>农场狗粮C</td>
                <td>4</td>
                <td>60</td>
                <td>240</td>
       </tr>
       <tr>
                <td>5</td>
                <td>音速种子</td>
                <td>2</td>
                <td>110</td>
                <td>220</td>
       </tr>
       <tr>
                <td>6</td>
                <td>农场化肥D</td>
                <td>5</td>
                <td>60</td>
                <td>300</td>
       </tr>
       <tr>
                <td>7</td>
                <td>AVA装扮C</td>
                <td>1</td>
                <td>300</td>
                <td>300</td>
       </tr>
       <tr>
                <td>8</td>
                <td>三国道具C</td>
                <td>15</td>
                <td>60</td>
                <td>900</td>
       </tr>
       <tr>
                <td>9</td>
                <td>DNF道具B</td>
                <td>4</td>
                <td>300</td>
                <td>1200</td>
       </tr>
       <tr>
                <td>10</td>
                <td>农场化肥H</td>
                <td>6</td>
                <td>80</td>
                <td>120</td>
       </tr>
       <tr>
                <td>11</td>
                <td>农场化肥B</td>
                <td>1</td>
                <td>80</td>
                <td>80</td>
       </tr>
       <tr>
                <td>12</td>
                <td>Q宠元宝</td>
                <td>100</td>
                <td>1</td>
                <td>100</td>
      </tr>
       <tr>
                <td>13</td>
                <td>三国道具K</td>
                <td>9</td>
                <td>20</td>
                <td>180</td>
      </tr>
</table>
 <div id="box"> </div>
 </div>
<script>
  function sortTable(table,idx){
    var otable=document.getElementById(table),
        otody=otable.tBodies[0],
        otr=otody.rows,
        tarr=[];
     for (var i = 1; i <otr.length; i++) {
           tarr[i-1]=otr[i];
     };
    // console.log(tarr);
     if(otody.sortCol==idx){
        tarr.reverse();
     }else{
        tarr.sort(function(tr1,tr2){
            var value1 = tr1.cells[idx].innerHTML; 
            var value2 = tr2.cells[idx].innerHTML; 
            if(!isNaN(value1)&&!isNaN(value2)){
               return value1-value2;
            }else{
              return value1.localeCompare(value2);
             }           
        })
     }
     var fragment = document.createDocumentFragment();
     for (var i = 0; i <tarr.length; i++) {
         fragment.appendChild(tarr[i]);
     };
     otody.appendChild(fragment);
     otody.sortCol=idx;
  }
  //拖动
  function Drag(table){
    var ochek=document.getElementById("chenkbox"),
        otable=document.getElementById(table),
        otody=otable.tBodies[0],
        oth=otody.getElementsByTagName("th"),
        otd=otody.getElementsByTagName("td"),
        box=document.getElementById("box"),
        arrn=[];
        for (var i = 0; i < otd.length; i++) {
          otd[i].onmousedown=function(e){
              var e=e||window.event,
                  target = e.target||e.srcElement,
									
                  thW = target.offsetWidth,
                  maxl=ochek.offsetWidth-thW,
                  rows=otable.rows,
                  ckL=ochek.offsetLeft,
                  disX=target.offsetLeft,
                  _this=this,
                  cdisX=e.clientX-ckL-disX;
					
                  for (var i = 0; i < rows.length; i++) {
                      var op=document.createElement("p");
                      op.innerHTML=rows[i].cells[this.cellIndex].innerHTML;  
                      box.appendChild(op);
                  };    
                  for (var i = 0; i < oth.length; i++) {
                         arrn.push(oth[i].offsetLeft);      
                  }; 
                  console.log(arrn);
                  box.style.display="block";
                  box.style.width=thW+"px";
                  box.style.left=disX+"px";
                  //未完成 还有事件没写。
                  document.onmousemove=function(e){
                      var e=e||window.event,
                      target = e.target||e.srcElement,
                      thW = target.offsetWidth;
                      box.style.top=0;
                      box.style.left=e.clientX-ckL-cdisX+"px";
                      if(box.offsetLeft>maxl){
                           box.style.left=maxl+"px";
                      }else if(box.offsetLeft<0){
                           box.style.left=0;
                      }        
                      document.onselectstart=function(){return false};     
                    window.getSelection ? window.getSelection().removeAllRanges() : doc.selection.empty();              
                  }
                  document.onmouseup=function(e){
                     var e=e||window.event,
                         opr=box.getElementsByTagName("p"),
                         oboxl=box.offsetLeft+cdisX;
                        for (var i = 0; i < arrn.length; i++) {
                           if(arrn[i]<oboxl){
                            var index=i;
                           }
                        };
                       for (var i = 0; i < rows.length; i++) {
                          rows[i].cells[_this.cellIndex].innerHTML="";
                          rows[i].cells[_this.cellIndex].innerHTML=rows[i].cells[index].innerHTML;
                          rows[i].cells[index].innerHTML="";
                          rows[i].cells[index].innerHTML=opr[i].innerHTML;
                          console.log(rows[i].cells[index].innerHTML);
                       };
                       box.innerHTML="";
                       arrn.splice(0,arrn.length);
                       box.style.display="none";
                       document.onmousemove=null; 
                       document.onmouseup=null;
                       document.onselectstart=function(){return false};     
                  }
                   this.onclick=null;
             }
        };
        
  }
  Drag("tableSort");
</script>
</body>
</html>

 

本文转载自:http://runjs.cn/detail/fxvbffhz

共有 人打赏支持
IceRainYWC
粉丝 13
博文 111
码字总数 49297
作品 0
石家庄
程序员
私信 提问
快速、灵活的对Table标签进行实例化,让Table标签充满活力。 - GridManager.js

GridManager特色: 原生实现: 无任何框架依赖 宽度调整: 表格的列宽度可进行拖拽式调整 位置更换: 表格的列位置进行拖拽式调整 配置列: 可通过配置对列进行显示隐藏转换 表头吸顶: 在表存在可...

拭目以待
2015/06/12
2.8K
8
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.7K
1
Ueditor 1.3.5 发布,百度富文本编辑器

新增功能 asp后台的支持 添加本地自动保存功能 增加数据可视化展示功能http://ueditor.baidu.com/website/onlinedemo-charts.html 编辑器实例上添加isFocus,blur方法 新增在chrome下针对图片...

战毅
2013/11/27
4.8K
16
拭目以待/GridManager

GridManager.js 文档及演示 文档 演示 使用需知 下载时请选择对应的tag进行下载, 请不要直接使用master分支上的代码. v2.0和之前版本为jquery版本 v2.1开始为原生js版本 实现功能 GridManage...

拭目以待
2016/08/28
0
0
SpreadJS 表格控件发布 V11 版本,新增图表及前端 PDF 导出

日前,全球最大的控件提供商葡萄城宣布,SpreadJS 纯前端表格控件正式发布V11 版本。新版本亮点颇多,不但为用户带来期待已久的图表功能,还新增前端导出 PDF、列分组等功能,在数据可视化方...

葡萄城技术团队
2017/12/08
593
2

没有更多内容

加载失败,请刷新页面

加载更多

Golang中Int32转换为int16丢失精度的具体过程

1.类型转换代码 Int32转换为int16会丢失精度,这是总所周知的,但是具体如何丢失精度的,请看下面的代码: var tmp1 int32 = 123424021var tmp2 int16var tmp3 uint16tmp2 = int16(tmp1)...

cloes
24分钟前
1
0
原生Servlet文件上传和下载Servlet多个文件上传

转载:原文连接https://blog.csdn.net/HaHa_Sir/article/details/81744629一、前端 html 代码<center> <h2> 基于servelt 3.0注解实现文件上传 </h2> <h3>1、单个文件上传</h......

小橙子的曼曼
29分钟前
1
0
JDBC流程

简述

细节探索者
36分钟前
0
0
利用位运算实现加减乘除

利用位运算实现加减乘除 受《剑指offer》上题目的启发,现在把利用位运算做加、减、乘、除的方法总结一下。 参考网址:https://blog.csdn.net/sinat_35261315/article/details/72904945 基础...

薛定谔的旺
40分钟前
4
0
mysql——通过命令将sql查询的结果导出到具体文件

mysql——通过命令将sql查询的结果导出到具体文件 2018年07月29日 21:53:51 郑浩- 阅读数:2949 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013045437/a...

linjin200
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部