前言

前几天面试遇到一个需求（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. lr_Analysis Options选项介绍

  2. 数据库的主从复制常用Xshell命令

    mysql配置 1.设置数据库用户名和密码 mysqladmin -u root password "root" 2.打开3306端口号 iptables -I INPUT -p ...

  3. PLSQL的注释技巧

    概述 这里提供一些注释的技巧,用来模仿Java中的文档注释的功能. 在Eclipse中,鼠标悬浮在类或其成员上,会显示相关的文档注释:在PL/SQL中也有类似的功能,我们需要掌握一些注释技巧,让其可读 ...

  4. Flask实战第37天：服务器权限验证

    完成服务器权限验证之前,我们先如下页面先补上 帖子管理 {% extends 'cms/cms_base.html' %} {% block title %} 帖子管理-CMS管理系统 {% endb ...

  5. （转）求质数算法的N种境界[1] - 试除法和初级筛法

    ★引子 前天,俺在<俺的招聘经验[4]:通过笔试答题能看出啥?>一文,以"求质数"作为例子,介绍了一些考察应聘者的经验.由于本文没有政治敏感内容,顺便就转贴到俺在CSD ...

  6. Java 生产者消费者 & 例题

    Queue http://m635674608.iteye.com/blog/1739860 http://www.iteye.com/problems/84758 http://blog.csdn. ...

  7. [BZOJ2109][NOI2010]航空管制(贪心+拓扑)

    2109: [Noi2010]Plane 航空管制 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1227  Solved: 510[Submit][ ...

  8. bzoj 2038 小Z的袜子(hose)（莫队算法）

    2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 11542  Solved: 5166[Sub ...

  9. BZOJ 4939 [Ynoi2016]掉进兔子洞（莫队+bitset）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4939 [题目大意] 给出一个数列,每个询问给出三个区间,问除去三个区间共有的数字外, ...

  10. linux基础环境搭建（2）

    打开虚拟机,用Xshell连接之前,首先我们要获取IP的地址   先输入获取 IP的命令 ip addr 获取ipifup (网卡名字) #网卡启动ifdown (网卡名字) #网卡关闭 没有获取到的 ...