Easy-ui表格间的拖拽功能，并循环table获取数据转成JSON数据

最新推荐文章于 2022-11-29 15:58:42 发布

正一品程序员

最新推荐文章于 2022-11-29 15:58:42 发布

阅读量363

点赞数

文章标签： json javascript html5

本文链接：https://blog.csdn.net/weixin_46060121/article/details/120314979

版权

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>10、Easy-ui拖拽功能</title>
    <link rel="stylesheet" href="./js/jquery-easyui-1.8.6/themes/default/easyui.css">
    <link rel="stylesheet" href="./js/jquery-easyui-1.8.6/themes/icon.css">
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <style type="text/css">
        ul,
        li {
            list-style: none;
            padding: 0;
        }

        .box {
            border: 1px solid #ccc;
            width: 300px;
            height: 400px;
            float: left;
            margin: 5px;
        }

        .drag {
            width: 100px;
            min-height: 50px;
            padding: 10px;
            margin: 5px;
            border: 1px solid #ccc;
            background: #AACCFF;
        }

        .dp {
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .over {
            background: #FBEC88;
        }

        .label-input {
            width: 100px;
            height: 30px;
            border: 1px solid #ddd;
            border-radius: 3px;
            display: inline-block;
            margin: 10px;
        }

        .table {
            float: left;
            margin: 5px;
        }

        .table:first-child {
            margin-right: 500px;
        }

        .table td {
            height: 50px;
            text-align: center;
            border: 0.5px solid #000;

        }

        .table td img,
        .table td input {
            width: 100%;
            height: 100%;
        }

        .table td input {
            border: none;
            outline: none;
        }
    </style>
</head>

<body>
    <table id="source" class="table" border="1" cellspacing="0px" width="500px;" align="center">
        <tr>
            <td>品名</td>
            <td>产品照片</td>
            <td>海关编码</td>
            <td>材质</td>
        </tr>
        <tr>
            <td class="d1">联塑</td>
            <td>
                <img src="./img/1.jpeg" alt="">
            </td>
            <td class="d1">DCG56248</td>
            <td class="d1">
                <ul>
                    <li>塑料</li>
                    <li>钢铁</li>
                    <li>泥巴</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>联塑</td>
            <td>
                <img src="./img/1.jpeg" alt="">
            </td>
            <td>DCG56248</td>
            <td>塑料</td>
        </tr>
        <tr>
            <td>联塑</td>
            <td>
                <img src="./img/1.jpeg" alt="">
            </td>
            <td>DCG56248</td>
            <td>塑料</td>
        </tr>
        <tr>
            <td>联塑</td>
            <td>
                <img src="./img/1.jpeg" alt="">
            </td>
            <td>DCG56248</td>
            <td>塑料</td>
        </tr>
    </table>

    <table class="table" border="1" cellspacing="0px" width="500px;" align="center">
        <thead>
            <tr>
                <td>品名</td>
                <td>产品照片</td>
                <td>海关编码</td>
                <td>材质</td>
            </tr>
        </thead>
        <tbody id="myTable">
            <tr>
                <td class="target">
                </td>
                <td>
                    <img src="./img/1.jpeg" alt="">
                </td>
                <td class="target">
                </td>
                <td class="target">
                </td>
            </tr>
            <tr>
                <td>联塑</td>
                <td>
                    <img src="./img/1.jpeg" alt="">
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>塑料</td>
            </tr>
            <tr>
                <td>联塑</td>
                <td>
                    <img src="./img/1.jpeg" alt="">
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>塑料</td>
            </tr>
            <tr>
                <td>联塑</td>
                <td>
                    <img src="./img/1.jpeg" alt="">
                </td>
                <td>
                    <input type="text" />
                </td>
                <td>塑料</td>
            </tr>
        </tbody>
    </table>
    <div style="clear:both"></div>
    <footer style="text-align: center;">
        <button id="button">保存</button>
    </footer>
    <script>
        $(function () {
            $('#button').on('click', function () {
                //jq中$('#dom')获取的元素和原生js中document.getElementById("dom")获取的元素不一样。（jq获取的是数组对象，js获取的是dom对象）
                console.log(document.getElementById("myTable"));
                console.log($('#myTable')[0]);
                // var banktrs = document.getElementById("myTable").rows; //rows 集合返回表格中所有行（TableRow 对象）的一个数组，即一个 HTMLCollection。该集合包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。
                var banktrs = $('#myTable')[0].rows;
                var goodsInfos = []; //新建一个数组
                for (var i = 0; i < banktrs.length; i++) {
                    var tds = banktrs[i].cells; //cells 集合返回表格中所有 <td> 或 <th> 元素。
                    var goodsInfo = {};
                    goodsInfo.name = tds[0].innerText;
                    goodsInfo.productImg = tds[1].innerText;
                    goodsInfo.customsCode = tds[2].innerText;
                    goodsInfo.texture = tds[3].innerText;
                    goodsInfos.push(goodsInfo);
                }
                console.log(JSON.stringify(goodsInfos).replace(/\ +/g,"").replace(/[\r\n]/g,""))
            })
            $('.d1').draggable({ //draggable可拖拽的
                proxy: 'clone', //拖动时要使用的代理元素，设置为 'clone' 时，克隆元素将被用作代理。如果指定一个函数，它必须返回一个 jQuery 对象。
                revert: true, //如果设置为 true，拖动结束后元素将返回它的开始位置。
                cursor: 'auto', //拖动时的 css 光标（cursor）。
                // 目标对象开始拖动时触发。
                onStartDrag: function () {
                    //返回选项（options）属性（property）。
                    $(this).draggable('options').cursor = 'not-allowed';
                    //如果设置了代理（proxy）属性就返回拖动代理（proxy）。
                    $(this).draggable('proxy').addClass('dp');
                },
                //拖动停止时触发。
                onStopDrag: function () {
                    $(this).draggable('options').cursor = 'auto';
                }
            });

            $('.target').droppable({ //droppable可放置的
                accept: '.d1', //确定将被接受的可拖动元素。
                // 当可拖动元素被拖进来时触发。source 参数指被拖动的 DOM 元素。
                onDragEnter: function (e, source) {
                    $(source).draggable('options').cursor = 'auto';
                    $(source).draggable('proxy').css('border', '1px solid red');
                    $(this).addClass('over');
                },
                //当可拖动元素被拖离开时触发。source 参数指被拖动的 DOM 元素。
                onDragLeave: function (e, source) {
                    $(source).draggable('options').cursor = 'not-allowed';
                    $(source).draggable('proxy').css('border', '1px solid #ccc');
                    $(this).removeClass('over');
                },
                //当可拖动元素被放下时触发。source 参数指被拖动的 DOM 元素。
                onDrop: function (e, source) {
                    let sourceClone = $(source).clone()
                    console.log(sourceClone);
                    $(this).removeClass('over');
                    let text = $(sourceClone).text().replace(/\ +/g,"").replace(/[\r\n]/g,"");//.replace(/\ +/g,"")去除空格，.replace(/[\r\n]/g,"")去除换行
                    $(this).append(text)
                }
            });

        });
    </script>
</body>

</html>

正一品程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Easy-ui表格间的拖拽功能，并循环table获取数据转成JSON数据

效果图：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>10、Easy-ui拖拽功能</title> <link rel="stylesheet" href="./js/jquery-easyui-1.8.6/themes/default/easyui.css"> <link rel="stylesheet" h
复制链接

扫一扫