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 ...
随机推荐
- vmware扩容centos根目录
在vmware中编辑,给磁盘扩容 在centos中使用命令fdisk /dev/sda 输入n创建新分区 输入p创建主分区 回车,默认分区号 回车,默认起始扇区 回车,默认last扇区 输入t,改变分 ...
- Shell脚本编写登陆小程序.sh
转至:https://www.cnblogs.com/gaohongyu/articles/12072594.html #!/bin/bash #Author:GaoHongYu #QQ:106176 ...
- Pycharm:Python2和3及其的Anaconda的正确设置
这两天学习需要用到第三方库pyKriging,然而电脑之前下载的是Python2.7,pyKriging只支持Python3.6,尝试了很多方法也无果后,只好重新下载Python3.6,由于在网上查到 ...
- 一个更好用的.NET Core程序瘦身器，减小程序尺寸到1/3
一.为什么要开发.NET Core程序瘦身器? .NET Core具有[剪裁未使用的代码]的功能,但是由于它是使用静态分析来实现的,因此它的剪裁效果并不是最优的.它有如下两个缺点: 不支持Window ...
- JZ-043-左旋转字符串
左旋转字符串 题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S, 请你把其循环左移K位后的序列输出.例如,字符 ...
- 2022年官网下安装RedisDesktopManager最全版与官网查阅方法
目录 安装部署RedisDesktopManager 一.下载安装 1.浏览器输入网址:https://github.com/ ,输入搜索条件,找到如图,双击 2.滑动浏览器找到如图位置,双击 3.滑 ...
- 《手把手教你》系列基础篇（七十五）-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 中篇（详解教程）
1.简介 上一篇中介绍了DataProvider如何传递参数,以及和一些其他方法结合传递参数,今天宏哥接着把剩下的一些常用的也做一下简单的介绍和分享. 2.项目实战1 @DataProvider + ...
- SP2940题解
啃论文的时候论文里面的题. 题意: 区间加 询问区间前缀和之和的最值. 我们先弱化一下问题:将"区间"二字去掉. 我们思考一下一个点可能成为答案的条件.假设现在总共进行的区间加操作 ...
- DataTemplate的用法
WPF 模板主要分为两大类:1.ControlTemplate: 控件的外观,也就是控件是什么样子.2.DataTemplate: 是数据内容的表现,一条数据显示成什么样子. (1)DataTemla ...
- First Note
第一篇博客 入驻博客园.