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

时间:2012-05-08 11:59:32

标签: javascript json dojo drag-and-drop

我正在使用this site:

中的拖放操作此示例

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

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

如果输入outOfStock

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

有什么建议吗?

1 个答案:

答案 0 :(得分: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”。它在调试和编程方面有很大帮助,没有它我很难找到解决方案。

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