combotree 的简单使用
一、前端
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 的简单使用相关推荐
- ExtJs 3 自定义combotree
ExtJs 3 自定义combotree /*** 自定义下拉树,支持初始化值时自动定位树节点.* 还没有考虑性能问题.继承自Ext.form.ComboBox也很浪费.* 代码中的cu.get()是 ...
- easyui 下拉选择树(ComboTree) 的实现
很多时候都会用到下拉框,有时候为了显示更好的效果,会用到树型下拉框,实际就是下拉框中带了一个树型的控件,所以它自然继承自tree和combobox. 一: 前台: 1. 首先从前台来讲, 先把html ...
- Easyui Datagrid 中用 Combotree 的显示问题
Datagrid嵌入combotree控件后,在编辑时候,能正常显示combo的text,但完成编辑后,却显示combo的value了,很不爽. 如何做到显示实际的text呢? 查了相关资料,有很多方 ...
- php会计科目,ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
假设数据库中会计科目数据表的字段为:id,code,name,islast.分别为自增主键,科目编码,科目名称,是否为末级("1"表示末级科目). 这里在Thinkphp的模型层中 ...
- easyUI-树形菜单(ComboTree) 无限层级树实现方式(1.0版本)
对于easyUI实现一个树,是一件很简单的事情,实现形式很多.这里作者将实现,通过数据库获取数据,再将数据通过递归形式装成无限层级json数据,到达无限成级的树结构.需要用到的json插件建附件,希望 ...
- easyui combotree(树形下拉框)使用收获总结
easyui combotree使用收获总结 easyui官网有简单的实例,但是项目中需要加载全国的区域,一次性加载容易造成页面加载过慢和卡死,所以需要动态加载 最后效果 textarea 显示效果 ...
- 在docker上安装部署tomcat项目 超简单,拿来主义
在docker中部署tomcat,非常简单,而且省去了手动安装jdk等步骤,只需要将war包复制在容器tomcat实例中的webapps下面即可.以下将详细讲解流程: 在windows中打好包以后用w ...
- Linux下tomcat的安装与卸载以及配置(超简单)
无敌简单的几步 1.安装 //首先你需要下载好tomcat包 sudo tar -xvzf apache-tomcat-7.0.85.tar.gz(这里是包名) -C 你要放的位置 2.卸载 rm - ...
- Docker安装Apache与运行简单的web服务——httpd helloworld
Docker运行简单的web服务--httpd helloworld目录[阅读时间:约5分钟] 一.Docker简介 二.Docker的安装与配置[CentOS环境] 三.Docker运行简单的web ...
最新文章
- 大学计算机思维导图_我学计算机,也会修电脑
- linux系统硬盘表识
- SAP 库存物资收发存报表主要思路
- OpenStack的部署T版(六)——Neutron组件
- Tiny模板语言(VelocityPlus)初步入门
- umask命令:设置文件的默认权限掩码
- 大数据平台在分布式服务中的应用
- Scala-列表操作
- 数据库开发工程中,一些不常遇到的难题
- SpringBoot2.x填坑(四):生产上SpringBoot2.x Scheduled定时任务重复执行两次解决方案
- 鱼和熊掌兼得---STM32调试接口SW动态复用为GPIO的方法
- Diamond书写FPGA代码
- js 封装原生XMLHttpRequest
- ZoomIt 屏幕放大 缩小 屏幕画笔 演示 手写笔迹 倒计时 秒变白板 pointofix
- 怎么把PDF拆分成单页?
- SitePoint播客#57:不是负面
- 《Real-Time Rendering》第四版学习笔记——Chapter 9 Physically Based Shading(一)
- Kinect与KinectFusion重建
- 步进电机、伺服电机的接线说明书、示意图
- 线圈绕制中漆包线的简单介绍