JS GRIDTREE

  //折叠树效果
    var num = 0;
    $.extend({
        Init_CollapseTree: function(parent_div) {
            var parent_ul = $("#" + parent_div).children("ul");
            //Grid的列头
            parent_ul.children("div").eq(0).addClass("tree-head");
            parent_ul.children("div").children("div").each(function(i) {
                if (0 == i) {
                    $(this).addClass("tree-head-title");
                }
                else {
                    $(this).addClass("tree-head-column");
                }
            })

            //************************以下都为数据行*********************************
            var div_column = $("<div class='tree-data-column'></div>");
            var span = $("<span></span>");
            var div = $("<div class='tree-div'></div>");
            //页面初始化时把所有子节点全部关闭
            parent_ul.find("ul").hide();
            //生成数据列
            parent_ul.children("li").each(function(i) {
                var div_1 = $(div).clone();
                var span_img = $(span).clone();
                //重构页面布局，遍历为每个li下的span标记,分别套上div头,折叠列span样式为tree-data-title,数据列div为tree-data-column
                $(this).children("span").each(function(i) {

                    var div_2 = $(div_column).clone();
                    if (0 == i) {
                        $(div_2).removeClass('tree-data-column');
                        $(div_2).addClass('tree-data-title');
                    }
                    var div_now = $(this).clone();
                    $(div_2).append(div_now);
                    $(this).parent().append(div_2);
                    $(this).remove();

                })
                //把带上div头的span再装入一个DIV中,把tree-data-title 和tree-column装入div-tree的div中并把DIV呈现在页面中
                $(div_1).append($(this).children("div"));
                $(this).prepend(div_1);

                //插入【展开/折叠】图标，(如果不是最小子节点)
                if ($(this).children("ul").children('li').length > 0) {
                    $(span_img).addClass('tree-collapsed');
                    $(span_img).bind('click', function() {
                        var oldclass = $(this).attr("class");
                        var newclass = oldclass == "tree-collapsed" ? "tree-expanded" : "tree-collapsed";
                        if (oldclass == "tree-collapsed") {
                            $(this).parent().parent().next("ul").slideDown("slow");
                        }
                        else {
                            $(this).parent().parent().next("ul").slideUp("normal");
                        }
                        $(this).removeClass(oldclass);
                        $(this).addClass(newclass);
                    })
                }
                else {
                    $(span_img).addClass('tree-indent');
                }
                div_1.children().eq(0).prepend(span_img);
                //if ($(this).children("ul").children('li').length > 0) {
                num = 0;
                //以Ul节点进行递归
                $.BindChild($(this).children("ul"));
                //}
            })
        },
        BindChild: function(parent_ul) {
            var div = $("<div class='tree-div'></div>");
            var div_column = $("<div class='tree-data-column'></div>");
            var span = $("<span></span>");
            num++;
            parent_ul.children("li").each(function(i) {
                var div_1 = $(div).clone();
                var span_img = $(span).clone();
                //重构页面布局，遍历为每个li下的span标记,分别套上div头,折叠列span样式为tree-data-title,数据列div为tree-data-column
                $(this).children("span").each(function(i) {
                    var div_2 = $(div_column).clone();
                    if (0 == i) {
                        $(div_2).removeClass('tree-data-column');
                        $(div_2).addClass('tree-data-title');
                    }
                    var div_now = $(this).clone();
                    $(div_2).append(div_now);
                    $(this).parent().append(div_2);
                    $(this).remove();

                })

                //把带上div头的span再装入一个DIV中,把tree-data-title 和tree-column装入div-tree的div中并把DIV呈现在页面中
                $(div_1).append($(this).children("div"));
                $(this).prepend(div_1);

                //插入【展开/折叠】图标，(如果不是最小子节点)
                if ($(this).children("ul").children('li').length > 0) {
                    $(span_img).addClass('tree-collapsed');
                    $(span_img).bind('click', function() {
                        var oldclass = $(this).attr("class");
                        var newclass = oldclass == "tree-collapsed" ? "tree-expanded" : "tree-collapsed";
                        if (oldclass == "tree-collapsed") {
                            $(this).parent().parent().next("ul").slideDown("slow");
                        }
                        else {
                            $(this).parent().parent().next("ul").slideUp("normal");
                        }
                        $(this).removeClass(oldclass);
                        $(this).addClass(newclass);
                    })
                }
                else {
                    $(span_img).addClass('tree-indent');
                }
                div_1.children().eq(0).prepend(span_img);

                //在【展开/折叠】图标后插入相关缩进行数
                for (var i = 0; i < num; i++) {
                    var span_indent = $(div).clone();
                    $(span_indent).addClass('tree-indent');
                    $(this).children("div").children("div").eq(0).prepend(span_indent);

                }
                //以Ul节点进行递归
                //if ($(this).children("ul").children('li').length > 0) {
                num = 0;
                $.BindChild($(this).children("ul"));
                //}
            })
        }
    });
})

 

/*------------------折叠树样式--------------*/
/*折叠的每一行*/
.tree-div
{
 border-bottom: 1px dotted #ccc;
 width: 100%;
 height: 22px;
}
/*缩进空格*/
.tree-indent
{
 display: inline-block;
 height: 22px;
 float:left;
 vertical-align: middle;
 width: 16px;
 border: none;
}
/*关闭的树图标*/
.tree-collapsed
{
 display: inline-block;
 height: 22px;
 vertical-align: middle;
 width: 16px;
 cursor: pointer;
 background: url("validate/tree_arrows.gif") no-repeat scroll 0 0 transparent;
}
/*展开的树图标*/
.tree-expanded
{
 display: inline-block;
 height: 22px;
 vertical-align: middle;
 width: 16px;
 cursor: pointer;
 background: url(validate/tree_arrows.gif) no-repeat scroll -18px 0 transparent;
}
/*数据列---字段样式*/
.tree-data-title
{
 width: 280px;
 height: 22px;
 float: left;
 border-right: 1px dotted #ccc;
 line-height: 22px;
}
/*数据列---数据样式*/
.tree-data-column
{
 width: 150px;
 height: 22px;
 float: left;
 border-right: 1px dotted #ccc;
 text-align: center;
 line-height: 25px;
}
/*grid顶部模板行样式*/
.tree-head
{
 width: 100%;
 height: 27px;
 background: url(validate/datagrid_header_bg.gif) repeat-x;
 border-bottom: 1px solid #ccc;
}
/*grid顶部模板行--数据部分样式*/
.tree-head-title
{
 border-right: 1px dotted #ccc;
 width: 280px;
 height: 26px;
 text-align:center;
 font-size:14px;
 line-height:26px;
 float: left;
}
/*grid顶部模板行--数据部分样式*/
.tree-head-column
{
 border-right: 1px dotted #ccc;
 width: 150px;
 height: 26px;
 text-align:center;
 font-size:14px;
 line-height:26px;
 float: left;
}

        <div runat="server" id="grid">
            <ul>
                <div>
                    <div>
                        字段</div>
                    <div>
                        2013-03(万)</div>
                    <div>
                        2013-06(万)</div>
                </div>
                <li><span>其他经营收益</span><span>0</span><span>0</span>
                    <ul>
                        <li><span>投资净收益</span><span>0</span><span>2</span>
                            <ul>
                                <li><span>其中：对联营企业和合营企业的投资收益</span><span>0</span><span>0</span></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>