`

一个ext树的封装与实现

阅读更多
var selectStr="";
var ext_Tree = function(){
    var Tree = Ext.tree;
    var tree;
    var root;
    return{
        init:function(){
            tree = new Tree.TreePanel({
                el:extTree.treeDiv,
                useArrows:true,
                autoScroll:true,
                animate:true,
                enableDD:false,
                containerScroll: true,
                border:true,
                rootVisible:true,
                loader: new Tree.TreeLoader({
                    dataUrl:extTree.dataUrl
                })
            });
            // set the root node
            root = new Tree.AsyncTreeNode({
                text: extTree.rootName,
                draggable:false,
                id:extTree.rootId,
                type:extTree.type
            });
            tree.setRootNode(root);
            tree.on(
                'beforeload',
                function(node){
                    if(beforeLoad){
                        beforeLoad(tree,node);
                    }
            });
            tree.on(
                'click',
                function(node){
                    node.expand();
                    //if(parent.nodeOnClick){
                        nodeOnClick(node);
                   // }
            });
            tree.on(
                'dblclick',
                function(node){
                    node.expand();
                   // if(parent.nodeOnDbClick){
                        nodeOnDbClick(node);
                    //}
            });
            tree.on(
                'expandnode',
                function(node){
                    //if(parent.nodeOnExpand){
                        nodeOnExpand(node);
                    //}
            });
            tree.on(
                'collapsenode',
                function(node){
                    if(nodeOnCollapse){
                        nodeOnCollapse(node);
                    }
            });        
            // render the tree
            tree.render();
            root.expand();
        },
        reUP : function(str){
            selectStr="selectStr="+str;
            root.reload();
            selectStr="";
        }
    }
    tree.root.reload();
}();
Ext.EventManager.onDocumentReady(ext_Tree.init, ext_Tree, true);

 

 

<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-tiles.tld" prefix="tiles" %>
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
	<%=request.getAttribute("cssScript")%>
        <link rel="stylesheet" type="text/css" href="<html:rewrite page="/javascripts/ext/resources/css/ext-all.css"/>" />
        <SCRIPT language="javascript" src="<html:rewrite page="/javascripts/ext/ext-base.js"/>"></SCRIPT>
        <SCRIPT language="javascript" src="<html:rewrite page="/javascripts/ext/ext-all.js"/>"></SCRIPT>
        <SCRIPT language="javascript" src="<html:rewrite page="/javascripts/tree/extTree.js"/>"></SCRIPT>
 </HEAD>

 <BODY>
  <div id="tree-div" style="overflow:auto; height:100%;width:150px;border:0px solid #c3daf9;"></div>
 </BODY>
</HTML>
<script language='javascript'>
        var base = "<html:rewrite page=""/>";
        var listAll = "1";	
        /**
          *初始化树
          */
        var extTree = new Object();
        //加载树的Div
        extTree.treeDiv = "tree-div";
        //根节点id
        extTree.rootId = "1500000000";
        //根节点名称
        extTree.rootName = "内部论坛";
        //根节点类型
        extTree.type = "0";
        //一次性加载树所有节点时url
        extTree.dataUrl = "";
        var sel_node = null;
        //树节点加载前事件
        function beforeLoad(tree,node){
            tree.loader.dataUrl = base+"/scripts/refer.do?doType=bbsTypeList&orgId="+node.attributes.id+"&listAll="+listAll+"&"+selectStr;
        	//window.parent.frames[1].location = base+"/scripts/bbs.do?doType=treeList&objId="+node.attributes.id;
        }
        //节点被选中事件
        function nodeOnClick(node){
            if(node.attributes.type == '0'){
                sel_node = node;
            }
            
            window.parent.frames[1].location = base+"/scripts/bbs.do?doType=list&objId="+sel_node.attributes.id;
        }
        //节点被双击事件
        function nodeOnDbClick(node){
            if(node.attributes.type == '0'){
                sel_node = node;
            }
            window.parent.frames[1].location = base+"/scripts/bbs.do?doType=list&objId="+sel_node.attributes.id;
        }
        //节点展开时事件
        function nodeOnExpand(node){
            if(node.attributes.type == '0'){
                node.getUI().removeClass("x-tree-node-collapsed");
                node.getUI().removeClass("x-tree-node-leaf");
                node.getUI().addClass('x-tree-node-expanded');
            }
        }
		//节点合并时事件
		function nodeOnCollapse(node){
			
		}
        
        var nId;
        function timeOut(str){
            window.clearTimeout(nId);
            str=str.replace(/\\/ig,"\\\\").replace(/\"/ig,"\\\"").replace(/%/ig,"%25").replace(/&/ig,"%26").replace(/#/ig,"%23").replace(/\+/,"%2B");
            nId=window.setTimeout("ext_Tree.reUP('"+str+"');",1000);
        }
        function addOrg(){
            if(sel_node == null){
                alert("请先选择机构!");
                return;
            }
            var orgId = sel_node.attributes.id;
            var orgName = sel_node.attributes.text;
            var len = dtb.table.rows.length;
            var j = 0;
            for(var i=0;i<len*1;i++){//>
                var id = dtb.table.rows[i].cells[1].innerText;
                if(orgId == id){
                    j++;
                    break;
                }
            }
            if(j==0){
                insertRow(orgId,orgName);
            }
        }
        function insertRow(id,name){
            var row = dtb.table.insertRow();
            var cell;
            row.className = "GridItem";
            row.style.wordWrap = "break-word";
            row.style.wordBreak = "break-all";
            //0 名称
            cell = row.insertCell();
            cell.style.width = "254";
            cell.noWrap = true;
            cell.innerText = name;
            //0 编号
            cell = row.insertCell();
            cell.style.display = "none";
            cell.innerText = id;
        }
        function delOrg(){
            if(dtb.selRow == null){
                alert("请先选中一条机构!");
                return;
            }
            dtb.temp_deleteSelRow();
            if(dtb.table.rows.length*1>0){
                dtb.temp_setSelectRow("0");
            }
        }
        function doConfirm(){
            var reValue = new Array();
            var len = dtb.table.rows.length;
            for(var i=0;i<len*1;i++){//>
                var value = new Object();
                value.value = dtb.table.rows[i].cells[1].innerText;
                value.innerText = dtb.table.rows[i].cells[0].innerText;
                reValue[i] = value;
            }
            window.returnValue = reValue;
            window.close();
        }
        function doExit(){
            window.close();
        }
</script>

  

分享到:
评论

相关推荐

    Ext表格控件和树控件

    创建一个基本的 `TreePanel` 需要定义树节点、树加载器以及相关的配置选项。下面是一个简单的 `TreePanel` 示例: ```javascript Ext.onReady(function() { var tree = new Ext.tree.TreePanel({ title: '文件...

    4.0Ext 树型结构

    树面板与数据存储之间的交互通过节点接口(The Node Interface)实现。这个接口封装了模型实例,提供了额外的方法和属性来适应树控件的特殊状态。例如,你可以改变树的外观,通过设置`useArrows`为`true`来隐藏边线...

    ext2.0树的增删改

    在这里,"ext2.0树"可能是指模拟ext2文件系统的目录结构,用以实现一种数据存储和检索的方式。 树节点的增删改操作是树数据结构的基本操作: 1. **增加节点**:创建新的节点并将其插入到适当的位置。在有权重的树...

    Ext4+SpringMVC实例Demo源码

    这个实例Demo对初学者来说是一个很好的学习资源,它演示了如何将富客户端的Ext4应用与后端的SpringMVC服务相结合。通过阅读和理解源码,可以深入理解这两个技术的工作原理和集成方式,提升Java Web开发技能。同时,...

    EXT3.0+Struts2.0 树控件代码示例

    4. JSON结果类型:为了与EXT3.0的树控件通信,通常会返回JSON格式的数据,所以需要配置或自定义一个JSON结果类型。 5. 服务层和持久层:根据业务需求,实现获取树数据的服务方法和对应的数据库操作。 在这个示例中...

    EXT+S2SH整合动态加载树的列子

    总的来说,"EXT+S2SH整合动态加载树的列子"是一个综合性的Web开发示例,涵盖了前端交互设计、后端服务处理和数据库操作等多个方面,对于学习和理解Web应用开发,特别是EXT与Java后端框架的集成,具有很大的参考价值...

    Ext用户UI界面优秀框架

    总的来说,Ext JS 是一个功能强大、全面的前端框架,尤其适合开发大型、复杂的企业级Web应用。它提供了一个完整的生态系统,包括强大的组件库、数据管理、布局机制以及丰富的API,帮助开发者构建出高质量的用户界面...

    ext-base.js

    5. **动画效果**:EXT提供了一系列的动画效果,"ext-base.js"中包含了动画的实现,使得UI组件可以平滑过渡,提升用户体验。 6. **布局管理**:EXT的布局系统是其组件化的一大亮点,"ext-base.js"中定义了各种布局...

    Ext .net控件

    Ext.NET控件是一种将流行的JavaScript库Ext JS与微软的.NET框架相结合的技术,旨在为开发者提供在ASP.NET环境中创建丰富交互式Web应用的能力。通过将Ext JS的功能集成到.NET控件中,开发人员可以利用.NET的强大后端...

    EXT酒店管理实例EXT酒店管理实例

    EXT JS提供了一系列预先封装好的UI组件,如表格、面板、表单、树形视图等,这些组件具有高度可定制性,可以满足各种复杂的界面设计需求。通过EXT JS,开发者能够轻松构建出响应式和适应不同屏幕尺寸的Web应用。 在...

    ext树形动态菜单 .doc

    `Ext.tree.TreePanel` 是一个功能强大的树形菜单控件,支持自动滚动、动画效果、拖放等功能,并可以通过配置参数进行高度定制。 - **参数详解**: - `autoScroll`: 设置为 `true` 表示当内容超出容器时自动显示...

    Ext3.3.1正式版(官方版)+文档+例子+包1

    Ext JS是一个用于构建Web应用程序的前端框架,它提供了一系列预先封装的UI组件,如表格、树形视图、菜单、表单等,这些组件可以方便地组合起来创建出功能强大的应用界面。其核心特性包括: 1. **组件化**:Ext JS的...

    ext 结合 asp.net 实例

    EXT.NET 是一个强大的JavaScript库,它为ASP.NET开发者提供了一种构建富客户端应用程序的方法。它结合了EXT JS的用户界面组件和ASP.NET的服务器端功能,使得开发人员可以在Web应用程序中创建复杂的、交互性强的用户...

    ext中播放声音

    在EXTJS这个强大的JavaScript框架中,实现音频播放功能是一项常见的需求。EXTJS提供了一种灵活的方式,通过结合HTML5的Audio API,可以在Web应用中轻松地播放、控制声音。本篇将详细介绍如何在EXTJS中播放声音,并...

    Ext.Net1.0(Examples)RC2实例

    这个库主要针对Ext JS进行封装,为.NET开发者提供了一套完整的控件集和API,使得在ASP.NET环境中使用Ext JS的功能变得简单。RC2是Release Candidate 2的简称,表示这是一个接近正式版的测试版本,相较于RC1,它可能...

    EXT中文手册,ext开发帮手

    EXT是一个强大的前端开发框架,它提供了大量的预定义组件,如表格、表单、菜单、树形视图等,这些组件具有高度可定制性和灵活性。EXT的核心是基于ExtJS,一个由Sencha公司维护的开源项目。EXT不仅提供了一套完整的UI...

    用ext写的前台源码 有说明文档

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件库,可以轻松创建数据驱动、交互式的用户界面。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于在...

    Ext简介及应用案例 ppt

    Ext是一个强大的JavaScript库,特别设计用于构建富互联网应用程序(RIA)。它基于Ajax技术,提供丰富的用户界面组件和高度可定制的界面元素。Ext的核心特点包括遵循W3C标准,拥有庞大的组件模型,允许开发者创建复杂...

Global site tag (gtag.js) - Google Analytics