前言

前几天面试遇到一个需求（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. 洛谷P1280 尼克的任务 [DP补完计划]

    题目传送门 题目描述 尼克每天上班之前都连接上英特网,接收他的上司发来的邮件,这些邮件包含了尼克主管的部门当天要完成的全部任务,每个任务由一个开始时刻与一个持续时间构成. 尼克的一个工作日为N分钟,从 ...

  2. python之并发编程(线程\进程\协程)

    一.进程和线程 1.进程 假如有两个程序A和B,程序A在执行到一半的过程中,需要读取大量的数据输入(I/O操作),而此时CPU只能静静地等待任务A读取完数据才能继续执行,这样就白白浪费了CPU资源.是 ...

  3. 使用Nginx的配置对cc攻击进行简单防御

    ddos攻击:分布式拒绝服务攻击,就是利用大量肉鸡或伪造IP,发起大量的服务器请求,最后导致服务器瘫痪的攻击. cc攻击:类似于ddos攻击,不过它的特点是主要是发起大量页面请求,所以流量不大,但是却 ...

  4. RabbitMQ (八) 队列的参数详解

    代码中,我们通常这样声明一个队列: //声明队列 channel.QueueDeclare ( queue: QueueName, //队列名称 durable: false, //队列是否持久化.f ...

  5. 3000大洋，自己配置i5主机

    自用的HP笔记本已经“七年之痒”了,所以在2016年新年之前,换了台新电脑.主要用来娱乐(电影),但是也要能够满足工作学习(本人从事IT行业)的需要. 遵循本人一贯的高冷装X的习惯,决定自己买配件攒机 ...

  6. Python开发基础-Day10生成器表达式形式、面向过程编程、内置函数部分

    生成器表达式形式 直接上代码 # yield的表达式形式 def foo(): print('starting') while True: x=yield #默认返回为空,实际上为x=yield No ...

  7. 【BZOJ 3993】【SDOI 2015】序列统计

    http://www.lydsy.com/JudgeOnline/problem.php?id=3992 这道题好难啊. 第一眼谁都能看出来是个dp,设\(f(i,j)\)表示转移到第i位时前i位的乘 ...

  8. [Lydsy1806月赛] 路径统计

    题面在这里! xjb想的做法竟然不小心把std艹爆了qwq,我也很无奈啊.... 那接下来就说一下我的神奇做法qwq 如果是经常读我博客的童鞋会发现其实我以前就想要做这个题啦,只不过当时读错题啦... ...

  9. JDK源码学习笔记——LinkedHashMap

    HashMap有一个问题,就是迭代HashMap的顺序并不是HashMap放置的顺序,也就是无序. LinkedHashMap保证了元素迭代的顺序.该迭代顺序可以是插入顺序或者是访问顺序.通过维护一个 ...

  10. Codeforces Beta Round #2 C. Commentator problem 模拟退火

    C. Commentator problem 题目连接: http://www.codeforces.com/contest/2/problem/C Description The Olympic G ...