0

我正在使用此站点中的拖放操作来使用此示例：

我在同一页面中使用 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

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

有什么建议吗？

4

1 回答 1

0

源容器

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));
});

检查classList函数

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”。它对调试和编程有很大帮​​助，没有它我很难找到解决方案。

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

于 2012-05-14T08:04:37.157 回答