前言

前几天面试遇到一个需求（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只能选子选项，父级不被选中的更多相关文章

  1. EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值

    参考: https://blog.csdn.net/weixin_43236850/article/details/100320564

  2. EasyUI中combotree允许多选的时候onSelect事件会重复触发onCheck事件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgEAAADkCAIAAACOkmAuAAAgAElEQVR4nO2dW2wc15nnO0EQBJsdzA

  3. Easyui控制combotree只能选择叶子节点

    $(function() { $('#tt').combotree({ url: 'getTree.do', onBeforeSelect: function(node) { if (!$(this) ...

  4. 关于使用easyui 中提示dialog is not a function的问题

    我们经常在一些项目使用easyui,当然必不可少都会用到dialog这个功能,但是有时候你会发现: 明明我的代码没有错误,调用的规范按照API的来撰写,但是还有会报 $(...).dialog is ...

  5. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  6. 第二百二十七节，jQuery EasyUI，ComboTree(树型下拉框)组件

    jQuery EasyUI,ComboTree(树型下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解EasyUI中ComboTree(树型下拉框)组件的使用方法,这个 ...

  7. easyui-combotree 只能选叶子未级

    easyui-combotree 只能选叶子未级 function edit_dg() { //选中一行,获取这一行的属性的值 var selected = $('#tbClientListBrows ...

  8. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  9. 128_Power BI父级排名TOPN子级动态展示

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 一.背景 前些天在和朋友交流Power BI中有这样一个需求,按照父级排名后,需要显示出父级TOPN的子级明细. 如下&l ...

随机推荐

  1. GIT的安装及git状态的变更详解

    一.安装git环境 (2)Git安装 Centos: yum install -y git Ubuntu: apt-get install git Windows安装git bash软件 注意不要使用 ...

  2. 7.spark Streaming 技术内幕 : 从DSteam到RDD全过程解析

    原创文章,转载请注明:转载自 听风居士博客(http://www.cnblogs.com/zhouyf/)   上篇博客讨论了Spark Streaming 程序动态生成Job的过程,并留下一个疑问: ...

  3. MyBatis插入时候获取自增主键方法

    方法一:(Oralce不支持这种写法) useGeneratedkeys 默认值为 false,含义:设置是否使用JDBC的getGenereatedKeys方法获取主键并赋值到keyProperty ...

  4. POJ 1845 Sumdiv （整数唯一分解定理）

    题目链接 Sumdiv Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 25841   Accepted: 6382 Desc ...

  5. 【招聘需求】前端开发/PHP工程师【往全栈发展】

    1.熟悉html.css,了解javascript2.熟悉任何一种服务端编程语言(php.python.java.asp.jsp.c.c++.c#,go等等)3.热爱工作,接受加班者优先 我们是公司内 ...

  6. Luogu P3391 【模板】文艺平衡树（FHQ-Treap）

    题意 给出一个长为$n$序列$[1,2,...,n]$,$m$次操作,每次指定一段区间$[l,r]$,将这段区间翻转,求最终序列 题解 虽然标题是$Splay$,但是我要用$FHQ\ Treap$,考 ...

  7. What does a (+) sign mean in an Oracle SQL WHERE clause?

    This is an Oracle-specific notation for an outer join. It means that it will include all rows from t ...

  8. hdu 4071& poj 3873 & zoj 3386 & uva 12197 Trick or Treat 三分法

    思路: 看到这个题目就发现所需最短时间也就是房子和相遇点的最远距离具有凹凸性,很容易就想到了三分法枚举. 找出所有房子的X坐标的最小最大值作为上下界. 代码如下: #include<stdio. ...

  9. idea自动生成spring实体

    创建Spring Boot项目 idea创建新项目 File->New->Project选择Spring Initializr默认使用官方的https://start.spring.io/ ...

  10. for循环、for-in、forEach、for-of四大循环

    平时自己在写一些小栗子的时候,用到的基本上是for循环,因为在学专业课(C,C++,JAVA,...)的时候用的最多的就是for循环,不过for循环的效率也是比较高的. 但是for循环在写的时候,涉及 ...