`
83026191
  • 浏览: 45359 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs树

阅读更多

oneTreePanel =Ext.extend(Ext.tree.TreePanel,{
   menu:null,
   constructor:function(){
     this.menu=new Ext.menu.Menu({
      items:[{
        text:"添加",
        handler:this.onInsertNode,
        scope:this
       },{
        text:"删除",
        handler:this.onDeleteNode,
        scope:this
       },{
        text:"修改",
        handler:this.onUpdateNode,
        scope:this
       }]  
    }),
    oneTreePanel.superclass.constructor.call(this,{
      renderTo:Ext.getBody(),
      width:200,
      height:200,
      
      listeners:{
        "contextmenu":{
          fn:this.onContextmenu,
          scope:this
         }
      }
      //导入数据 数据只能是json的()
      loader:new Ext.tree.TreeLoader({
          dataUrl:'http://localhost/ExtJSTest/server/app/test/29/databasePanel.asp',
          //每次下载的时候不刷新页面
          clearOnload:false
         }),
      //定义根节点
      root:new Ext.tree.AsyncTreeNode({
                               text: '载入节点',
          id:"0"
                        })
    });
      },
   onContextmenu:function(_node , _e){
    //点击菜单时候就显现出来菜单的值
    this.menu["crrentNode"] = _node;
    //判断不能删除根结点
    if(this.menu["crrentNode"].id=0)
         this.menu.items.itemAt(1).setDisabled(true);
    else
         this.menu.items.itemAt(1).setDisabled(false);
    //时间传的参数 _e.getXY获取当前的坐标
    this.menu.showAt(_e.getXY);
   },
   //menu菜单修改事件
   onUpdateNode:function(){
      //alert(this.menu["crrentNode"].text);
      Ext.Msg.prompt("请输入修改后的名称","名称",this.onUpdateNodePrompt,this,false,this.menu[crrentNode].text);
   },
   //menu菜单修改事件
   onUpdateNodePrompt:function(_btn,_text){
    if(_btn == "ok")
    {
     if(this.menu["crrentNode"].text!=_text.trim())
     {
     this.menu["crrentNode"].setText(_text);
      Ext.Ajax.request({url:"",params:{id:this.menu["crrentNode"].id,text:this.menu["crrentNode"].text}});
     }
       }
    
    
   },
   //menu菜单删除事件
   onDeleteNode:function(){
    Ext.Msg.confirm("系统提示","您师是否确定删除节点?",this.onDeleteNodeConfirm,this);
   },
   //menu菜单删除事件
   onDeleteNodeConfirm:function(_btn){
    var _node= this.menu["crrentNode"];
    if(_btn == "yes")
    //_node.parentNode.id 获取当前节点
     Ext.Ajax.request({url:"",params:{parentId:_node.parentNode.id,id:_node.id}});
     _node.remove();
      },
   //添加树节点事件
   onInsertNode:function(){
     Ext.Msg.prompt("请输要添加的树节点名称","名称",this.onInsertNodePrompt,this);
      },
   //添加树节点事件
   onInsertNodePrompt:function(_btn,_text){
         if(_btn=="ok")
      {
       var _parent=this.menu["crrentNode"];
      //在每次添加之前 false 这 样可以在最后叶子节点上添加
      _parent.leaf=false,
      //添加个节点
      var _node=new Ext.tree.AsyncTreeNode({
                               text:_text,
          leaf:true,
          id:Ext.id()
                         }));
                     ///_parent.id 获取要添加节点的id
      Ext.Ajax.request({
        url:"",
        params:{parentId:_parent.id,id:_node.id,text:_node.text}
         });
      //这个判断会避免出现客户端添加的数据和数据库添加的数据同时出现
      if(_parent.isLoaded()){
      _parent.appendChild(_node);
      }else{
      //展开这个节点
      _parent.expand();
      }
      }
   }
   
   
});

分享到:
评论

相关推荐

    Extjs树Demo

    在给定的“Extjs树Demo”中,我们将探讨如何使用ExtJS实现树形结构,这是一种常见的数据可视化方式,用于表示层次结构的数据。 首先,理解ExtJS中的树(Tree)组件是非常重要的。这个组件允许开发者创建可交互、多...

    extjs 树 搜索

    在EXTJS中,树形控件(Tree)是一种常见的数据展示方式,用于组织层次结构的数据。树形控件可以被广泛应用于文件系统、组织架构、菜单等场景。当我们需要在这些大量的层次数据中查找特定信息时,搜索功能就显得尤为...

    ExtJs树例子

    在"ExtJs树例子"这个主题中,我们主要关注的是ExtJS如何实现树形控件(Tree Panel)。 树形控件在Web应用中广泛用于展示层次结构的数据,比如文件系统、组织架构或菜单导航。ExtJS提供了一个完善的TreePanel组件来...

    extjs树形下拉框treeField

    extjs 树形下拉列表框,可以进行数据选择,数据回显。

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    创建一个可编辑的EXTJS树需要以下步骤: 1. **配置TreePanel**:首先,我们需要创建一个TreePanel实例,并为其配置必要的属性,如`rootVisible`(控制是否显示根节点)、`lines`(控制是否显示连接线)和`...

    Extjs树分页组件扩展

    "Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...

    extJs树形框架(一个例子)

    这个“ExtJS树形框架(一个例子)”示例项目展示了如何利用ExtJS创建一个与后端Oracle数据库、iBATIS持久层框架和Struts MVC框架交互的树形界面。下面,我们将深入探讨这些技术以及它们在该项目中的应用。 1. **...

    EXTJS 树的实例

    在这个“EXTJS 树的实例”中,我们将深入探讨EXTJS树的基本制作过程。 1. **EXTJS Tree的基本概念** EXTJS的树由一系列可扩展的树节点组成,每个节点都可以有子节点,形成层次结构。树组件提供了丰富的功能,包括...

    Extjs树(tree)控件

    详细说明了extjs中的树控件,正确无误的说明extjs树控件的强大之处

    ExtJs树形结构 ext的简单应用

    综上所述,ExtJs树形结构提供了一种直观且灵活的方式来展示和操作层次化数据,通过理解和掌握其基本用法和扩展功能,开发者可以构建出满足各种需求的树形界面。在项目中,可以结合具体业务需求,进行个性化定制,...

    extjs树形结构实现系统主界面功能框架借鉴.pdf

    【EXTJS树形结构实现系统主界面功能框架】 EXTJS是一种流行的JavaScript库,用于构建富客户端应用程序。在本文档中,作者展示了如何使用EXTJS创建一个具有树形结构的系统主界面功能框架。这个框架利用EXTJS的强大...

    ExtJs在struts2.0.x下实现动态树的解决方案

    通过以上步骤,你可以在Struts2.0.x环境中成功实现一个动态的、交互式的ExtJs树结构。这个解决方案不仅适用于基本的树结构展示,还可以扩展到更复杂的业务场景,如权限控制、多级选择等。记得在实际开发中根据项目...

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    首先,我们要理解ExtJS树形组件的基本构造。一个树形组件由节点(Nodes)组成,每个节点可以有子节点,也可以包含复选框。复选框的添加通常通过配置`checkbox`属性来完成。例如: ```javascript { text: '父节点',...

    Extjs 树示例

    学习这个ExtJS树示例,你可以深入了解如何使用ExtJS创建动态、交互式的用户界面,并且如何结合后端数据源实现数据的动态加载。同时,这也会涉及到前端和后端的通信、数据处理和展示等方面的知识,对于提升Web开发...

    ExtJS树形结构.docx

    在EXTJS中,树形结构(Tree)是一种用于展示层级数据的组件,它允许用户以图形化的方式浏览和操作层次关系。以下是对标题和描述中所述EXTJS实现简单树状结构的知识点的详细说明: 1. **Ext.onReady**:这是EXTJS...

    Extjs下拉多选树

    在ExtJS中,"下拉多选树"(Combobox Tree)是一种结合了下拉框和树形结构的组件,它允许用户在下拉菜单中选择多个树节点,提供了一种高效且直观的用户交互方式。 1. **下拉树组件**:在ExtJS中,树形组件...

    EXTJS动态树支持checkbox 全选

    标题中的“EXTJS动态树支持checkbox全选”指的是EXTJS中树组件的一个特性,即在树形结构中添加复选框(checkbox)功能,并支持全选和全取消选中操作。这样的功能对于需要用户进行多项选择的场景非常有用,比如文件...

    Extjs Json树封装

    总的来说,"Extjs Json树封装"涉及的核心知识点有:JSON数据格式、ExtJS树形组件、树加载器(`JsonTreeLoader`)、可能的自定义插件(`JsonPluginTreeLoader`)以及如何在实际应用中配置和使用它们。理解并熟练运用...

    extjs实现动态树

    1. `Ext.tree.TreePanel`:这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件,支持数据源绑定,能轻松实现动态加载。 2. 数据源:动态树的数据通常来自服务器,通过Ajax请求获取JSON格式的节点数据...

Global site tag (gtag.js) - Google Analytics