文档章节

表格列拖拽及排序

IceRainYWC
 IceRainYWC
发布于 2017/10/09 15:15
字数 721
阅读 14
收藏 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
博文 107
码字总数 48100
作品 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.6K
1
Ueditor 1.3.5 发布,百度富文本编辑器

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

战毅
2013/11/27
4.7K
16
SpreadJS 表格控件发布 V11 版本,新增图表及前端 PDF 导出

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

葡萄城控件技术团队
2017/12/08
316
2
拭目以待/GridManager

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

拭目以待
2016/08/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

游戏开发经验谈(二):对战类全球服游戏的设计与实现

上篇文章《游戏开发经验谈(一):游戏架构里隐藏的五个坑及其应对方案》,我们主要讲解了游戏架构设计当中隐藏的一些坑及其应对方案,错过的小伙伴可以回溯之前的内容。本期内容,将会重点介...

UCloudTech
11分钟前
0
0
Mysql基本语法

一.联合主键 drop table CONTENT_AND_CATALOG;CREATE TABLE `tobebetter`.`CONTENT_AND_CATALOG` ( `ID` VARCHAR(120) NOT NULL , `CONTENT_ID` VARCHAR(120) , `CA......

我是菜鸟我骄傲
12分钟前
0
0
179. centos7 安装mariadb

1. centos7 中安装mariadb 1.1 执行安装 centos7 自带了mariadb yum -y install mariadb mariadb-server 1.2 启动mariadb systemctl start mariadb 1.3 设置开机启动 systemctl enable maria......

Lucky_Me
19分钟前
0
0
【AI实战】动手训练自己的目标检测模型(YOLO篇)

在前面的文章中,已经介绍了基于SSD使用自己的数据训练目标检测模型(见文章:手把手教你训练自己的目标检测模型),本文将基于另一个目标检测模型YOLO,介绍如何使用自己的数据进行训练。 ...

雪饼
26分钟前
0
0
Git合并指定文件到另一个分支

经常被问到如何从一个分支合并特定的文件到另一个分支。 其实,只合并你需要的那些commits,不需要的commits就不合并进去了。 合并某个分支上的单个commit 首先,用git log或sourcetree工具查...

yeahlife
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部