基於jquery來製作動態載入樹

　　最新動向的後台樹節點的載入方式。因為以前用的是jquery-treeview外掛程式。 但是上網查了下資料，發現用它來實現樹節點的動態載入還是挺麻煩的。於是我自己寫了個動態載入的方式。下面貼代碼。

css樣式：

.treeview li{background: url(static/images/treeview-default-line0.gif) 0 0 no-repeat; margin: 0; padding: 4px 0pt 4px 16px; margin-left:5px;}.treeview li img{ margin-right:5px; margin-left:5px;}.hitarea{background: url(static/images/treeview-black.gif) -64px -25px no-repeat; height: 16px; width: 16px; margin-left: -16px; float: left; cursor: pointer;}.expandable-hitarea{background-position: -80px -3px;}

js代碼：

for(var i=0; i<data.length; i++){    $("#tree").append(createANode(data[i]))}function createANode(nodeInfo, rootNode) {    var icon_name;    if(nodeInfo.type == 0) {        icon_name = 'icon1.png';    }    else if(nodeInfo.type == 2){        icon_name = 'icon3.gif';    }    else{        icon_name = 'icon2.png';    }    var tree_url = '/admin/web/channel/home/' + nodeInfo.id + '/';    var icon_url = '/static/images/' + icon_name;    if (nodeInfo.have_children == false) {        var parentNode = $('<li></li>');        var html = '<a href= " ' + tree_url + '" target = "django_channel"> ' +'<img  src = "' + icon_url +'" >' + nodeInfo.name + '</a>';        parentNode.append(html);    } else {        var parentNode = $('<li class="expandable"></li>');        var html = ' <div class="hitarea expandable-hitarea"></div><a href = " ' + tree_url + '" target = "django_channel">' + '<img  src = "' + icon_url + '" >'+ nodeInfo.name + '</a><ul style="display: none;"></ul>';        parentNode.append(html);        var nodeId = nodeInfo.id;        //這裡是綁定樹節點的展開事件。        parentNode.find("div").bind("click", function(event) {                if($(this).attr("class")=="hitarea expandable-hitarea") {                    $(this).removeClass().addClass("hitarea collapsable-hitarea").parent().removeClass().addClass("collapsable").find("ul").show();                } else {                    $(this).removeClass().addClass("hitarea expandable-hitarea").parent().removeClass().addClass("expandable").find("ul").hide();                 }            })                parentNode.bind("click", function(event) {           event.stopPropagation();              var dataUrl = "api/channel_tree/" + nodeId + "/";           $.ajaxSettings.async = false;           $.ajax({               type: "get",               url: dataUrl,               success: function(json) {                   var obj = eval('(' + json + ')');                   var nodes = eval('(' + obj.data + ')');                   for(var j=0; j<nodes[0].children.length; j++) {                       createANode(nodes[0].children[j], parentNode);                   }               }           })                   parentNode.unbind("click");        })            }    if(rootNode) {        rootNode.children().last().append(parentNode);    } else        return parentNode;}

本來想用事件委託來做事件綁定的，但是發現用事件委託時不可行的。所以別吐槽這種綁定時間的方式太費效能。

後台把第一層資料通過模板寫在頁面中

資料:

[{"children": [], "name": "\u72d0\u9996", "parent": -1, "have_children": true, "desc": "", "type": 0, "id": 1, "is_subject": false}, {"children": [], "name": "\u65b0\u95fb", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 2, "is_subject": false}, {"children": [], "name": "\u4f53\u80b2", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 3, "is_subject": false}, {"children": [], "name": "\u5a31\u4e50", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 4, "is_subject": false}, {"children": [], "name": "\u8d22\u7ecf", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 5, "is_subject": false}, {"children": [], "name": "\u79d1\u6280", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 7, "is_subject": false}, {"children": [], "name": "\u519b\u4e8b", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 8, "is_subject": false}, {"children": [], "name": "\u661f\u5ea7", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 9, "is_subject": false}, {"children": [], "name": "\u56fe\u5e93", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 10, "is_subject": false}, {"children": [], "name": "\u6d4b\u8bd5", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 11, "is_subject": false}, {"children": [], "name": "\u5973\u4eba", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 326, "is_subject": false}, {"children": [], "name": "\u5176\u5b83", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 328, "is_subject": false}, {"children": [], "name": "\u6e20\u9053", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 561, "is_subject": false}, {"children": [], "name": "\u65e0\u7ebf", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 564, "is_subject": false}, {"children": [], "name": "\u5fae\u535a", "parent": -1, "have_children": false, "desc": null, "type": 0, "id": 565, "is_subject": false}, {"children": [], "name": "\u5e7f\u544a", "parent": -1, "have_children": true, "desc": null, "type": 0, "id": 577, "is_subject": false}].

之後的資料通過綁定點擊事件來擷取介面資料。

給出第一個節點的資料：

{
"status": 0,
"data": "[{\"children\": [{\"children\": [], \"name\": \"\\u6b63\\u6587\\u9875\\u63a8\\u8350\", \"parent\": 1, \"have_children\": false, \"desc\": \"\", \"type\": 1, \"id\": 465, \"is_subject\": false}, {\"children\": [], \"name\": \"UC\", \"parent\": 1, \"have_children\": false, \"desc\": \"\", \"type\": 1, \"id\": 588, \"is_subject\": false}], \"name\": \"\\u72d0\\u9996\", \"parent\": -1, \"have_children\": true, \"desc\": \"\", \"type\": 0, \"id\": 1, \"is_subject\": false}]"
}。

具體產生資料方式不給出了。