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")
@ResponseBody
public 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、children
List<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
}]
}]
combotree 的简单使用的更多相关文章
- 【EasyUI】combotree和combobox模糊查询
这里说的模糊查询指在输入框输入,然后自动在下拉框中显示匹配结果,类似Google搜索提示 EasyUI库已经实现了combobox的查询过滤功能,但只能从头匹配,原因是EasyUI库的代码限制: fi ...
- ASP.MVC EASY UI 入门之 —— Tree & ComboTree
1.常规的EASY UI的tree和comboTree代码基本是官方的DEMO都有的,虽然很简单,但是还是要实践的做一次,才能更清晰的了解和使用它!先上效果图 因为用的是code first,所以数据 ...
- Easyui Combotree问题及其相关
Easyui的setValue方法无效 今天在开发项目的时候,遇到第一个很奇怪的问题:EasyUI的setValue方法无效. $('#department_parent').combotree('s ...
- Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框
Jquery EasyUI Combotree只能选择叶子节点且叶子节点有多选框 Jquery EasyUI Combotree单选框,Jquery EasyUI Combotree只能选择叶子节点 ...
- 表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树
EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...
- ExtJs 3 自定义combotree
ExtJs 3 自定义combotree /** * 自定义下拉树,支持初始化值时自动定位树节点. * 还没有考虑性能问题.继承自Ext.form.ComboBox也很浪费. * 代码中的cu.get ...
- Easyui-Tree和Combotree使用注意事项-sunziren
版权声明:本文为sunziren原创文章,博客园首发,转载务必注明出处以及作者名称. Easyui-Tree和Combotree所使用的数据结构是类似的,在我的上一篇文章<Easyui-Tree ...
- 【造轮子】打造一个简单的万能Excel读写工具
大家工作或者平时是不是经常遇到要读写一些简单格式的Excel? shit!~很蛋疼,因为之前吹牛,就搞了个这东西,还算是挺实用,和大家分享下. 厌烦了每次搞简单类型的Excel读写?不怕~来,喜欢流式 ...
- Fabio 安装和简单使用
Fabio(Go 语言):https://github.com/eBay/fabio Fabio 是一个快速.现代.zero-conf 负载均衡 HTTP(S) 路由器,用于部署 Consul 管理的 ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
随机推荐
- Windows服务器无法配置IP
前天在给一台服务器配置IP地址的时候发现一个奇怪的问题.IP地址配置之后不生效,还是使用的169.254这个微软保留自动分配地址.由于这个是一台虚拟机,尝试了删除添加网卡也没有用.配置IP不成功的时候 ...
- Windows Powershell安装错误
今天需要更新一下VMware的 powercli.使用命令install-module -Name VMware.PowerCLI -AllowClobber但是遇到一个错误. Unable to r ...
- 通过管理接口配置ProxySQL
可以使用mysql客户端来连接管理接口,以下是使用admin凭据连接到本地6032端口的管理接口: $ mysql -u admin -padmin -h 127.0.0.1 -P6032 --pro ...
- 11. 第十篇 网络组件flanneld安装及使用
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247483834&idx=1&sn=b04ec193 ...
- 使用filebeat收集k8s上pod里的容器日志配置文件模板
具体使用有待商榷 filebeat.inputs: - type: container paths: - /var/log/containers/*.log processors: - add_kub ...
- logstash另类输出到es
filebeat配置文件: filebeat.inputs: - type: log enabled: true paths: - /opt/hkd-cloud/hkd-custom/hkd-cust ...
- (WebFlux)004、WebFilter踩坑记录
一.背景 使用SpringWebFlux的WebFilter时,由于不熟悉或一些思考疏忽,容易出现未知的异常.记录一下排查与解决方案,给大家分享一下. 二.问题 2.1 问题描述 在测试接口方法时,出 ...
- js移除style样式
removeAttribute() 例: <button @click="edit" type="button" disabled id="bt ...
- SpringBoot课程学习(四)
一.profile的多文档配置方式 1.profile文件方式:提供多个配置文件,每个代表一种环境 如: 1.application-dev.properties/yml 开发环境 2.applica ...
- [Thread] Synchronized
1.Monitor对象 Monitor对象被称为管程或者监视器锁. 在Java中,每一个对象实例都会关联一个Monitor对象. 这个Monitor对象既可以与对象一起创建销毁,也可以在线程试图获取对 ...