请选择 进入手机版 | 继续访问电脑版

jq 表格行、列拖动排序

[复制链接]
大胆 发表于 2021-1-1 17:48:14 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
这个需求出来本可以使用许多插件,但由于反面的需求无法满足在固定插件下继续开辟,所以参考了layuitable插件制作了这样一个简单的行列拖拽排序。
  1.                                         无标题文档                                                                        .Reports {                                width: calc(100% - 20%);                                margin: 20px 10% !important;                                text-align: center;                                position: relative;                        }                        body,                        #sortable tbody {                                position: relative;                        }                        #sortable thead th p {                                margin: 0;                        }                        #sortable thead th {                                vertical-align: middle;                                height: 50px;                                border: 1px solid #dee2e6                        }                        #sortable tbody tr td:first-child {                                cursor: move;                                background-color: #555555;                                width: 150px;                        }                        #sortable th:first-child {                                width: 150px;                                background-color: #555555;                                border-right: 1px solid #555;                                border-top: 1px solid #555;                                border-bottom: 1px solid #555;                                position: relative;                        }                        #sortable tbody td {                                vertical-align: middle;                                position: relative;                        }                        #sortable tbody tr {                                position: inherit;                                border: 1px solid black;                        }                        #sortable .vis_hide {                                visibility: hidden;                                /* left: -2px; */                                border: none;                                border-bottom: 1px solid #e4e4e4;                        }                        .createDivBg {                                position: fixed;                                top: 0;                                bottom: 0;                                left: 0;                                right: 0;                                z-index: 10000;                                cursor: move;                                -moz-user-select: none;                                -webkit-user-select: none;                                -o-user-select: none;                                -ms-user-select: none                        }                        .createDiv {                                border: 1px dotted #ccc;                                height: 34px;                                line-height: 34px;                                background: #eee;                                position: fixed;                                z-index: 100000                        }                        body {                                -webkit-touch-callout: none;                                /* iOS Safari */                                -webkit-user-select: none;                                /* Chrome/Safari/Opera */                                -khtml-user-select: none;                                /* Konqueror */                                -moz-user-select: none;                                /* Firefox */                                -ms-user-select: none;                                /* Internet Explorer/Edge */                                user-select: none;                                /* Non-prefixed version, currently */                        }                                                                                                        [table]                                                                                        [tr]                                                                                                                        全不选
  2.                                                                 全选
  3.                                                                                                                 样式一                                                        样式二                                                        样式三                                                        总价                                                [/tr]                                                                                                                                [tr]                                                        [td]小海豚[/td]                                                        [td]                                                                                                                                        产物一
  4.                                                                         ¥500
  5.                                                                
  6.                                                         [/td]                                                        [td]                                                                                                                                        产物二
  7.                                                                         ¥500
  8.                                                                
  9.                                                         [/td]                                                        [td]                                                                                                                                        产物三
  10.                                                                         ¥560
  11.                                                                
  12.                                                         [/td]                                                        [td]¥400[/td]                                                [/tr]                                                [tr]                                                        [td]美的[/td]                                                        [td]                                                                                                                                        产物一
  13.                                                                         ¥200
  14.                                                                
  15.                                                         [/td]                                                        [td]                                                                                                                                        产物二
  16.                                                                         ¥500
  17.                                                                
  18.                                                         [/td]                                                        [td]                                                                                                                                        产物三
  19.                                                                         ¥500
  20.                                                                
  21.                                                         [/td]                                                        [td]¥400[/td]                                                [/tr]                                                [tr]                                                        [td]志高[/td]                                                        [td]                                                                                                                                        产物一
  22.                                                                         ¥500
  23.                                                                
  24.                                                         [/td]                                                        [td]                                                                                                                                        产物二
  25.                                                                         ¥5900
  26.                                                                
  27.                                                         [/td]                                                        [td]                                                                                                                                        产物三
  28.                                                                         ¥500
  29.                                                                
  30.                                                         [/td]                                                        [td]¥400[/td]                                                                        [/table]                       
  31.                
  32.                        
复制代码
 

来源:https://blog.csdn.net/qq_43721274/article/details/112030826
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )