`
反求诸己
  • 浏览: 543290 次
  • 性别: Icon_minigender_1
  • 来自: 湖南娄底
社区版块
存档分类
最新评论

Jquery easyui tree 一些常见操作

 
阅读更多

遍历tree nodes

function Travel(treeID){//参数为树的ID,注意不要添加#
   var roots=$('#'+treeID).tree('getRoots'),children,i,j;
   for(i=0;i<roots.length;i++){
     alert(roots[i].text);
     children=$('#'+treeID).tree('getChildren',roots[i].target);
     for(j=0;j<children.length;j++)alert(children[j].text);
   }
}     

 

       $(function(){
                $('#tt2').tree({
                    checkbox: true,
                    url: 'tree_data.json',
                    onClick: function(node){
                        $(this).tree('toggle', node.target);
                        //alert('you dbclick '+node.text);
                    },
                    onContextMenu: function(e, node){
                        e.preventDefault();
                        $('#tt2').tree('select', node.target);
                        $('#mm').menu('show', {
                            left: e.pageX,
                            top: e.pageY
                        });
                    }
                });
            });
            function reload(){
                var node = $('#tt2').tree('getSelected');
                if (node) {
                    $('#tt2').tree('reload', node.target);
                }
                else {
                    $('#tt2').tree('reload');
                }
            }
            
            function getChildren(){
                var node = $('#tt2').tree('getSelected');
                if (node) {
                    var children = $('#tt2').tree('getChildren', node.target);
                }
                else {
                    var children = $('#tt2').tree('getChildren');
                }
                var s = '';
                for (var i = 0; i < children.length; i++) {
                    s += children[i].text + ',';
                }
                alert(s);
            }
            
            function getChecked(){
                var nodes = $('#tt2').tree('getChecked');
                var s = '';
                for (var i = 0; i < nodes.length; i++) {
                    if (s != '') 
                        s += ',';
                    s += nodes[i].text;
                }
                alert(s);
            }
            
            function getSelected(){
                var node = $('#tt2').tree('getSelected');
                alert(node.text);
            }
            
            function collapse(){
                var node = $('#tt2').tree('getSelected');
                $('#tt2').tree('collapse', node.target);
            }
            
            function expand(){
                var node = $('#tt2').tree('getSelected');
                $('#tt2').tree('expand', node.target);
            }
            
            function collapseAll(){
                var node = $('#tt2').tree('getSelected');
                if (node) {
                    $('#tt2').tree('collapseAll', node.target);
                }
                else {
                    $('#tt2').tree('collapseAll');
                }
            }
            
            function expandAll(){
                var node = $('#tt2').tree('getSelected');
                if (node) {
                    $('#tt2').tree('expandAll', node.target);
                }
                else {
                    $('#tt2').tree('expandAll');
                }
            }
            
            function append(){
                var node = $('#tt2').tree('getSelected');
                $('#tt2').tree('append', {
                    parent: (node ? node.target : null),
                    data: [{
                        text: 'new1',
                        checked: true
                    }, {
                        text: 'new2',
                        state: 'closed',
                        children: [{
                            text: 'subnew1'
                        }, {
                            text: 'subnew2'
                        }]
                    }]
                });
            }
            
            function remove(){
                var node = $('#tt2').tree('getSelected');
                $('#tt2').tree('remove', node.target);
            }
            
            function update(){
                var node = $('#tt2').tree('getSelected');
                if (node) {
                    node.text = '<span style="font-weight:bold">new text<\/span>';
                    node.iconCls = 'icon-save';
                    $('#tt2').tree('update', node);
                }
            }
            
            function isLeaf(){
                var node = $('#tt2').tree('getSelected');
                var b = $('#tt2').tree('isLeaf', node.target);
                alert(b)
            }
            
            function GetNode(type){
                var node = $('#tt2').tree('getChecked');
                var chilenodes = '';
                var parantsnodes = '';
                var prevNode = '';
                for (var i = 0; i < node.length; i++) {
                
                    if ($('#tt2').tree('isLeaf', node[i].target)) {
                        chilenodes += node[i].text + ',';
                        
                        var pnode = $('#tt2').tree('getParent', node[i].target);
                        if (prevNode != pnode.text) {
                            parantsnodes += pnode.text + ',';
                            prevNode = pnode.text;
                        }
                    }
                }
                chilenodes = chilenodes.substring(0, chilenodes.length - 1);
                parantsnodes = parantsnodes.substring(0, parantsnodes.length - 1);
                
                if (type == 'child') {
                    return chilenodes;
                }
                else {
                    return parantsnodes
                };
                };
            function getNodes(){
                alert(GetNode('fnode') + "," + GetNode('child'));
            }
            
            function doNode(){
      var c="";
      var p="";
      $(".tree-checkbox1").parent().children('.tree-title').each(function(){
        c+=$(this).parent().attr('node-id')+",";
      });
       $(".tree-checkbox2").parent().children('.tree-title').each(function(){
     p+=$(this).parent().attr('node-id')+",";
      });
      var str=(c+p);
      str=str.substring(0,str.length-1);
      alert(str);
            }

分享到:
评论

相关推荐

    jquery-easyui-tree学习

    jQuery EasyUI Tree允许开发者轻松创建可扩展、可操作的树形结构,广泛应用于菜单导航、数据分类展示等场景。 jQuery EasyUI Tree的基础使用主要涉及以下几个方面: 1. **引入依赖**: 在HTML页面中,我们需要...

    JqueryEasyUI Tree 动态加载,稍作修改就可以用了

    本篇文章将深入探讨如何实现jQuery EasyUI Tree的动态加载,并根据提供的标题和描述,分享一些可能的实现方法。 动态加载是一种优化技术,可以提高用户体验,避免一次性加载大量数据导致页面响应变慢。对于Tree组件...

    Jquery-easyui-tree常见操作

    本文详细介绍了 Jquery-easyui-tree 的一些常见操作,包括加载树、获取所有选中节点、展开和折叠所有节点、展开和折叠指定节点以及添加新节点等。通过这些基本的操作,我们可以根据具体需求灵活地管理和操作树形结构...

    jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏。 /** * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: * $("#treeId").tree("search", searchText); * ...

    easyui tree扁平化扩展,不用再为children嵌套结构烦恼

    EasyUI Tree插件是基于jQuery的一个轻量级插件,它提供了一种简单的方式创建树形控件。然而,在实际应用中,我们常常遇到数据结构的问题——即如何处理带有`children`属性的嵌套数据结构。这篇文章将详细介绍如何对...

    jquery easyui tree 树形列表节点异步加载

    在本文中,我们将深入探讨jQuery EasyUI中的Tree组件以及如何实现树形列表节点的异步加载。EasyUI是一个基于jQuery的轻量级前端框架,它提供了丰富的UI组件,包括我们这里关注的Tree组件。异步加载是提升用户体验的...

    jquery easyui 帮助文档

    jQuery EasyUI 的核心在于其组件系统,这些组件包括但不限于数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、面板(panel)、进度条(progressbar)、...

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个框架大大简化了网页界面的设计工作,使得...

    初试JqueryEasyUI(附Demo)

    在初试 Jquery EasyUI 的 Demo 中,你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码,可以运行...

    easyui tree使用方式

    以下是一些常见的使用场景: 1. 群组信息:EasyUI Tree 可以用于显示群组信息,例如:显示用户组、角色、权限等信息。 2. 电费计价模式:EasyUI Tree 可以用于显示电费计价模式,例如:显示电费价格、计算电费等...

    jQuery EasyUI 1.5.1 版 API 中文版

    2. **组件详解**:jQuery EasyUI 提供了许多组件,如 `datagrid`(数据网格)、`dialog`(对话框)、`menu`(菜单)、`tabs`(选项卡)、`tree`(树形结构)和`form`(表单)。每个组件都有详细的配置选项、方法和...

    jQuery easyui 全套文件

    EasyUI 是基于 jQuery 的一组 UI 组件,它为开发者提供了诸如表格(datagrid)、下拉菜单(combobox)、树形控件(tree)、对话框(dialog)等常见的网页元素。这些组件不仅具有丰富的样式,还内置了大量的功能,如...

    jQuery EasyUI 1.3.6 离线简体中文API文档

    最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...

    jQueryEasyUI1.3.6版本

    1. **组件库**:jQuery EasyUI 提供了多种UI组件,如对话框(Dialog)、表单(Form)、表格(Grid)、树形视图(Tree)、下拉菜单(Menu)等。这些组件都有完整的API和丰富的样式,可以满足开发各种类型Web应用的...

    jQuery EasyUI 1.4.2 版 API 中文版.zip

    此外,jQuery EasyUI 还强调组件间的互操作性,允许开发者通过 JavaScript 和 CSS 样式轻松地组合和定制组件,实现复杂的用户界面效果。手册中也会涵盖这些集成和扩展的话题。 总之,jQuery EasyUI 1.4.2 版 API ...

    JqueryEasyUI1.4参考手册

    在 `JqueryEasyUI1.4参考手册.chm` 中,你将找到关于 jQuery EasyUI 1.4 版本的详尽指南。`.chm` 文件是一种微软编写的帮助文档格式,它包含索引、搜索功能和一系列主题,方便用户查找和学习。 **组件介绍** ...

    JQuery Easyui Tree的oncheck事件实现代码

    在使用JQuery Easyui Tree组件时,我们常常需要监听用户对树形结构中节点的交互行为,例如当用户点击复选框时触发特定的操作。然而,Easyui Tree的API默认只提供了`onClick`事件,这对于处理复选框的选中状态并不...

    jquery easyUI

    - **实例**:jQuery EasyUI 提供了大量的示例代码,帮助开发者了解如何使用各个组件,如对话框(dialog)、表格(datagrid)、树形控件(tree)、下拉菜单(combobox)等。 ### 2. 主要组件介绍 #### 2.1 数据网格...

    jquery-easyui-1.7.0.zip官方文档

    2. 组件丰富:包括对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形控件(Tree)、下拉选择(Combobox)等多种常见UI组件,满足各种界面需求。 3. 主题支持:内置多套主题,可自定义样式,满足...

Global site tag (gtag.js) - Google Analytics