Jquery实现table表格行拖拽的方法
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
:Jquery实现table表格行拖拽的方法
1.添加上下面在线链接代码 <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> 添加JS函数代码 <script> $(document).ready(function() { var fixHelperModified = function(e, tr) { //children() 方法返回返回被选元素的所有直接子元素 var $originals = tr.children(); //clone() 方法生成被选元素的副本,包含子节点、文本和属性 var $helper = tr.clone(); //each() 方法规定为每个匹配元素规定运行的函数 $helper.children().each(function(index) { //width() 方法返回或设置匹配元素的宽度 //eq() 方法将匹配元素集缩减值指定 index 上的一个 $(this).width($originals.eq(index).width()) }); return $helper; }, updateIndex = function(e, ui) { //ui.item - 表示当前拖拽的元素 //parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的 $('td.index', ui.item.parent()).each(function(i) { //html() 方法返回或设置被选元素的内容 (inner HTML) $(this).html(i + 1); }); }; $("#sort tbody").sortable({ //设置是否在拖拽元素时,显示一个辅助的元素。可选值:'original', 'clone' helper: fixHelperModified, //当排序动作结束时触发此事件。 stop: updateIndex }).disableselection(); }); </script> 2.将table的id 改为sort,与上面定义的一致便可,随意更改 <table id="sort" > <tr height="20px" > 加上class="index",序号会随着行拖拽后而重新排序 <td colspan="1"><span ><%=no_i%></span></td> </tr> </table> 即可实现效果 该文章在 2023/5/17 17:23:23 编辑过 |
关键字查询
相关文章
正在查询... |