easyui 中 的同步树(1)

原创 2016年05月30日 16:50:54

1.先看一下easyUI,Tree组件要求的数据格式

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

2.我以 学院,系,专业 的顺序在前台显示tree
下面是数据库表:
学院表:
这里写图片描述
系表:
这里写图片描述
专业表:
这里写图片描述

3.看下数据库中的实体

@Entity
@Table(name = "t_department", catalog = "xiaonei")
public class TDepartment implements java.io.Serializable {

    // Fields

    private Integer id;
    private String text;
    private Integer pid;
    private List<TMajor> children;

    public List<TMajor> getChildren() {
        return children;
    }

    public void setChildren(List<TMajor> children) {
        this.children = children;
    }
    // Constructors

    /** default constructor */
    public TDepartment() {
    }

    /** full constructor */
    public TDepartment(String text, Integer pid) {
        this.text = text;
        this.pid = pid;
    }

    // Property accessors
    @Id
    @GeneratedValue(strategy = IDENTITY)
    @Column(name = "id", unique = true, nullable = false)
    public Integer getId() {
        return this.id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    @Column(name = "text", length = 36)
    public String getText() {
        return this.text;
    }

    public void setText(String text) {
        this.text = text;
    }

    @Column(name = "pid")
    public Integer getPid() {
        return this.pid;
    }

    public void setPid(Integer pid) {
        this.pid = pid;
    }

}

@Entity
@Table(name = "t_major", catalog = "xiaonei")
public class TMajor implements java.io.Serializable {

    // Fields

    private Integer id;
    private String text;
    private Integer pid;

    // Constructors

    /** default constructor */
    public TMajor() {
    }

    /** full constructor */
    public TMajor(String text, Integer pid) {
        this.text = text;
        this.pid = pid;
    }

    // Property accessors
    @Id
    @GeneratedValue(strategy = IDENTITY)
    @Column(name = "id", unique = true, nullable = false)
    public Integer getId() {
        return this.id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    @Column(name = "text", length = 36)
    public String getText() {
        return this.text;
    }

    public void setText(String text) {
        this.text = text;
    }

    @Column(name = "pid")
    public Integer getPid() {
        return this.pid;
    }

    public void setPid(Integer pid) {
        this.pid = pid;
    }

}

@Entity
@Table(name = "t_academy", catalog = "xiaonei")
public class TAcademy implements java.io.Serializable {

    // Fields

    private Integer id;
    private String text;
    private List<TDepartment> children;


    // Constructors

    @Transient
    public List<TDepartment> getChildren() {
        return children;
    }

    public void setChildren(List<TDepartment> children) {
        this.children = children;
    }

    /** default constructor */
    public TAcademy() {
    }

    /** full constructor */
    public TAcademy(String text) {
        this.text = text;
    }

    // Property accessors
    @Id
    @GeneratedValue(strategy = IDENTITY)
    @Column(name = "id", unique = true, nullable = false)
    public Integer getId() {
        return this.id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    @Column(name = "text", length = 36)
    public String getText() {
        return this.text;
    }

    public void setText(String text) {
        this.text = text;
    }

}

4.看下后台组装easyui json格式(java),dao层和service层就不贴了

@RequestMapping("/getAllTree")
    public String getAllTree(HttpServletRequest request,HttpServletResponse response) throws Exception{
        List academyList = academyService.getAllAcademy();
        Iterator academyIt = academyList.iterator();
        /*
         * 这太复杂了,没法看啊---
         * */
        while(academyIt.hasNext()){

            TAcademy academy = (TAcademy) academyIt.next();

            List departmentList = departmentService.getAllDepartmentByAcademyId(academy.getId());

            Iterator departmentIt = departmentList.iterator();

            List addDepartmentList = new ArrayList();

            while(departmentIt.hasNext()){

                TDepartment department = (TDepartment) departmentIt.next();

                addDepartmentList.add(department);

                List majorList = majorService.getAllMajorByDepartmentId(department.getId());

                Iterator majorIt = majorList.iterator();

                List addMajorList = new ArrayList();

                while(majorIt.hasNext()){

                    TMajor major = (TMajor) majorIt.next();

                    addMajorList.add(major);
                }
                department.setChildren(addMajorList);
            }
            academy.setChildren(addDepartmentList);
        }
        JSONArray jn = JSONArray.fromObject(academyList);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(jn.toString());
        return null;
    }
}

5.看下前台

<body style="margin:15px;">
<script>
    $("#majorTree").tree({    
        url:"/xiaoneinew/tree/getAllTree"
    }); 
</script>
<ul id="majorTree"></ul>
</body>

6.效果图
这里写图片描述
这里写图片描述
7.注意

  • 在实体department和academy中,有关children字段我用了@Transient,就是不同数据库中同步,是hibernate中三种状态的一种。
  • 这是我第一次写easyui的tree,写的很不好,以后我会优化的。
版权声明:本文为博主原创文章,转载注明出处。

相关文章推荐

easyUI同步树的详解

easyUI同步树的详解

easyui的combotree同步树和异步树实现方法

1 异步树 $("#"+treeId).combotree({ url : treeUrl, panelWidth:'200', onClick : function(node) {    onBef...

jQuery easyUI 授权树实现后台代码

* 点击角色树子节点获取的所有功能权限树   * @param roleID   * @return   */   public List getRol...

基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

先来看看我的最终实现的Web界面效果,就是在权限管理系统里面,机构包含的用户编辑界面,或者是角色包含人员的编辑界面里面,提供一个地方来记录用户的选择,用户确认后,可以把记录的内容保存到数据库里面。 ...

Easyui validatebox修改——1.当text发生变化时在校验,2.取消校验,3扩展自定义验证

1.当text发生变化时在校验:       Easyui validatebox个人感觉还是比较好用的,但是发现他不是只有text改变并离开编辑框的时候才验证,而是不停的做验证;如果是js脚本...

jquery easyui datagrid使用参考(增删改查1)

xxx //文件上传 $(document).ready(function(){     var validateForm = function() {  };     var...

JQuery easyUi datagrid 中 editor 增加自定义事件(1)

easyUi 的datagrid可编辑表格中需要为一列增加字数输入限制,由于没有找到该插件的 editor 中有自定义函数的api,所以,只能自己在onClickRow中实现了,实现方法也挺简单的,在...

easyui主界面生成分析1

easyui采用了东南西北中五大布局方式,其采用的是称为layout的布局方式。要采用这种方式,那么其使用了easyui的easyui-layout的样式。那么如下的一个布局是如何实现的呢? 从整...

jQuery Easy UI学习(1)——如何使用easyui,导入js顺序

 一、首先在WebRoot目录下创建js文件夹,导入压缩好的完整的easy-ui的js包。 二、在HTML的页面中导入easy ui 的js  1、一次导入所有js:(建议用这种) ....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui 中 的同步树(1)
举报原因:
原因补充:

(最多只允许输入30个字)