`

tree

 
阅读更多
<script src="<%=request.getContextPath()%>/resources/scripts/json2.js" type="text/javascript" ></script>
------------------------------------------------------
    <style type="text/css">
        b
        {
            cursor: pointer;
        }
        b:hover
        {
            border-bottom:2px #ee8800 solid;
        }
        button{
        border:none;
        }
        #atree ul>li{
        border-left:1px #999 dotted;
        margin-left: 10px;
        padding:3px;
        }
        #atree{
        margin-left:0px;
        border:none;
        }
        .b-space{
        width:30px;
        }
        #treeDiv{
        width:965px;
        float:left;
        margin-top:0px;
        background-color:#FFF;
        height:300px;
        overflow-y:auto;
        }
/*         #level-indicator
        {
        position:absolute;
        margin-top:20px;
        margin-left:-140px;
        } */
       
        .level
        {
            margin-top:5px;
            font-size:16px;
            font-weight:bold;
            color:#999;
            margin-left:5px;
            background-color:#fff;
         }
    </style>
-----------------------------
<div id="treeDiv">
    <ul id="atree">
        <li id="${rootNode.deptId}" data-level="${rootNode.hrLevel}">
            <button data-fold="1">+</button><b id="${rootNode.deptId}_b">${rootNode.descr}</b>
        </li>
    </ul>
</div>
---------------------------
    <script type="text/javascript">
    // added on 2013/01/18. start
   
    var fromPageId="<c:out value='${fromPageId}'/>";
    // var nodePath="0000014000,CB00012321,CB00018267,CB00018263";
    var nodePath="<c:out value='${nodePath}'/>";
   
    var pathLength=null;
    var nodePathArray=null;
    var targetNodeDeptId=null;
    var curIndex=0;
        $(document).ready(function () {
        if( fromPageId=="newHrPage" ){
        //alert("111"+fromPageId);
                pathLength=nodePath.split(",").length;
                //alert("222"+pathLength);
                nodePathArray=nodePath.split(",").reverse();
                //alert("333"+nodePathArray);
                targetNodeDeptId=nodePathArray[pathLength-1];
                //alert("444"+targetNodeDeptId);
               
                //console.info("nodePathArray = " + nodePathArray);
        }

       
       
        // added on 2013/01/18. end
       
            $('#atree li button').live("click", function () {
            //debugger;
                var button = $(this);
                var li = $(this).parent();
                var ul = li.children('ul');
                if (button.attr("data-fold") == 1) {

                    if (ul.length == 0) {
                        ObtainNodes(li);
                    }
                    button.attr("data-fold", 0);
                    button.html("-");
                    ul.show();
                }
                else if (button.attr("data-fold") == 0) {
                    button.attr("data-fold", 1);
                    button.html("+");
                    ul.hide();
                }
            });

                       
            $('#atree li b').live("click",function () {
            var b = $(this);
            $('#atree li b').css('background-color', 'transparent');
            b.css('background-color', '#66CCFF');
                var li = $(this).parent();
                var deptId = li.attr("id");
                var hrListViewUrl = "<%=request.getContextPath()%>/hr/getIframeContent_SonNodeDetailByNode.do?deptId="+deptId;
                // $('#hr-frame').attr('src', hrListViewUrl);
                // window.frames["hr-frame"].location.reload();
               
               
                var iframe = document.getElementById("hr-frame");
                iframe.setAttribute("src",hrListViewUrl);
            });
           
/*             $('#atree li').live({
            mouseenter:
                       function()
                       {
            var li = $(this);
                         $('#level-indicator').html('Level: '+li.attr('data-level'));
                       },
                    mouseleave:
                       function()
                       {
                    $('#level-indicator').html('');
                       }
            }); */
            // added on 2013/01/18.start. jump to on node.
           
            if(fromPageId=="newHrPage"){
            // expand root.
                $('#atree li button').trigger("click");
            }
           
           
            // added on 2013/01/18.end
        });
       
       
        // added by Wangbing on 2013/01/18. start
        var curPathNodeDeptId=null;
        // added by Wangbing on 2013/01/18. end
       
        function ObtainNodes(li) {
            //li.append('<ul><li' + ' id="' + 1 + '"><button data-fold="1">+</button><b>' + 2 + '</b></li></ul>');
            //alert("a");
            $.post("<%=request.getContextPath()%>/hr/getSonNodesByNode.do", { deptId: li.attr("id"),hrLevel: li.attr("data-level") }, function (data, status) {

                if (status == "success") {
                    if (data != null) {
                    //alert("data= "+data);
                   
                    var r  = JSON.parse(data);
                    //alert(r.length);
                        li.append('<ul></ul>');
                        var ul = li.children('ul');
                        var level = parseInt(li.attr('data-level')) + 1;
                        ul.append('<span class="level">' + level + '</span>');
                        for(var i =0;i<r.length;i++)
                        {
                            //alert("hr No."+i+": " + r[i].deptId +", "+r[i].hrLevel +", "+r[i].descr);
                            var sonLi = $('<li id="' + r[i].deptId + '" data-level="' + r[i].hrLevel + '" data-sonNum="'+r[i].sonNodeNumber+'"></li>');
                            //alert("sonNodeNumber= "+r[i].sonNodeNumber);
                            if (r[i].sonNodeNumber != 0) {
                                sonLi.append($('<button data-fold="1">+</button>'));
                            }
                            else 
                            {
                            sonLi.css('padding-left','32px');
                            }
                            sonLi.append($('<b id="' + r[i].deptId + '_b'+'">' + r[i].descr + '</b>'));
                            ul.append(sonLi);
                        }
                       
                       /* $(r).each(function (index) {
                            var item = $(this);
                            // alert(item.toString());
                            var sonLi = $('<li id="' + item.deptId + '" data-level="' + item.hrLevel + '"></li>');
                            if (item.hasnode) {
                                sonLi.append('<button>+</button>');
                            }
                            sonLi.append('<b>' + item.descr + '</b>');
                            // sonLi.append('<sup>' + item.hrlevel + '</sup>');
                        })*/

                       
                        // added on 2013/01/18. jump to certain node. start
                        if(fromPageId=="newHrPage"){
                           
                            if( li.attr("id")=="TopNode" ){
                            $('#atree li[id="'+nodePathArray[0]+'"] button').trigger("click");
                            }else{
                                //console.info("li.attr('id') : " + li.attr("id"));
                            //console.info("targetNodeDeptId : " + targetNodeDeptId);
                            if( li.attr("id")!=targetNodeDeptId ){
                                    curIndex=curIndex+1;
                                    //console.info("curIndex = " + curIndex + ", nodePathArray[curIndex]" + nodePathArray[curIndex]);
                                    //console.info("data-sonNum = " + li.attr("data-sonNum"));
                                   
                                    //console.info("length= "+$('#atree li[id="'+nodePathArray[curIndex]+'"] button').length);
                                   
                                    if($('#atree li[id="'+nodePathArray[curIndex]+'"] button').length > 0){// not leaf node
                                    $('#atree li[id="'+nodePathArray[curIndex]+'"] button').trigger("click");
                                    }else{// a leaf node.
                                    $('#atree li[id="'+targetNodeDeptId+'"] b[id="'+targetNodeDeptId+'_b"]').trigger("click");
                                    }
                            }else{
                            // alert("found");
                            $('#atree li[id="'+targetNodeDeptId+'"] b[id="'+targetNodeDeptId+'_b"]').trigger("click");
                            fromPageId="";
                            }

                            }

                        }
                     // added on 2013/01/18. jump to certain node. end
                       
                       
                    }// end data.
                }// end succuess
            });// end $post()
        }
    </script>
分享到:
评论

相关推荐

    jsTree中文文档

    **jsTree 中文文档概述** jsTree 是一个流行的JavaScript库,用于在网页上创建交互式的树状视图。它主要用于组织结构化的数据,如文件系统、数据库目录或自定义项目结构。jsTree 支持多种操作,包括点击、拖放、...

    tree(c++ tree容器)

    标题提到的"tree(c++ tree容器)"是一个第三方实现,旨在为C++开发者提供一个类似于STL接口的树容器,方便用户在项目中构建和操作树形数据。 这个源码库的亮点在于它的用法与C++标准库中的其他容器类似,如vector和...

    device-tree-xlnx-master_tree_devicetree2018.3_

    设备树(Device Tree)在嵌入式Linux系统中扮演着至关重要的角色,它是一种数据结构,用于描述硬件配置,使得操作系统内核能够更好地理解和管理硬件资源。`device-tree-xlnx-master_tree_devicetree2018.3_`这个标题...

    jsTree中文api

    **jsTree API详解** jsTree 是一个流行的JavaScript库,用于创建、操作和展示交互式的HTML树状视图。它提供了一套丰富的API,使得开发者能够方便地实现树形结构的各种功能,如添加、删除、修改节点,以及节点的移动...

    speedtree帮助教程

    【速度树(SpeedTree)教程】 SpeedTree是一款广泛应用于游戏开发、影视特效、虚拟现实以及建筑设计等领域的高级树木和植被渲染软件。它以其强大的建模功能、高效的渲染技术和逼真的动态效果而闻名。本教程是专门...

    PowerTree中文教程

    其中,PowerTree作为一款专注于配电网络(PDN)设计的工具,正受到越来越多设计工程师和电源完整性工程师的青睐。它不仅提供了基于原理图的电源早期视图,还有助于优化PDN的设计与性能。本文将系统地介绍PowerTree...

    英文语料库词汇标注软件TreeTagger

    TreeTagger是一款由德国图宾根大学的Philippe Schmid教授开发的著名自然语言处理工具,主要用于对文本进行词性标注、实体识别和句法分析。这个软件在学术界和工业界都得到了广泛的应用,特别是在语言学研究和信息...

    flex带复选框的tree,flex checkboxtree

    在Flex中,Tree组件是用于显示层次结构数据的控件,而"flex带复选框的tree"(Flex CheckboxTree)则是对Tree组件的一种扩展,增加了复选框功能,用户可以对树形结构的节点进行选择或全选操作,常用于权限管理、配置...

    手机端js tree

    在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...

    SPeedtree 7.14 for Unity

    SPeedtree 7.14 for Unity是一款专为Unity引擎设计的高级植被渲染插件,它为游戏开发者提供了强大的自然环境构建工具。在Unity这个广泛使用的跨平台游戏开发框架中,SPeedtree能够帮助设计师们创建出栩栩如生、细节...

    el-tree-selected-tree

    在Element UI库中,`el-tree` 是一个强大的组件,用于构建可交互的树形结构数据展示。在实际开发中,我们经常需要处理用户选择的节点,并可能需要独立展示这些选中节点,甚至允许用户在独立的树结构中进行删除操作。...

    Ajax tree,动态生成Tree

    **Ajax Tree技术详解** 在网页开发中,树形结构(Tree)是一种常见的数据展示方式,尤其在管理和组织层级数据时非常实用。Ajax Tree是利用Ajax技术动态加载和更新树节点,提供用户友好的交互体验。它允许用户在不...

    Excel 建模插件 treeplan

    Excel中的TreePlan是一款强大的建模插件,专用于创建和分析决策树模型。在商业智能、项目管理和风险管理等领域,决策树是一种常用的分析工具,它通过图形化的方式展示各种可能的决策路径及其结果,帮助用户在不确定...

    EasyTree的使用教程

    【EasyTree的使用教程】 EasyTree 是一个轻量级的前端组件,专用于构建和展示树型结构数据。它在Web应用中广泛用于组织和管理层次化的信息,如目录结构、组织架构或权限管理等。这个教程将详细介绍如何使用经过修改...

    使用jsTree实现js树形结构

    **jsTree:构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写,无需依赖其他库,因此对于初学者和有经验的开发者来说,都是一个...

    文件目录生成(tree)

    `Tree` 命令是 Windows 操作系统中一个实用的 DOS 命令,它允许用户以图形化的树状结构来查看指定驱动器或路径的文件夹结构。这种直观的展示方式对于理解和管理文件系统非常有帮助。下面将详细解释 `Tree` 命令的...

    kd-tree的基本教程PDF

    ### KD-Tree基本教程知识点概览 #### 一、引言与背景介绍 - **教程来源**:本教程来源于Andrew W. Moore博士论文的一部分——《Efficient Memory-based Learning for Robot Control》,该章节专用于KD-Tree及其在...

    TableTree 表格树

    《TableTree:构建表格树形结构的实现与应用》 在数据展示中,有时我们需要将层级关系的数据以表格的形式呈现,这时,表格树形结构(TableTree)就显得尤为重要。它将传统二维表格与树状结构相结合,既保留了表格的...

    js tree,checkbox tree

    JavaScript Tree是一种交互式的前端UI组件,它以树形结构展示数据,常用于网站或应用程序的导航、目录组织或数据层级展示。"Checkbox Tree"是这种树结构的一个扩展,它在每个节点上添加了复选框,允许用户进行多选...

    i-Tree最新版2019年中文操作手册

    i-Tree的五大核心产品包括:i-Tree Eco、i-Tree Streets、i-Tree Hydro、i-Tree Vue和i-Tree Species Selector。 1. i-Tree Eco:它能提供整个城市森林的概况分析,通过使用来自社区随机分布样区的现场数据和当地每...

Global site tag (gtag.js) - Google Analytics