easyui中combotree只能选子选项，父级不被选中
前言
前几天面试遇到一个需求（easyui中combotree只能选子选项，父级不被选中），回来特意整理下，大概的思想是如果该tree的节点被选中是判定一下是否有子节点，如果没有就说明是最终节点了，步骤如下：
1. 原来计划是看json数据的话有个children字段标识，后来用google的开发工具发现没有，但是哥们发现了一个state字段，即父级的话会自动给一个state字段，为closed或者open值，但是最终子节点没有这个字段，如下图：
a. 选个子节点瞅瞅：
b. 选个父节点瞅瞅：
2. 找到合适的事件监听，哥们在easyui的tree的api找到了这个：
onBeforeSelect：参数是node，解释：节点被选中之前触发,返回false取消选择动作（取消动作，哥们看到这就亮了，莫名的鸡冻）。
来灵感了吧，淡定淡定，开整。
代码如下（代码是easyui 1.3.2的demo里的文件路径都一样，不同的是哥们我把json数据写到js里了，懒得发布测试，这样直接可以看效果呢）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ComboTree</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" >
$(function(){
$('#cc').combotree({
onBeforeSelect:function(node){
alert(node.state);
if(node.state){
$("#cc").tree("unselect");
}
},
data:[{
"id":,
"text":"My Documents",
"children":[{
"id":,
"text":"Photos",
"state":"closed",
"children":[{
"id":,
"text":"Friend"
},{
"id":,
"text":"Wife"
},{
"id":,
"text":"Company"
}]
},{
"id":,
"text":"Program Files",
"children":[{
"id":,
"text":"Intel"
},{
"id":,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":,
"text":"Microsoft Office"
},{
"id":,
"text":"Games",
"checked":true
}]
},{
"id":,
"text":"index.html"
},{
"id":,
"text":"about.html"
},{
"id":,
"text":"welcome.html"
}]
}]
});
});
</script>
</head>
<body>
<input id="cc" style="width:200px;">
</body>
</html>
有机会的话的和他探讨一番，收工...........（记2014年3月26日面试）
easyui中combotree只能选子选项，父级不被选中的更多相关文章
- EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
参考: https://blog.csdn.net/weixin_43236850/article/details/100320564
- EasyUI中combotree允许多选的时候onSelect事件会重复触发onCheck事件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgEAAADkCAIAAACOkmAuAAAgAElEQVR4nO2dW2wc15nnO0EQBJsdzA
- Easyui控制combotree只能选择叶子节点
$(function() { $('#tt').combotree({ url: 'getTree.do', onBeforeSelect: function(node) { if (!$(this) ...
- 关于使用easyui 中提示dialog is not a function的问题
我们经常在一些项目使用easyui,当然必不可少都会用到dialog这个功能,但是有时候你会发现: 明明我的代码没有错误,调用的规范按照API的来撰写,但是还有会报 $(...).dialog is ...
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
- 第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件
jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...
- easyui-combotree 只能选叶子未级
easyui-combotree 只能选叶子未级 function edit_dg() { //选中一行,获取这一行的属性的值 var selected = $('#tbClientListBrows ...
- js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...
- 128_Power BI父级排名TOPN子级动态展示
博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 前些天在和朋友交流Power BI中有这样一个需求,按照父级排名后,需要显示出父级TOPN的子级明细. 如下&l ...
随机推荐
- Markdown 表情包
- 二：Ionic Framework支持Android开发
首先安装ionic,在使用npm下载ionic和cordova的过程中有问题可以使用淘宝的npm镜像,具体的方法可以参考网络 npm install -g ionic cordova 其他还需要安装J ...
- HRBUST 1213 单词接龙
暴力搜索. 按照能配对的关系建立有向边,然后暴力搜索. #include<cstdio> #include<cstring> #include<cmath> #in ...
- 决策树：ID3与C4.5算法
1.基本概念 1)定义: 决策树是一个预测模型:他代表的是对象属性与对象值之间的一种映射关系,树中每个节点代表的某个可能的属性值. 2)表示方法: 通过把实例从根结点排列到某个叶子结点来分类实例,叶子 ...
- CocurrentHashMap和HashTable区别分析
集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...
- 初见Python<7>:Python操作mysql
1.基本介绍: python标准数据库接口为python DB-API,它为开发人员提供了数据库应用编程接口,可以支持mysql.Oracle.MSSQL.Sybase等多种数据库,不同的数据库需要下 ...
- CodeForces - 995B Suit and Tie
题面在这里! 明明可以出成n<=1e5但是因为拒绝写数据结构而只出到n<=100,,,出题人真的很棒棒.. 一个显然的贪心就是,把和当前序列最左端的数匹配的数移到它的右边,这样迭代下去总是 ...
- 用windowsapi来建立一个窗口
#include <iostream> #include <Windows.h> HINSTANCE g_hInstace = ; LRESULT CALLBACK Windo ...
- iOS开发利器-CocoaPods安装和使用教程
新博客http://www.liuchendi.com 开发iOS项目时肯定会用到许多第三方项目,比如说:ASIHttprequest,JSONKit等等,一些类库可能又关联着其他类库,如果超过一定的 ...
- 《Windows驱动开发技术详解》之StartIO例程
内容中包含 base64string 图片造成字符过多,拒绝显示