Easyui-树(Tree)

来源:互联网 发布:东西的知乎 编辑:程序博客网 时间:2024/06/08 09:28

这里写图片描述
这个主要的拿到的json数组不是标准的tree的命名格式,然后实现重新转换
1.获取的数据样式

 var testdata=[{"nodeId":"1001","parendId":"apple","nodeName":"水果"},{"nodeId":"1002","parentId":"1001","nodeName":"苹果"},{"nodeId":"1003","parentId":"1001","nodeName":"梨"},{"nodeId":"1004","parentId":"1002","nodeName":"红富士"},{"nodeId":"1005","parentId":"1002","nodeName":"花牛"},{"nodeId":"1006","parentId":"1002","nodeName":"黄元帅"},{"nodeId":"1007","parentId":"1002","nodeName":"澳洲青苹"},{"nodeId":"1008","parentId":"1002","nodeName":"嘎啦果"},{"nodeId":"1009","parentId":"1003","nodeName":"苹果梨"},{"nodeId":"2000","parentId":"1003","nodeName":"酥梨"},{"nodeId":"2001","parentId":"1003","nodeName":"雪花梨"},{"nodeId":"2002","parentId":"1003","nodeName":"鸭梨"},{"nodeId":"2003","parentId":"1003","nodeName":"香梨"},{"nodeId":"2003","parentId":"1001","nodeName":"香蕉"},{"nodeId":"2003","parentId":"1001","nodeName":"芒果"},{"nodeId":"2003","parentId":"1001","nodeName":"猕猴桃"}];

2.转换方法

 $("#tree_test").tree({    data:testdata,    loadFilter: function(rows){        return convert(rows);    },    //点击事件    onClick: function(node){        alert(node.text);  // alert node text property when clicked    }});    function convert(rows){    function exists(rows, parentId){        for(var i=0; i<rows.length; i++){            if (rows[i].nodeId == parentId) return true;        }        return false;    }    var nodes = [];    // get the top level nodes    for(var i=0; i<rows.length; i++){        var row = rows[i];        if (!exists(rows, row.parentId)){            nodes.push({                id:row.nodeId,                text:row.nodeName            });        }    }    var toDo = [];    for(var i=0; i<nodes.length; i++){        toDo.push(nodes[i]);    }    while(toDo.length){        var node = toDo.shift();    // the parent node        // get the children nodes        for(var i=0; i<rows.length; i++){            var row = rows[i];            if (row.parentId == node.id){                var child = {id:row.nodeId,text:row.nodeName};                if (node.children){                    node.children.push(child);                } else {                    node.children = [child];                }                toDo.push(child);            }        }    }    return nodes;};

3.标准数据格式
这里写图片描述
数据格式:

var testdata2=[{    "id":1,    "text":"Folder1",    "iconCls":"icon-save",    "children":[{        "text":"File1",        "checked":true    },{        "text":"Books",        "state":"open",        "attributes":{            "url":"/demo/book/abc",            "price":100        },        "children":[{            "text":"PhotoShop",            "checked":true        },{            "id": 8,            "text":"Sub Bookds",            "state":"closed"        }]    }]},{    "text":"Languages",    "state":"closed",    "children":[{        "text":"Java"    },{        "text":"C#"    }]}];

js代码:

$("#tree_test2").tree({    data:testdata2});
原创粉丝点击