js技术之拖动table标签
一.js技术之拖动table标签
起因：前几天公司，突然安排一个任务
任务描述：要求尺码table列表要像Excel表中一样可以直接移动整行尺码到任意行位置
技术点：采用ui的sortable技术来helper进行移动
所需ui的js：<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
注意：这只是讲述拖动的技术点，并非整个功能，因为还有下标等缺陷未加入其中
二.代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 </head>
6 <body>
7 <!--用于定位-->
8 <div id="product-sizechart-list">
9 <!--table表-->
10 <table class="table table-bordered table-condensed">
11 <!-- 公司格式（同样用于定位）-->
12 <tbody class="ui-sortable">
13 <!--第一行-->
14 <tr id="sizechart-item-0" class="ui-sortable-handle">
15 <td width="100">
16 <input id="13756" class="form-control input-small" type="text"
17 name="product.productSizeChart.sizeChartItemList[0].sizePropertyList[0].attrValue" placeholder=""
18 onblur="sizeConversion(this)" value="1">
19 </td>
20
21 <td>
22 <input id="13758" class="form-control input-small" type="text"
23 name="product.productSizeChart.sizeChartItemList[0].sizePropertyList[1].attrValue" placeholder=""
24 onblur="sizeConversion(this)" value="1">
25 </td>
26
27 <td>
28 <input id="13760" class="form-control input-small" type="text"
29 name="product.productSizeChart.sizeChartItemList[0].sizePropertyList[2].attrValue" placeholder=""
30 onblur="sizeConversion(this)" value="1">
31 </td>
32
33 </tr>
34 <!--第二行-->
35 <tr id="sizechart-item-1" class="ui-sortable-handle">
36 <td>
37 <input id="13772" class="form-control input-small" type="text"
38 name="product.productSizeChart.sizeChartItemList[1].sizePropertyList[2].attrValue" placeholder=""
39 onblur="sizeConversion(this)" value="11cm/4.33''">
40 </td>
41
42 <td>
43 <input id="13774" class="form-control input-small" type="text"
44 name="product.productSizeChart.sizeChartItemList[1].sizePropertyList[3].attrValue" placeholder=""
45 onblur="sizeConversion(this)" value="11cm/4.33''">
46 </td>
47
48 <td>
49 <input id="13776" class="form-control input-small" type="text"
50 name="product.productSizeChart.sizeChartItemList[1].sizePropertyList[4].attrValue" placeholder=""
51 onblur="sizeConversion(this)" value="11cm/4.33''">
52 </td>
53 </tr>
54 <!--第三行-->
55 <tr id="sizechart-item-2" class="ui-sortable-handle">
56 <td>
57 <input id="13784" class="form-control input-small" type="text"
58 name="product.productSizeChart.sizeChartItemList[2].sizePropertyList[2].attrValue" placeholder=""
59 onblur="sizeConversion(this)" value="1">
60 </td>
61
62 <td>
63 <input id="13786" class="form-control input-small" type="text"
64 name="product.productSizeChart.sizeChartItemList[2].sizePropertyList[3].attrValue" placeholder=""
65 onblur="sizeConversion(this)" value="1">
66 </td>
67
68 <td>
69 <input id="13788" class="form-control input-small" type="text"
70 name="product.productSizeChart.sizeChartItemList[2].sizePropertyList[4].attrValue" placeholder=""
71 onblur="sizeConversion(this)" value="1">
72 </td>
73 </tr>
74 <!--第四行-->
75 <tr id="sizechart-item-3" class="ui-sortable-handle">
76 <td>
77 <input id="13796" class="form-control input-small" type="text"
78 name="product.productSizeChart.sizeChartItemList[3].sizePropertyList[2].attrValue" placeholder=""
79 onblur="sizeConversion(this)" value="11cm/4.33''">
80 </td>
81
82 <td>
83 <input id="13798" class="form-control input-small" type="text"
84 name="product.productSizeChart.sizeChartItemList[3].sizePropertyList[3].attrValue" placeholder=""
85 onblur="sizeConversion(this)" value="1">
86 </td>
87
88 <td>
89 <input id="13800" class="form-control input-small" type="text"
90 name="product.productSizeChart.sizeChartItemList[3].sizePropertyList[4].attrValue" placeholder=""
91 onblur="sizeConversion(this)" value="1">
92 </td>
93 </tr>
94 </tbody>
95 </table>
96 </div>
97 </body>
98 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
99 <!--导入ui的js-->
100 <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
101 <script type="text/javascript">
102 <!--局部刷新-->
103 $(document).ready(function () {
104 // 获取id为product-sizechart-list下的table下tbody标签，进行排序操作
105 $("#product-sizechart-list table tbody").sortable({
106 helper: function (e, ui) {
107 // ui.辅助定位函数.为每个匹配元素规定运行的函数（这样就可以移动尺码行了）
108 ui.children().each(function () {
109 // 设置宽度和上下宽度和浏览器框为一致
110 $(this).width($(this).width());
111 });
112 // 返回ui
113 return ui;
114 }
115 });
116 // 获取id为product-sizechart-list下的table下tbody标签 设置文本为禁用选择
117 // 因为他们要拖动，所以尽量设置他们的文字不能选择
118 $("#product-sizechart-list table tbody").disableSelection();
119 });
120 </script>
121 </html>
三.结果图
选择第一行
移动第三行
移动后结果图
四.总结
- 个人觉得这是一个技术升级
- 这里的js版本不能太低，我记得是需要3以上的版本越高越好
- 除了table的移动，在jquery菜鸟训练营中还有<li></li>的案例
- sortable 下面的方法还有很多，由于本人技术未过关，部分还未校验出效果
- helper这个给我的感觉更新定位时限制的框，
js技术之拖动table标签的更多相关文章
- js把页面的table标签导出为csv
// 使用该保存方法,table必须外嵌一个div且不能有任何其他元素 否则ie下载会出现其他数据 //tableid , title 为文件保存的文件名 function saveCode(tabl ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- js实现拉伸拖动iframe的具体代码
这篇文章介绍了js实现拉伸拖动iframe的具体代码,有需要的朋友可以参考一下左边iframe放树目录,右边的iframe放index页.拖鼠标同时控制2个iframe的宽高.期待有人能改进.操作方法 ...
- Kure讲HTML_div标签和table标签
为什么要把这两个标签放在一起讲? 个人认为div标签可以算是一个万能标签,它可以通过CSS(层叠样式表)来模仿表格的形式来生成一个表格.那么很多人可能会疑惑那在开发的时候,到底是用div+css的形式 ...
- display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化
发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...
- 使用JS和PHP导出table表格
把table表格的内容导出成excel 或者word等格式(简单容易不需要太多php) 导出需注意 1. 样式都在行间,导出excel表格会继承样式包括colspan.rowspan,非表格元素,样式 ...
- js实现可拖动Div
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的wind ...
- js实现动态操作table
本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
随机推荐
- 【C# .Net GC】强制垃圾回收 和System GC
属性 GC.MaxGeneration:获取系统当前支持的最大代数. 方法 GC.GetTotalMemory(bool forceFullCollection) 方法 true表示该方法先做垃圾收 ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- 03-Eureka注册中心
1.介绍 2.快速开始 2.1 pom文件依赖 <?xml version="1.0" encoding="UTF-8"?> <project ...
- Python音频操作+同时播放两个音频
对于python而言,音频的操作可以使用pygame包中的sound 和 music对象,本博客主要讲解这两个对象. 1.sound对象 Sound对象适合处理较短的音乐,如OGG和WAV格式的音频文 ...
- JVM上篇：类加载子系统
JVM类加载 目录 JVM类加载 1.内存结构概述 2.类加载子系统概述 3.类的加载过程 2.1加载 2.2Linking 2.2.1验证(Verify) 2.2.2准备(Prepare) 2.2. ...
- ws请求定时
heartChechInit() { const _this = this; // 设置统筹管理 let heartCheck = { timer: ...
- 进制转换伪代码转python
运行结果如图 代码如下 a=input("请输入一个十进制数:", ) print("二进制结果为:",bin(int(a))) print("八进制 ...
- Linux备份数据库,mysqldump命令实例详解
mysqldump是mysql数据库中备份工具,用于将MYSQL服务器中的数据库以标准的sql语言的方式导出,并保存到文件中. 语法: mysqldump (选项) 选项: --add-drop-ta ...
- .NET CORE 授权
.NET CORE 授权 一.三种方式授权 不论使用NET CORE框架的何种授权都必须引入中间件,因为它实现了在管道中对当前请求的鉴权和授权的验证,在Startup中的Configure中首先加入鉴 ...
- 宇宙最強的IDE - Visual Studio 25岁生日快乐
每位开发者从入门开始或多或少都会接触过 Visual Studio , 现今的 Visual Studio 除了支持传统的 C++ , C# , Visual Basic.NET ,F# 的编程语言外 ...