Dojo Dnd 问题:使用 JavaScript 通过 Dnd 项类型转换为 JSON

Dojo Dnd issue: Convert to JSON by Dnd item types with JavaScript

本文关键字：Dnd 类型转换 JSON 通过 JavaScript 问题 使用 Dojo      更新时间：2023-09-26

我使用此示例从此站点拖放：

我在同一页面中使用 Dnd 项目类型示例创建容器。喜欢这个;

源容器 

var catalog = new dojo.dnd.Source("catalogNode", {
    accept: ["inStock,outOfStock"]
});
catalog.insertNodes(false, [
    { data: "Wrist watch",        type: ["inStock"] },
    { data: "Life jacket",        type: ["inStock"] },
    { data: "Toy bulldozer",      type: ["inStock"] },
    { data: "Vintage microphone", type: ["outOfStock"] },
    { data: "TIE fighter",        type: ["outOfStock"] },
    { data: "Apples",             type: ["inStock"] },
    { data: "Bananas",            type: ["inStock"] },
    { data: "Tomatoes",           type: ["outOfStock"] },
    { data: "Bread",              type: ["inStock"] }
]);
catalog.forInItems(function(item, id, map){
    // set up CSS classes for inStock and outOfStock
    dojo.addClass(id, item.type[0]);
});

目标容器

var wishlist = new dojo.dnd.Source("wishlistNode", {
    accept: ["inStock","outOfStock"]
});

在这里我正在做什么;

dojo.connect(dojo.byId('JsonBtn'), 'onclick', function() {
        var catalogNode = document.getElementById("catalogNode");
        //Get all nodes in the assignRoleListContainer
        var container2 = catalogNode.getAllNodes();
        var results="";
        var catalog_arr = [];
        var len = container2.length;
        for(var i=0;i<len;i++){
            results = catalogNode.childNodes[i].childNodes[0].nodeValue;
            catalog_arr.push(results);
        }
        //Json
        var myJSON2 = "";
        myJSON2 = JSON.stringify({catalog: catalog_arr});
    });

我设法用 JSON 转换所有数据;

{"catalog":["Life jacket","Toy bulldozer","Wrist watch","Apples","Bananas","Bread","Tomatoes","Vintage microphone","TIE fighter"]}

但是现在我想将项目转换为 json，但关于它们的类型，例如

如果输入库存

{"inStock":["Life jacket","Toy bulldozer","Wrist watch","Apples","Bananas","Bread"]}

如果类型缺货

{"outOfStock":["Tomatoes","Vintage microphone","TIE fighter"]}

有什么建议吗？

源容器 

var catalog = new dojo.dnd.Source("catalogNode", {
    accept: ["inStock","outOfStock"]
});
catalog.insertNodes(false, [
    { data: "Wrist watch",        type: ["inStock"] },
    { data: "Life jacket",        type: ["inStock"] },
    { data: "Toy bulldozer",      type: ["inStock"] },
    { data: "Vintage microphone", type: ["outOfStock"] },
    { data: "TIE fighter",        type: ["outOfStock"] },
    { data: "Apples",             type: ["inStock"] },
    { data: "Bananas",            type: ["inStock"] },
    { data: "Tomatoes",           type: ["outOfStock"] },
    { data: "Bread",              type: ["inStock"] }
]);
catalog.forInItems(function(item, id, map){
    // set up CSS classes for inStock and outOfStock
    dojo.addClass(id, item.type[0]);
});

目标容器

var wishlist = new dojo.dnd.Source("wishlistNode", {
    accept: ["inStock","outOfStock"]
});

带有 Id=JsonBtn 和 onClick 事件的按钮，将目标容器中的数据转换为 json

dojo.connect(dojo.byId('JsonBtn'), 'onclick', function() {
    var target_container = wishlistNode.getAllNodes();
    var inStock_arr = [];
    var outOfStock_arr = [];
    for(var i=0;i<target_container.length;i++){
        if (hasClass("inStock", target_container[i].classList)){
            var inStock_results = target_container[i].childNodes[0].nodeValue;
            inStock_arr.push(inStock_results);                              
        }                           
        else if(hasClass("outOfStock", target_container[i].classList)){
            var permissions_results = target_container[i].childNodes[0].nodeValue;
            outOfStock_arr.push(outOfStock_results);
        }
    }
    var result={};
    result["inStock"]=inStock_arr;
    result["outOfStock"]=outOfStock_arr;
    alert(JSON.stringify(result));
});

检查类列表函数

function hasClass(className, classList){
    for (var i=0; i<classList.length; i++){
        if(classList[i]==className){
            return true;
        }               
    }
    return false;
}
输出

：（这个输出对我来说也很好）

{
 "inStock":[
    "Wrist watch", "Life jacket", "Toy bulldozer", "Apples", "Bananas", "Bread"],
 "outOfStock":[
    "Vintage microphone", "TIE fighter", "Tomatoes"]
}

首先，感谢FireFox团队的"FireBug"。它在调试和编程方面有很大帮助，没有它，我很难找到解决方案。

如果需要任何解释，我很乐意提供帮助。

相关文章：