tianyunperfect
/
web-base--


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!DOCTYPE html>
<html>
<head>
    <title>Sortable JSON Data</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css">
    <script>
        function copyToClipboard(str) {
            var tempInput = document.createElement("input");
            tempInput.style = "position: absolute; left: -1000px; top: -1000px";
            tempInput.value = str;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);
        }

        function copy() {
            var json = JSON.stringify(getSortedData());
            copyToClipboard(json);
            alert("success");
        }

        function getSortedData() {
            return $('#sortable li').map(function () {
                return $(this).data('item');
            }).toArray();
        }

        $(function () {
            // 初始化上传控件
            $('#upload').change(function () {
                var file = this.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var data = JSON.parse(e.target.result);
                        updateSortable(data);
                    };
                    reader.readAsText(file);
                }
            });

            // 初始化拖放排序控件
            $('#sortable').sortable({
                axis: 'y',
                stop: function (event, ui) {
                    saveSortable();
                }
            });

            // 保存排序后的数据到本地
            function saveSortable() {
                var data = $('#sortable li').map(function () {
                    return $(this).data('item');
                }).toArray();
                var json = JSON.stringify(data);
                var blob = new Blob([json], {type: 'application/json'});
                var url = URL.createObjectURL(blob);
                $('#download').attr('href', url);
            }

            // 更新拖放排序控件中的数据
            function updateSortable(data) {
                data.sort(function (a, b) {
                    return (a.labels + ": " + a.name).localeCompare(b.labels + ": " + b.name);
                });
                $('#sortable').empty();
                $.each(data, function (i, item) {
                    var li = $('<li>').data('item', item);
                    $('<div>').text(item.labels + ": " + item.name).appendTo(li);
                    $('#sortable').append(li);
                });
                saveSortable();
            }
        });
    </script>
</head>
<body>
<input type="file" id="upload">
<button id="copyBtn" onclick="copy()">Copy compressed JSON</button>
<ul id="sortable"></ul>
<a href="#" id="download" download="sorted.json">Download Sorted Data</a>
</body>
</html>