异步加载数据的 js tree (基于Jquery)

　　在网页中经常要用到显示拥有层级关系的数据，比如信息发布网站的栏目菜单、某单位的组织结构等等。对于这类数据一般采用树形结构来显示，这样结构清晰明了，操作方便。在asp.net中有TreeView的组件，它的功能已经比较强大。但往往针对不同的项目的时候，他的扩展性，维护性个人感觉不太好。所以在自己写了一个基于jquery 的树js组件，事实完全可以抛离jquery用javascript就行，自己还是懒了点。

　　这个组件只能以异步的方式加载数据，自己没有写同步的。感觉同步加载数据的用处不是很大，不如一步到位直接写成异部的。组件是没有层级限制的。浏览器的兼容性自己只在IE10和Chrome 23中进行了测试，这里只想与大家分享设计的思路，至于真正的实用性，我自己的代码能力有限，其实不能得到什么很广泛的应用。

　　基本的HTML代码如下：

<div class="div_item" spath="1.1">
            <ul id="b7b16a42-060d-4395-b7db-6cc1434513e3" class="ul_item">
                <li class="ltr_expanded"></li>
                <li class="lim_expanded"></li>
                <li class="lte">黑龙江省</li>
            </ul>
        </div>

　　这是tree中的一个单元，用ul元素 显示了该单元中整行的结构内容。如果添加子节点，只需要在<div class="div_item" spath="1.1">元素后面追加一个DIV元素即可，控制好DIV的左侧距离既可以清晰的显示属性结构。代码整体很简单，没什么好说的，直接贴出供大家参考：

treeSJ01.js

/*!
 * 基于Jquery 的Tree插件
 * 只可以异步加载数据
 * 三角号箭头展开图标
 * Author:Jann
 * Date: 2012-11-15
 */
$.fn.Tree = function (settings) {
    var dfop = {
        method: "POST",
        datatype: "JSON",
        url: "",
        paramValue: "",
        redirectListUrl: "",
        redirectEditUrlB: ""
    }
    $.extend(dfop, settings);
    var me = $(this);
    var id = me.attr("id");
    if (id == null || id == "") {
        id = "bbtree" + new Date().getTime();
        me.attr("id", id);
    }
    buildTreeNode(me, 1, dfop.paramValue);
    function buildTreeNode(objDiv, spath, parentID) {
        objDiv.after("<div id='tree_div_wait'></div>");
        asyncLoadNodeData(parentID, function (result) {
            if (result.length > 0) {
                nodeBuild(objDiv, result, spath);
            }
        });
    }
    function nodeBuild(objectDiv, nodes, spath) {
        var html = [];
        var nodeLen = 0;
        if (spath != 1) {
            nodeLen = spath.split('.').length - 1;
        }
        html.push("<div style='clear:both;margin-left: 20px;'>");
        for (var i = 0; i < nodes.length; i++) {
            if (i == nodes.length - 1) {
                slast = 1;
            }
            html.push("<div class='div_item' spath='" + spath + "." + (i + 1) + "'>");
            html.push("<ul id='" + nodes[i].TreeID + "' class='ul_item'>");
            if (nodes[i].HasChild == 1) {
                html.push("<li class='ltr_collapsed'></li>");
            }
            else {
                html.push("<li class='ltr_none'></li>");
            }
            html.push("<li class='lim_collapsed'></li>");
            html.push("<li class='lte'>" + nodes[i].Name + "</li>");
            html.push("</ul>");
            html.push("</div>");
        }
        html.push("</div>");
        $("#tree_div_wait").remove();
        objectDiv.after(html.join(""));
        for (var j = 0; j < nodes.length; j++) {
            $("div[spath='" + spath + "." + (j + 1) + "'] li:first:not([class='ltr_none'])")
                    .mouseenter(triangleME)
                    .mouseleave(triangleML)
                    .click(nodeClick);
        }
    }
    function asyncLoadNodeData(parentID, callback) {
        var _data = { parentid: parentID };
        $.ajax({
            type: dfop.method,
            url: dfop.url,
            data: _data,
            dataType: dfop.datatype,
            success: callback,
            error: function (e) {
                alert("load data error!");
            }
        });
    }
    function nodeClick(e) {
        var itemContainer = $(this).parent().parent();
        var spath = itemContainer.attr("spath");
        var targetLI = e.target || e.srcElement;
        switch (targetLI.className) {
            case "ltr_collapsed_B":
                $(this).removeClass("ltr_collapsed_B").addClass("ltr_expanded_B");
                if ($("div[spath='" + spath + ".1']").length == 0) {
                    buildTreeNode(itemContainer, spath, $(this).parent().attr("id"));
                }
                else {
                    $("div[spath='" + spath + ".1']").parent().css("display", "block");
                }
                $(this).next().removeClass("lim_collapsed").addClass("lim_expanded");
                break;
            case "ltr_expanded_B":
                $(this).removeClass("ltr_expanded_B").addClass("ltr_collapsed_B");
                $("div[spath='" + spath + ".1']").parent().css("display", "none");
                $(this).next().removeClass("lim_expanded").addClass("lim_collapsed");
                break;
        }
    }
    function triangleME() {
        var className = $(this).attr("class");
        var newClassName = className + "_B";
        $(this).removeClass(className).addClass(newClassName);
    }
    function triangleML() {
        var className = $(this).attr("class");
        var newClassName = className.replace('_B', '');
        $(this).removeClass(className).addClass(newClassName);
    }
}

TreeSJ.css

body { font-size: 12px; }
.ul_item { clear: both; margin: 0px; padding: 0px; }
    .ul_item li { list-style-type: none; float: left; height: 22px; display: block; line-height: 22px; background-position: center center; background-repeat: no-repeat;}
        .ul_item li.ltr_collapsed { width: 20px; background-image: url('images/itemCollapsedIcon.png'); }
        .ul_item li.ltr_collapsed_B { width: 20px; background-image: url('images/itemCollapsedIconB.png'); }
        .ul_item li.ltr_expanded { width: 20px; background-image: url('images/itemExpandedIcon.png'); }
        .ul_item li.ltr_expanded_B { width: 20px; background-image: url('images/itemExpandedIconB.png'); }
        .ul_item li.ltr_none { width: 20px; background-image: url(''); }
        .ul_item li.lim_collapsed { width: 20px; background-image: url('images/ext_n.png'); }
        .ul_item li.lim_expanded { width: 20px; background-image: url('images/ext_y.png'); }
        .ul_item li.lte { line-height: 25px; }
.div_item { float: left; clear: both; }
#tree_div_wait
{
    height: 22px;
    float: left;
    clear: both;
    width: 22px;
    background-position: center center;
    background-image: url('images/tree-wait.gif');
    background-repeat: no-repeat;
    margin-left:20px;
}

前台调用：

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TreePage</title>
    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/tree/treeSJ01.js"></script>
    <link href="~/Content/TreeSJ.css" rel="stylesheet" />
    <script>
        $().ready(function () {
            $("#treediv").Tree({
                'url': '@Url.Action("GetData")',
                'paramValue':'00000000-0000-0000-0000-000000000000'
            });
        });
    </script>

</head>
<body>
    <div id="treediv">
    </div>
</body>
</html>

json 数据结构

    public class Tree
    {
        public Guid TreeID { set; get; }
        public string Name { set; get; }
        public Guid ParentID { set; get; }
        public string Url { set; get; }
        public int HasChild { set; get; }
    }

 

总结：自己以前写了一个带网格线、加好图标的Tree但是代码很罗嗦，所以又写了一个三角号标的。代码中有一个地方大家需要注意，就是在读取数据的时候用数据参数，自己写死为parentid，这样如果是不同的参数，就需要将treeSJ01.js文件中的参数名手动更改，我自己还没有找到很好的解决方法。