easyui 下拉选择树(ComboTree) 的实现
很多时候都会用到下拉框,有时候为了显示更好的效果,会用到树型下拉框,实际就是下拉框中带了一个树型的控件,所以它自然继承自tree和combobox.
一: 前台:
1. 首先从前台来讲, 先把html元素写好
<select id="cc" value="01" style="width:200px;" ></select>
<a href="#" id="btn" class="easyui-linkbutton" οnclick="getValue()">getValue</a>
这里用js加载方式:
$('#cc').combotree({url:'tree_data.json',
});
这里的url是跟html统一文件夹下的一个json格式文件.是一个模拟的json数据.大致结构如下:
<p>[{</p><p> id: 1,</p><p> text: 'Languages',</p><p> children: [{</p><p> id: 11,</p><p> text: 'Java'</p><p> },{</p><p> id: 12,</p><p> text: 'C++'</p><p> }]</p><p>}] </p>
一个简单基础的下拉树就形成了:
在下拉树旁边写了一个按钮, 这个按钮有一个普通的onclick事件,就是获取下拉树的选择的值.代码如下:
function getValue(){var value = $('#cc').combotree('getValue');alert(value);
}
还有下拉树实现多选: 实际就是加了个multiple属性,代码如下
$('#ccm').combotree({url:'tree_data.json',multiple: true,//cascadeCheck: false//onlyLeafCheck: true
});
如果要获取它选择的值只需要把前面呢个getValue换成getValues
var value = $('#ccm').combotree('getValues'); //会返回id值的数组,逗号连接
这种方式getValues默认是级联的,也就是选择子节点,他的父节点也可能get上,所以有一个属性cascadeCheck.
cascadeCheck是定义是否层叠选中状态,也就是前面的小方框会不会自动级联,如图变成false就是不级联,但是这样很怪.
onlyLeafCheck是定义是否只在末级节点之前显示复选框,也就是只有子节点才会有复选框,也就是只能选择叶子节点,没什么级联了.
二:数据
假如下拉树是要选择班级下的学生信息, 那么随便造个数据.
三:后台
既然前台的url接收是一个json格式的东西.可以看到这里面有三个关键属性, id, text, children.三者缺一不可.
那数据中的两个表在程序中的persistence层对应着两个实体. Entity Class和Entity Student.
除此之外,还需要一个Model.
public class ComboTreeModel {private String id;private String text;private List<ComboTreeModel> children;//setter and getter
}
而最后传给url的,应该是json格式的:
下面就是通过业务关联, 将两个实体组合,查出需要数据,放到Model模型.
@RequestMapping(value="/getSelectData")
@ResponseBody
public List<ComboTreeModel> getTreeData(HttpServletRequest request, HttpServletResponse response,ComboTreeModel treeModel){List classList = this.studentService.queryClassList();//[{eventid:"c001",classname:'奥赛班',eventid:"c002",classname:'直播班',eventid:"c003",classname:'火箭班'}]List<ComboTreeModel> list = new ArrayList<ComboTreeModel>();for(int i=0; i<classList.size(); i++){ComboTreeModel model = new ComboTreeModel();Map classMap = (Map) classList.get(i);//{eventid:"c001",classname:'奥赛班'}String classId = (String) classMap.get("eventid");String className = (String)classMap.get("classname");model.setId(classId); model.setText(className);List studentList = this.studentService.queryByClassId(classId);if(studentList.size() > 0){List<ComboTreeModel> childrenList = new ArrayList<ComboTreeModel>();for(int j = 0;j<studentList.size();j++){ComboTreeModel model2 = new ComboTreeModel();Map studentMap = (Map)studentList.get(j);String studentEventId = (String) studentMap.get("eventid");String studentName = (String) studentMap.get("studentname");model2.setId(studentEventId);model2.setText(studentName);childrenList.add(model2);}model.setChildren(childrenList);}list.add(model); }return list;
}
ResponseBody 会自动返回JSON格式的数据.
easyui 下拉选择树(ComboTree) 的实现相关推荐
- layui框架下拉选择树性图(转载)
效果图 html代码 <!DOCTYPE html> <html> <head><meta charset="utf-8">< ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- 对勾选的下拉选择进行同步选择
//对勾选的下拉选择进行同步选择function syncLoadTruckTableSelect(prefixSelector,currentLineIndex){//获取当前操作的select所在 ...
- Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
- python select模块安装_python+selenium select下拉选择框定位处理方法
一.前言 总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询: 二.直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPa ...
- 自定义组合控件:下拉选择框
Spinner 自定义组合控件之下拉选择框 项目概述 下拉选择框主要是通过在EditText 下用PopupWindow 动态显示ListView 控件来实现的.下拉选择框可以方便用户的输入效率,以此 ...
- [原] XAF 添加日期筛选下拉选择
1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...
- php时间下滑出现选择,JQuery设置时间段下拉选择实例_jquery
本文实例讲述了JQuery设置时间段下拉选择的方法.分享给大家供大家参考. 具体实现方法如下: $(document).ready(function() { var arrT = []; var tt ...
- 城市地区级联二级下拉选择菜单js特效
城市地区级联二级下拉选择菜单js特效:城市级联选择,js地区选择.js特效 <script type="text/javascript">var pc = new Ar ...
最新文章
- iOS开发之绝对布局和相对布局(屏幕适配)
- Dart基础学习03--方法的使用
- 一道网易游戏笔试题的不同解法
- 【Linux】一步一步学Linux——tar命令(62)
- 用JS获取地址栏参数的方法
- 真正的门槛 - 全干工程师
- ubuntu下卸载cuda8.0,和安装cuda9.0,cudnn7.0,tensorflow-gpu=1.8
- vs2015打开慢的解决方法
- 谈谈分布式事务之一:SOA需要怎样的事务控制方式
- python linux教程_Linux for Python教程01
- Android 混淆规则
- 百度网盘Python客户端bypy
- 音视频采集-摄像头视频采集(原理与实现)
- Android编程权威指南(第4版)第16章使用Intent调用相机闪退问题
- 四川阆中2021中学高考成绩查询入口,2021年四川高考体检报告结果查询时间及查询网址入口...
- 电脑打字技巧:微软输入法的U模式和V模式,快速打日期和时间。
- 异步请求 ajax的使用详解
- 浏览器是如何验证HTTPS证书合法性的?
- 怎样删除usb计算机连接网络打印机驱动,USB无法识别打印机的解决办法和教程
- uni-app KeyChain(钥匙串),保存的信息不会因App被删除而丢失(ios)