`
zengshaotao
  • 浏览: 792535 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jOrgChart 后端取数--手工构建map

 
阅读更多

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>jOrgChart - A jQuery OrgChart Plugin</title>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>

    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>

    <link rel="stylesheet" href="css/custom.css"/>

 

    

    <!-- jQuery includes -->

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script src="jquery.jOrgChart.js"></script>

 

    <script>

    jQuery(document).ready(function () {

            loadtree();

        });

        //menu_list为json数据

        //parent为要组合成html的容器

 

        function showall(menu_list, parent) {

            for (var menu in menu_list) {

                //如果有子节点，则遍历该子节点

                if (menu_list[menu].children.length > 0) {

                    //创建一个子节点li

                    var li = $("<li></li>");

                    //将li的文本设置好，并马上添加一个空白的ul子节点，并且将这个li添加到父亲节点中

                    $(li).append(" <a  href='javascript:void(0)'  onclick='xx(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").append("<ul></ul>").appendTo(parent);

                    //将空白的ul作为下一个递归遍历的父亲节点传入

                    showall(menu_list[menu].children, $(li).children().eq(1));

                }else {

                //如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中

                    $("<li></li>").append(" <a href='javascript:void(0)' onclick='defineFunc(" + menu_list[menu].id + ");'>" + menu_list[menu].name + "</a>").appendTo(parent);

                }

            }

        }

 

 

        function loadtree() {

            $.ajax({

                url: '<%=request.getContextPath()%>/batchIssueManage.do?method=jsonJorg',

                type : "post",

                error: function () { alert('Error loading PHP document'); },

dataType : 'json',

                success: function (result) {

                    // var json = eval("["+result+"]");//这里中间的括号为中括号 使数据类似[{"username":"张三","content":"沙发"}];的格式

                    var showlist = $("<ul id='org' style='display:none'></ul>");

                    showall(result, showlist);

                    

                    //将生成好的固定格式的ul

                    $("#f").append(showlist);

                    $("#org").jOrgChart();

                }

            });

 

        } 

        function loadtree111() {

var res = [{

   "id": 1,

   "name": "根节点",

   "children": [

       {

           "id": 2,

           "name": "第二层1",

           "data": "",

           "children": ""

       },

       {

           "id": 3,

           "name": "第二层2",

           "data": "",

           "children": ""

       }

   ]

}];

 

//var json = eval("("+res+")");

                    var showlist = $("<ul id='org' style='display:none'></ul>");

                    showall(res, showlist);

                    

                    //将生成好的固定格式的ul

                    $("#f").append(showlist);

                    $("#org").jOrgChart();

                    

                    /*  $("#org").jOrgChart({

           chartElement : "#chart",

           dragAndDrop  : false

       }); */

       

        }

        

        function defineFunc(id){

        alert(id+",ddd");

        }

    </script>

  </head>

 

  <body id="f">

    <div class="topbar">

        <div class="topbar-inner">

            <div class="container">

                <a class="brand" href="#">jQuery Organisation Chart</a>

            </div>

        </div>

    </div>

    

    

    <div id="chart" class="orgChart"></div>

    

    

 

</body>

</html>

 

 

后端代码：

public ActionForward jsonJorg1(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response) {

 

//递归查询数据库效率低下，考虑其他的方式

 

List l2 = new ArrayList();

 

Map m21 = new HashMap();

    m21.put("id", "5");

    m21.put("name", "第三层1");

    m21.put("data", "");

    m21.put("children", "");

   

    Map m22 = new HashMap();

    m22.put("id", "6");

    m22.put("name", "第三层2");

    m22.put("data", "");

    m22.put("children", "");

   

    l2.add(m22);

    l2.add(m21);

   

Map m1 = new HashMap();

    m1.put("id", "2");

    m1.put("name", "第一层1");

    m1.put("data", "");

    m1.put("children", l2);

   

    Map m2 = new HashMap();

    m2.put("id", "3");

    m2.put("name", "第二层2");

    m2.put("data", "");

    m2.put("children", "");

   

    Map m3 = new HashMap();

    m3.put("id", "4");

    m3.put("name", "第二层3");

    m3.put("data", "");

    m3.put("children","");

   

    List l = new ArrayList();

   

    l.add(m1);

    l.add(m2);

    l.add(m3);

   

    Map m = new HashMap();

    m.put("id", "1");

    m.put("name", "232323");

    m.put("data", "");

    m.put("children", l);

   

    JSONArray jsonAry = JSONArray.fromObject(m);

    String jsonStr = jsonAry.toString();

response.setContentType("text/plain;charset=UTF-8");

//如果这里不输出json信息，前端form提交回调的success方法就不会执行

try {

response.getWriter().write(jsonStr);

} catch (IOException e) {

e.printStackTrace();

}

 

 

return null;

 

}

分享到：
| jOrgChart横向的组织机构树--手工构造json ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics