easyui的tree学习

作者: 全栈未遂工程师 | 来源:发表于2016-03-14 13:56 被阅读153次

easyui的tree学习
easyui-Tree
easyui-tree扩展方法
高级第七天:EasyUI学习
Java生成JQuery EasyUI的Tree
EasyUI(1) -- 简介 & UI组件(layou
第2讲_EasyUI环境搭建
3、商品添加
jQuery EasyUI泛读
【年度盘点】最受欢迎的5大Java练习项目

目的：实现一个公共的组织结构树状图。
效果图：

多选效果图

单选效果图
要点：

此树状图作为公共功能被调用。
此树状图不能被其他控件所遮挡。

目录结构：

目录结构

查询页面：/EasyUiLearn/WebContent/tree/queryPage.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath %>">
    <title></title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
</head>
<body>
    <div class="easyui-panel" title="说明" style="margin-bottom:15px">
        1.通过jsp:include获取公共的组织机构树。<br/>
        2.树状图设置成position:absolute，防止打开后被其他元素遮挡。
    </div>
    <div class="easyui-panel" title="查询">
    <table>
        <tr>
            <td width="100px" align="right">机构：</td>
            <td width="150px" align="left" valign="top" style="padding-top:4px">
                <jsp:include page="./org.jsp">
                    <jsp:param name="url" value="tree/js/tree_data.json"/>
                    <jsp:param name="checkbox" value="true"/>
                    <jsp:param name="onlyLeafCheck" value="false"/>
                    <jsp:param name="url" value="tree/js/tree_data.json"/>
                </jsp:include>
            </td>
            <td width="100px" align="right">姓名：</td>
            <td><input type="text"/></td>
            <td>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="getOrg()">获取选中</a>
            </td>
        </tr>
    </table>
    </div>
</body>
</html>

其中，

<jsp:include page="./org.jsp">
    <jsp:param name="url" value="tree/js/tree_data.json"/>
    <jsp:param name="checkbox" value="true"/>
    <jsp:param name="onlyLeafCheck" value="false"/>
    <jsp:param name="url" value="tree/js/tree_data.json"/>
</jsp:include>

是引入公共页面。checkbox是否显示复选框，onlyLeafCheck是否只能选择叶子节点，url数据来源。
公共树状图页面：/EasyUiLearn/WebContent/tree/org.jsp

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%
String url = request.getParameter("url");
String checkbox = request.getParameter("checkbox");
String onlyLeafCheck = request.getParameter("onlyLeafCheck");
%>
<div style="position:absolute;z-index:999;">
    <ul id="tt"></ul>
</div>
<script type="text/javascript">
$(function(){
    $('#tt').tree({
        url:'<%=url %>',
        checkbox:<%=checkbox%>,
        onlyLeafCheck:<%=onlyLeafCheck%>
    });
});
function getOrg(){
    var nodes = $('#tt').tree('getChecked');
    var s = '';
    var ids = '';
    for(var i=0; i<nodes.length; i++){
        if (ids != '') {
            s += ',';
            ids += ",";
        }
        s += nodes[i].text;
        ids += nodes[i].id;
    }
    alert("ids=" + ids + "\ntext=" + s);
}
</script>

position:absolute;z-index:999;确保树状图不会被其他元素遮挡。
json数据：

[{
    "id": 0,
    "text": "Node 0",
    "state": "closed",
    "children":[{
        "id": 1,
        "text": "Node 1",
        "state": "closed",
        "children": [{
            "id": 11,
            "text": "Node 11"
        },{
            "id": 12,
            "text": "Node 12",
            "checked":true
        }]
        },{
            "id": 2,
            "text": "Node 2",
            "state": "open",
            "children": [{
                "id": 21,
                "text": "Node 11"
            },{
                "id": 22,
                "text": "Node 12",
                "checked":true
            }]
        }
    ]
}]

完成……
源码下载