|
|
@@ -0,0 +1,87 @@
|
|
|
+<!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>
|
