前言

前几天面试遇到一个需求（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. win_tc使用感受

    上大学的时候一直在使用win_tc就因为使用方便,今天准备用这个工具编辑一个函数,就特意下载了一个. 没想到直接出来一个bug. sizeof(char*)结果竟然是2. 果断接卸,误人子弟啊.

  2. 单例（LintCode）

    单例 单例 是最为最常见的设计模式之一.对于任何时刻,如果某个类只存在且最多存在一个具体的实例,那么我们称这种设计模式为单例.例如,对于 class Mouse (不是动物的mouse哦),我们应将其 ...

  3. Codeforces Round #274 (Div. 2) Riding in a Lift（DP 前缀和）

    Riding in a Lift time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  4. 【kubernetes】ubuntu14.04 64位 搭建kubernetes过程

    背景: Kubernetes介绍:http://kubernetes.io/docs/getting-started-guides/ github地址:https://github.com/kuber ...

  5. 【二分图】【并查集】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem L. Canonical duel

    给你一个网格(n<=2000,m<=2000),有一些炸弹,你可以选择一个空的位置,再放一个炸弹并将其引爆,一个炸弹爆炸后,其所在行和列的所有炸弹都会爆炸,连锁反应. 问你所能引爆的最多炸 ...

  6. [转] javax.servlet.jar - jar not loaded问题解决

    把那个jsp-api.jarservlet-api.jar删除即可! Details:把 webapps\maintenance\WEB-INF\lib\ 下面的 servlet-api.jar 删掉 ...

  7. Linux进程(作业)的查看和杀死 牛

    http://www.cnblogs.com/geaozhang/p/6910151.html

  8. Vue2.X的路由管理记录之 钩子函数（切割流水线）2

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...

  9. C,C++经典问题

    C,C++经典问题   1 编程基础 1.1 基本概念 1.1.1 指针的理解:const char*, char const*, char*const的区别问题几乎是C++面试中每次都会有的题目. ...

  10. 面经 | 我是如何通过校招拿到京东的Offer的

    本文来自粉丝投稿,原作者:红鼻子熊. 版权归Hollis所有. OFFER:京东2018校招物流研发岗 个人:211小硕 面试时间:2017年秋天 整体:三轮面试,前两轮为技术面试,最后为hr面试 一 ...