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# 基础概念】抽象类、密封类及类成员
使用 abstract 关键字可以创建不完整且必须在派生类中实现的类和 class 成员. 使用 sealed 关键字可以防止继承以前标记为 virtual 的类或某些类成员. abstract修饰符 ...
- 自己创建bmp图像
随便找一张图片,右键选择打开方式为画图,再在画图中保存为bmp即可 如果要保存为png文件,也可以这样
- pandas模块篇（之二）
今日内容概要 布尔选择器 索引 数据对齐 数据操作(增出改查) 算术方法 DataFrame(Excel表格数据) 布尔选择器 import numpy as np import pandas as ...
- Flask 自建扩展
自建扩展介绍 Flask扩展分两类 纯功能, 如: Flask-Login 提供用户认证 对已有的库和工具包装(简化继承操作,并提供有用的功能,更方便) 如: Flask-SQLAlchemy 包装了 ...
- Python 列表的（元素的删除）
del:根据索引值删除元素 del 可以删除列表中的单个元素,格式为: del listname[index] 其中,listname 表示列表名称,index 表示元素的索引值.del 也可以删除中 ...
- PHP-文件上传封装类
<?php $file = $_FILES['img']; $obj = new File(); $res = $obj->upload($file,'upload'); if($res) ...
- tensorflow源码解析之framework-graph
目录 什么是graph 图构建辅助函数 graph_transfer_info 关系图 涉及的文件 迭代记录 1. 什么是graph graph是TF计算设计的载体,如果拿TF代码的执行和Java代码 ...
- Swagger 接口文档
目录 Swagger 介绍 Swagger 依赖 SpringBoot 集成 Swagger 配置类 常用注解 效果示例 Swagger 介绍 Swagger UI 允许任何人(无论是开发团队还是最终 ...
- 面试官：Redis如何实现持久化的、主从哨兵又是什么？
哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 作为一名Java程序员,Redi ...
- VTK读取数据
#include <vtkSmartPointer.h> #include <vtkSimplePointsReader.h> #include <vtkPolyData ...