前言

前几天面试遇到一个需求（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. 如何通过 Redis 实现分布式锁

    分布式锁需要解决的问题: 互斥性:任意时刻只能有一个客户端获取锁 安全性:锁只能被持有该锁的客户端删除 死锁:获取锁的客户端因为意外宕机未能释放锁,其他客户端再也无法获取到该锁导致死锁 容错:宕机后客 ...

  2. Eclipse控制台

    Eclipse中的控制台,是以卡片布局方式来管理的.每运行一个新的程序,创建一个新的控制台,覆盖到原来的控制台之上. 控制台的控制按钮有10个,仅对其中部分作介绍 第1个按钮结束当前程序的运行 第2个 ...

  3. 最大子数组（LintCode）

    最大子数组 给定一个整数数组,找到一个具有最大和的子数组,返回其最大和. 样例 给出数组[−2,2,−3,4,−1,2,1,−5,3],符合要求的子数组为[4,−1,2,1],其最大和为6 注意 子数 ...

  4. 洛谷——P1890 gcd区间

    P1890 gcd区间 题目描述 给定一行n个正整数a[1]..a[n]. m次询问,每次询问给定一个区间[L,R],输出a[L]..a[R]的最大公因数. 输入输出格式 输入格式: 第一行两个整数n ...

  5. Codeforces Round #433 (Div. 2, based on Olympiad of Metropolises) D. Jury Meeting（双指针模拟）

    D. Jury Meeting time limit per test 1 second memory limit per test 512 megabytes input standard inpu ...

  6. 【BZOJ 1697】1697: [Usaco2007 Feb]Cow Sorting牛排序

    1697: [Usaco2007 Feb]Cow Sorting牛排序 Description 农夫JOHN准备把他的 N(1 <= N <= 10,000)头牛排队以便于行动.因为脾气大 ...

  7. VB查询数据库之组合查询——机房收费总结（二）

    在机房收费系统中,组合查询用的还是挺多的,像上机状态查询窗体.学生上机统计信息窗体.操作员工记录窗体.基本信息维护窗体.这其中,学生基本信息维护窗体中的东西比较多,就以它为例子,说说组合查询吧! 学生 ...

  8. [BZOJ4859][BJOI2017]机动训练(DP)

    4859: [BeiJing2017]机动训练 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 105  Solved: 63[Submit][Stat ...

  9. rmq问题：ST表

    存板子.O(nlogn)预处理,O(1)查询.空间O(nlogn). int d[1000006][25]; int mn[1000006]; void rmq_init() { for(int i= ...

  10. MySQL InnoDB引擎锁的总结

    为什么要锁 我们开的的各式各样系统中,系统运行需要CPU.内存.I/O.磁盘等等资源.但除了硬资源外,还有最为重要的软资源:数据. 当人们访问操作我们的系统时,其实归根是对数据的查看与生产.那么对于同 ...