一、前端

combotree HTML:

<input id="201711281652407353448711985811" class="easyUI-combotree"  params="width:150px"/>

为树控件赋值js:(可多选时需要添加:multiple: true, 属性)

            $('#'+cus).combotree({    url:'${ctx}/secondPhase/customCombotreeData.pt?id='+cus,                //multiple: true, });

获取树节点数据js:

    source_detail = $('#201711281652407353448711985811').combotree('getValue');alert(source_detail);

二、后台

根据API,combotree需要的json数据主要有三个关键属性:id、text、children。

我们new一个类作为树的模型:

public class comboTreeModel {private String id;private String text;private List<comboTreeModel> children;//set and get
}

url请求数据获取与处理:

    @RequestMapping("customCombotreeData")@ResponseBodypublic List customCombotreeData(){Dmp dmp = this.getParamsAsDmp();/*得到第一级菜单的集合,* [{id=A, text=A省市重点工作}, {id=B, text=B区主要领导批示和主要领导会议布置的重点工作}, {id=C, text=C一般性工作}, {id=D, text=D各局委办工作}]*/List li = service.customComboboxData(dmp);//新建一个树形list用来把村树结构:id、text、childrenList<comboTreeModel> fatherList = new ArrayList<comboTreeModel>();for (int i = 0; i < li.size(); i++) {//树节点是一个一个父子节点添加,因此父节点模型要放在for循环里面,每次添加都是一个新的节点comboTreeModel fatherModel = new comboTreeModel();Map map = (Map) li.get(i);String id = (String) map.get("id");String text = (String) map.get("text");//向父模型里面添加一级菜单
            fatherModel.setId(id);fatherModel.setText(text);dmp.put("fieldcode", id);//用父id获取子集合//[{id=A1, text=A1省市重点工作}, {id=A2, text=A2市政府绩效指标}, {id=A3, text=A3市领导批示}]List fli = service.se_feileiTree(dmp);//新建一个子树形集合List<comboTreeModel> sonList = new ArrayList<comboTreeModel>();for (int j = 0; j < fli.size(); j++) {//新建子树形模型comboTreeModel sonModel = new comboTreeModel();Map map2 = (Map) fli.get(j);String sonid = (String) map2.get("id");String sontext = (String) map2.get("text");//向子模型添加数据,这里只有两级,有三级的话,该级菜单可以继续添加children
                sonModel.setId(sonid);sonModel.setText(sontext);//把子模型添加到子二级菜单结合。
                sonList.add(sonModel);}//再父模型数据循环最后,同时把循环整理的子二级菜单集合添加到父一级菜单模型的children。
            fatherModel.setChildren(sonList);//把整理好的父级(已经包含子级菜单)模型添加到要返回的树形集合
            fatherList.add(fatherModel);}return fatherList;}

得到:

测试选取值:

三、数据库数据以及返回json数据参考

     

返回整理后的json数据:

[{"id": "A","text": "A省市重点工作","children": [{"id": "A1","text": "A1省市重点工作","children": null},{"id": "A2","text": "A2市政府绩效指标","children": null},{"id": "A3","text": "A3市领导批示","children": null}]
},
{"id": "B","text": "B区主要领导批示和主要领导会议布置的重点工作","children": [{"id": "B1","text": "B1党委政府会议纪要","children": null},{"id": "B2","text": "B2政府会议纪要","children": null},{"id": "B3","text": "B3主要领导批示指示","children": null},{"id": "B4","text": "B4区重大项目","children": null},{"id": "B5","text": "B5其他","children": null}]
},
{"id": "C","text": "C一般性工作","children": [{"id": "C1","text": "C1区各项重点工作","children": null},{"id": "C2","text": "C2区分管领导专项督查","children": null},{"id": "C3","text": "C3区属绩效指标","children": null},{"id": "C4","text": "C4其他","children": null}]
},
{"id": "D","text": "D各局委办工作","children": [{"id": "D1","text": "D1各局委办工作","children": null}]
}]

转载于:https://www.cnblogs.com/ckxlovejava/p/8031761.html

combotree 的简单使用相关推荐

  1. ExtJs 3 自定义combotree

    ExtJs 3 自定义combotree /*** 自定义下拉树,支持初始化值时自动定位树节点.* 还没有考虑性能问题.继承自Ext.form.ComboBox也很浪费.* 代码中的cu.get()是 ...

  2. easyui 下拉选择树(ComboTree) 的实现

    很多时候都会用到下拉框,有时候为了显示更好的效果,会用到树型下拉框,实际就是下拉框中带了一个树型的控件,所以它自然继承自tree和combobox. 一: 前台: 1. 首先从前台来讲, 先把html ...

  3. Easyui Datagrid 中用 Combotree 的显示问题

    Datagrid嵌入combotree控件后,在编辑时候,能正常显示combo的text,但完成编辑后,却显示combo的value了,很不爽. 如何做到显示实际的text呢? 查了相关资料,有很多方 ...

  4. php会计科目,ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法

    假设数据库中会计科目数据表的字段为:id,code,name,islast.分别为自增主键,科目编码,科目名称,是否为末级("1"表示末级科目). 这里在Thinkphp的模型层中 ...

  5. easyUI-树形菜单(ComboTree) 无限层级树实现方式(1.0版本)

    对于easyUI实现一个树,是一件很简单的事情,实现形式很多.这里作者将实现,通过数据库获取数据,再将数据通过递归形式装成无限层级json数据,到达无限成级的树结构.需要用到的json插件建附件,希望 ...

  6. easyui combotree(树形下拉框)使用收获总结

    easyui combotree使用收获总结 easyui官网有简单的实例,但是项目中需要加载全国的区域,一次性加载容易造成页面加载过慢和卡死,所以需要动态加载 最后效果 textarea 显示效果 ...

  7. 在docker上安装部署tomcat项目 超简单,拿来主义

    在docker中部署tomcat,非常简单,而且省去了手动安装jdk等步骤,只需要将war包复制在容器tomcat实例中的webapps下面即可.以下将详细讲解流程: 在windows中打好包以后用w ...

  8. Linux下tomcat的安装与卸载以及配置(超简单)

    无敌简单的几步 1.安装 //首先你需要下载好tomcat包 sudo tar -xvzf apache-tomcat-7.0.85.tar.gz(这里是包名) -C 你要放的位置 2.卸载 rm - ...

  9. Docker安装Apache与运行简单的web服务——httpd helloworld

    Docker运行简单的web服务--httpd helloworld目录[阅读时间:约5分钟] 一.Docker简介 二.Docker的安装与配置[CentOS环境] 三.Docker运行简单的web ...

最新文章

  1. 大学计算机思维导图_我学计算机,也会修电脑
  2. linux系统硬盘表识
  3. SAP 库存物资收发存报表主要思路
  4. OpenStack的部署T版(六)——Neutron组件
  5. Tiny模板语言(VelocityPlus)初步入门
  6. umask命令:设置文件的默认权限掩码
  7. 大数据平台在分布式服务中的应用
  8. Scala-列表操作
  9. 数据库开发工程中,一些不常遇到的难题
  10. SpringBoot2.x填坑(四):生产上SpringBoot2.x Scheduled定时任务重复执行两次解决方案
  11. 鱼和熊掌兼得---STM32调试接口SW动态复用为GPIO的方法
  12. Diamond书写FPGA代码
  13. js 封装原生XMLHttpRequest
  14. ZoomIt 屏幕放大 缩小 屏幕画笔 演示 手写笔迹 倒计时 秒变白板 pointofix
  15. 怎么把PDF拆分成单页?
  16. SitePoint播客#57:不是负面
  17. 《Real-Time Rendering》第四版学习笔记——Chapter 9 Physically Based Shading(一)
  18. Kinect与KinectFusion重建
  19. 步进电机、伺服电机的接线说明书、示意图
  20. 线圈绕制中漆包线的简单介绍

热门文章

  1. MATLAB中hough反变换,matlab中hough变换
  2. SecureCRT版本6不能启动原因是
  3. python怎样遍历列表中数字_Python 遍历列表里面序号和值的方法(三种)
  4. jss基础ximnd导图(思维导图)
  5. Android中处理崩溃异常和记录日志
  6. Python操作三大主流数据库
  7. 华为交换机常见IPSG操作
  8. JS三元表达式与”||“的关系
  9. 我的steam VR 定位器无法定位喽
  10. Java将字符串按照指定长度分割成字符串数组