1、

 <!--jquery 的主文件...-->

    <script type="text/javascript" src="../../js/jquery.min.js"></script>

    <!--jquery  easyui 的主文件...-->

    <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>

    <!--jQuery 的主样式文件...

    <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">

    -->

    <link type="text/css" rel="stylesheet" href="../../js/themes/bootstrap/easyui.css">

    <!--jQuery 的图标文件...-->

    <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">

    <script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script>

    <script type="text/javascript">

            $(function(){

                 $("#easyUITree").tree({

                         url:"treedata.json",

                        dnd:true,

                        animate:true,

                        checkbox:true,

                        lines:true,

                        onClick:function(node){

                            //alert(node.text);

                            //控制台打印

                            //console.info(node);

                            //$("#easyUITree").tree("getChildren",node)

                            var children=node.children;

                            alert(children.length)

                        }

                 })

            })

    </script>

  </head>

  <body>

        <ul id="easyUITree">

        </ul>

  </body>

treedata.json

[

    {

        "id":1,

        "text":"北京市传智播客教育有限公司",

        "iconCls":"icon-add",

        "children":[

            {

                "id":3,

                "text":"高教产品研发部"

            },{

                "id":4,

                "text":"战略规范部"

            }

        ]

    },{

        "id":2,

        "text":"北京市黑马程序员",

        "children":[

            {

                "id":5,

                "text":"java 教研部"

            },{

                "id":6,

                "text":"IOS 教研部"

            }

            ,{

                "id":7,

                "text":"美女学工部"

            }

        ]

    }

]

2、window弹出框

<!--jquery 的主文件...-->

    <script type="text/javascript" src="../../js/jquery.min.js"></script>

    <!--jquery  easyui 的主文件...-->

    <script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>

    <!--jQuery 的主样式文件...-->

    <link type="text/css" rel="stylesheet" href="../../js/themes/default/easyui.css">

    <!--jQuery 的图标文件...-->

    <link type="text/css" rel="stylesheet" href="../../js/themes/icon.css">

    <script type="text/javascript" src="../../js/locale/easyui-lang-zh_CN.js"></script>

    <!--直接找图标的网站... www.iconfinder.com-->

    <script type="text/javascript">

          $(function(){

                  $("#btn").click(function(){

                        $("#window").window({

                                title:"搜索",

                                height:300,

                                width:200,

                                //modal:true

                        })

                })

                $("#btn-1").click(function(){

                                $.messager.confirm('确认','您确认想要退出系统吗？',function(r){

                                    if (r){

                                        alert('确认删除');

                                    }

                                });

                })

                $.messager.show({

                    title:'我的消息',

                    msg:'消息将在5秒后关闭。',

                    timeout:5000,

                    width:350,

                    height:200,

                    showType:'slide'

                });

          })

    </script>

  </head>

  <body>

              <!--把按钮渲染在这个a 标签上面... -->

            <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>

            <div id="window"></div>

              <div style="float:right">

                <a id="btn-1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">退出系统</a>

              </div>

  </body>

3、jQueryEasyUI的配置

12、jquery的tree组件的更多相关文章

  1. JQuery EasyUI Tree组件的Bug记录

    记录一下使用项目中使用EasyUI遇到的bug,废话少说直接上菜  - _-(bug)..... bug ::   .netcore创建一个web应用时候,会自动引入jQuery库以及一些插件,但是在 ...

  2. C#结合Jquery LigerUI Tree插件构造树

    Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单.呵呵 废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法 1 ...

  3. Jquery easyui tree的使用

    这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...

  4. 轻量jquery框架之--组件交互基础设计

    概要 组件交互基础,即考虑在JQUERY对象下($)下扩展所有组件都需要用到的通用api,如ajax入口.对表单的操作.html片段加载.通用的配合datagrid通用的curd客户端对象等. 扩展a ...

  5. Element-ui tree组件自定义节点使用方法

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~   <template> <di ...

  6. Vue iview Tree组件实现文件目录-高级实现

    Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class=&quo ...

  7. Jquery easyui Tree的简单使用

    Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...

  8. jquery的tree table(树表)

    因项目需要,需要在表格中加入tree,使用了jquery的tree table,经美化,完美兼容各种框架的table: 请移步下载tree table 的js文件及css文件等,http://ludo ...

  9. [置顶] Flex中Tree组件无刷新删除节点

    在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...

随机推荐

  1. Sqli labs系列-less-5&6 报错注入法（下）

    我先输入 ' 让其出错. 然后知道语句是单引号闭合. 然后直接 and 1=1 测试. 返回正常,再 and 1=2 . 返回错误,开始猜表段数. 恩,3位.让其报错,然后注入... 擦,不错出,再加 ...

  2. 【已转移】【Java架构：基础技术】一篇文章搞掂：Spring

    本文篇幅较长,建议合理利用右上角目录进行查看(如果没有目录请刷新). 本文是对<SPRING实战第4版>的总结,大家也可以去仔细研读该书 [------------------------ ...

  3. 浏览器地址栏运行HTML代码(谷歌)

    在地址栏输入 data:text/html,<h1 style='color:red' >Hello, world!</h1> 浏览器会执行你的html代码,效果如下: 如果觉 ...

  4. PHP如何进行错误与异常处理（PHP7中的异常处理和之前版本异常处理的区别）

    PHP如何进行错误与异常处理(PHP7中的异常处理和之前版本异常处理的区别) 一.总结 一句话总结: throwable接口+Error类 在PHP7更新中有一条:更多的Error变为可捕获的Exce ...

  5. 63、saleforce DML

    PRIVELEGE__c privilege = new PRIVELEGE__c(PRIVILAGENAME__c = '权限添加',PRIVILAGEDESCRIBE__c = '权限描述'); ...

  6. 实用maven笔记三-仓库

    maven管理依赖的一个很重要的基础在于,其维护了收集大量依赖jar包的仓库. maven的仓库分类为本地仓库和远程仓库. 构件在仓库的路径大致为:groupId/artifactId/version ...

  7. Vue-cli中的静态资源管理（src/assets和static/的区别）

    资源打包 为了回答这个问题,我们需要了解webpack是如何处理静态资源的.在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查 ...

  8. 关于JDK，tomcat，eclipse的配置

    1.下载安装JDK 在自定义安装路径时,jdk和之后的jre文件夹是属于平行结构,我的安装路径为:D:\jdk\jdk1.6.0_43和D:\jdk\jre6 然后是对环境变量的配置, 计算机→属性→ ...

  9. vue 使用pug（详细说明）

    1.安装pug npm i -D pug pug-html-loader pug-plain-loader cli2.0脚手架修改build/webpack.base.conf.js文件 module ...

  10. tcp - 传输控制协议 （TCP）

    总缆 SYNOPSIS #include <sys/socket.h> #include <netinet/in.h> tcp_socket = socket(PF_INET, ...