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# typeof() 和object.GetType() 、Type..GetType()使用和区别
进行学习到表达树了,用动Tpye了.所以整理了以下他们区别和用法 总得来说他们都是为了获取某个实例具体引用的数据类型System.Type.1.GetType()方法继承自Object,所以C#中任何 ...
- C#如何在安全的上下文中使用不安全的代码？
文章原文:https://www.cnblogs.com/2Yous/p/4887904.html 从通常情况下来看,为了保持类型安全,默认情况C# 不支持指针算法. 不过,当你需要使用指针的时候,请 ...
- Scrapy（六）：Spider
总结自:Spiders - Scrapy 2.5.0 documentation Spider 1.综述 ①在回调函数Parse及其他自写的回调函数中,必须返回Item对象.Request对象.或前两 ...
- Pycharm：集体缩进、注释、折叠
1.集体缩进 选中代码块,按TAB 2.集体前移 选中代码块,Shift TAB 3.集体注释 选中代码块,CTRL + / 4.取消集体注释 再按一下CTRL+/ 5.集体折叠 CTRL+SHIFT ...
- Vue之路由的使用
零.传统路由与SPA的区别 传统开发方式下,URL改变后,就会立刻发生请求去请求整个页面,这样可能请求加载的资源过多,可能会让页面出现白屏. 在SPA(Single Page Application) ...
- 数据库连接池与SQL工具类
数据库连接池与SQL工具类 1.数据库连接池 依赖包 pymysql dbutils # -*- coding: utf-8 -*- ''' @Time : 2021/11/19 16:45 @Aut ...
- C#-使用Newtonsoft.Json实现json字符串与object对象互转
json字符串转object对象: IF004Response processResponse = JsonConvert.DeserializeObject<IF004Response> ...
- php session 的使用方法
public function insert(Request $request){ $parm = $request->except('token'); $this->validate($ ...
- 机器学习之主成分分析（PCA）
import numpy as np #(1)零均值化def zeroMean(dataMat): meanVal=np.mean(dataMat,axis=0) newData =dataMat - ...
- ASP.NET Core 6框架揭秘实例演示[25]：配置与承载环境的应用
与服务注册一样,针对配置的设置同样可以采用三种不同的编程模式.第一种是利用WebApplicationBuilder的Host属性返回的IHostBuilder对象,它可以帮助我们设置面向宿主和应用的 ...