easyui-conbotree树形下拉框。。。转

最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用:

首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系)

1、下面我们用hibernate建一下对应的额实体类:

package com.hanqi.entity;
//地区 实体类
public class Region {

    //地区id
    private String regionID;

    //地区名称
    private String regionName;

    //上级id

    private String parentRegionID;

    public String getRegionID() {
        return regionID;
    }

    public void setRegionID(String regionID) {
        this.regionID = regionID;
    }

    public String getRegionName() {
        return regionName;
    }

    public void setRegionName(String regionName) {
        this.regionName = regionName;
    }

    public String getParentRegionID() {
        return parentRegionID;
    }

    public void setParentRegionID(String parentRegionID) {
        this.parentRegionID = parentRegionID;
    }

    @Override
    public String toString() {
        return "Region [regionID=" + regionID + ", regionName=" + regionName + ", parentRegionID=" + parentRegionID
                + "]";
    }

}

2、dao层查询数据的方法:

//获取数据列表
    public List<Region> getlist(String parentid)
    {
        List<Region> rtn=new ArrayList<Region>();
        init();
        //查询数据
        rtn=se.createQuery("from Region where parentRegionID=?").setString(0, parentid).list();

        destory();
        return rtn;
    }

3、建立service层的(在这里需要注意的是:返回的JSON格式的数据是一个嵌套的格式,这里就用到了递归的方法即根据父ID查询他的子ID然后再继续查询子ID下面的子ID。。。

返回的数据格式 必须包含 按照id:‘‘,text:‘‘children:[‘{}‘]的格式,所以我们先建一个这种格式的类。从数据库中取出数据后以这种类的格式返回

)

建一个tree需要的格式的类:

package com.hanqi.service;

import java.util.List;

public class TreeNode {

    private String id;

    private String text;

    private List<TreeNode> children;

    public String getId() {
        return id;
    }

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

    public String getText() {
        return text;
    }

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

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

    public TreeNode(String id, String text) {
        super();
        this.id = id;
        this.text = text;
    }

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

    public TreeNode() {
        super();
    }

}

service层里面的调用数据库层数据,采用递归方法循环遍历 子id,当不满足条件时,递归方法跳出,重点理解下面的getTreeNode()方法:

package com.hanqi.service;

import java.util.ArrayList;
import java.util.List;

import com.hanqi.dao.RegionDao;
import com.hanqi.entity.Region;

public class RegionService {

    //
    public List<Region> getList(String parentid)
    {
        return new RegionDao().getlist(parentid);
    }

    //递归调用的方法
        //获取子节点的集合
    public List<TreeNode> getTreeNode(String id)
        {
            List<TreeNode> rtn =null;
            List<Region> lr=getList(id);
            if(lr!=null&&lr.size()>0)
            {
                rtn=new ArrayList<>();
                for(Region r:lr)
                {
                    TreeNode tn=new TreeNode(r.getRegionID(), r.getRegionName());

                    System.out.println("name="+r.getRegionName());
                    //得到节点的子节点
                    //递归的调用
                    List<TreeNode>children=    getTreeNode(r.getRegionID());

                    tn.setChildren(children);

                    rtn.add(tn);
                }

            }

            return rtn;
        }

}

servlet层调用service的数据,并把数据转换成JSON格式返回给前台:

package com.hanqi.web;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONArray;
import com.hanqi.entity.H_Depart;
import com.hanqi.service.RegionService;
import com.hanqi.service.TreeNode;

/**
 * Servlet implementation class DepartServlet
 */
public class DepartServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public DepartServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");

     RegionService rs=new RegionService();

        List<TreeNode> lr =rs.getTreeNode("0");

            String json=JSONArray.toJSONString(lr);
            System.out.println(json);
            response.getWriter().print(json);

    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

前段的显示层调用:

部门:
<input class="easyui-combotree" id="depart" name="depart"
data-options="{url:‘DepartServlet‘}"

/>

效果:

时间: 2024-11-06 03:44:24

easyui-conbotree树形下拉框。。。转的相关文章

EasyUI 37-ComboTree(树形下拉框)组件

雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务器. 在本教程中,我们将要创建一个注册表单,带有 name.address.city 字段.city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市. 创建表单(Form) title="Register" butto

easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法

easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库"字段,并且在下拉的时候,"全部数据库"一直排在最顶部. 初始化效果如下: 下拉之后的效果如下: 实现方式: easyui的combobox有一个loader属性,easyui的API对loader属性说明如下: easyui的combobox有一个onLoadSuccess事件,eas

Vue实现树形下拉框

Vue自身并没有实现树形下拉框的组件,找了很多资料,最后在Github上找了个插件vue-treeselect,功能还是比较全的,模糊搜索.多选.延迟加载.异步搜索.排序,自定义.Vuex支持等等.这些功能在官网上都有详细的介绍: vue-treeselect官网: vue-treeselect vue-treeselect github地址: vue-treeselect 下面只做个简单的功能介绍,模糊搜索与树形结构展示: 当然,首先是下载安装插件: npm install --save @r

easyUI中select下拉框添加option选项

使用jquery easyui的下拉列表combobox碰上问题,下拉列表的项都是从 数据库读出来的,然后我想在动态生成的项中添加一项:"<option value=''>=全部=</option>". 但怎么也添加不成功. 首先试了直接用jquery对该下拉列表进行添加操作: JavaScript code ? 1 2 3 4 5 6 7 8 $('#selUnin').combobox({         url: _callback_url + '&

Easyui多个下拉框联动效果

好久没写前端了,以前在做多级联动的时候,用的是easyui的tree结构,但是需要一次性全部加载,不是按需加载,性能不好,退而求其之,用多个下拉框做 eayui的combobox  有onSelect,onLoadSuccess等方法,具体可以看http://www.jeasyui.net/plugins/169.html文档API 1.html <table style="padding:10px 20px 10px 40px;"> <tr> <td&g

EasyUI ComboTree(树形下拉框) 简单实例

前台: <input id="cc">   <script type="text/javascript"> $('#cc').combotree({ required: true }).combotree("tree").tree({ url: 'tree.ashx?id=0&state=closed', checkbox: false, onBeforeExpand: function (node, param)

jquery easyui 多选下拉框的实现

修改官方提供的demo实例,本来是单选的,让她编程多选,完成了勾选和去勾选的所有功能. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Basic Combo - jQuery EasyUI Demo</title> 6 <link rel="stylesheet" type="text/

easyui中自定义下拉框的使用

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Combo - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css&quo