TreePanel

最新推荐文章于 2023-03-20 16:52:51 发布
最新推荐文章于 2023-03-20 16:52:51 发布
阅读量102 收藏
点赞数

文档一（recorder.html）：

文档二（recorder.js）：

文档三（get-nodes.ashx）：

文档四（get-nodes.txt）：返回根节点下的一级树

文档五（get-subnodes.txt）：返回子节点下的一级树

 

文档一（recorder.html）：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Reorder TreePaneltitle>

<link rel="stylesheet" type="text/css" href="../ext-2.0/resources/css/ext-all.css" />

 

    <link href="../ext-2.0/resources/css/xtheme-gray.css" rel="stylesheet" type="text/css" />

     <script type="text/javascript" src="../ext-2.0/adapter/ext/ext-base.js">script>

     <!-- ENDLIBS --&gt

 

    <script type="text/javascript" src="../ext-2.0/ext-all.js">script>

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

 

<!-- Common Styles for the examples --&gt

head>

<body>

 

<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;">div>

 

body>

html>

 

文档二（recorder.js）：

/*

 * Ext JS Library 2.0.2

 * Copyright(c) 2006-2008, Ext JS, LLC.

 * licensing@extjs.com

 *

 * http://extjs.com/license

 */

Ext.SSL_SECURE_URL="/ext-2.0/resources/images/default/s.gif";
Ext.BLANK_IMAGE_URL="/ext-2.0/resources/images/default/s.gif";

Ext.onReady(function(){

    // shorthand

    var Tree = Ext.tree;

   

    var tree = new Tree.TreePanel({

        el:'tree-div',

        useArrows:true,

        autoScroll:true,

        animate:true,

        enableDD:true,

        containerScroll: true,

        loader: new Tree.TreeLoader({

            dataUrl:'get-nodes.ashx'

        })

    });0

 

    // set the root node

    var root = new Tree.AsyncTreeNode({

        text: '系统管理员',

        draggable:false,

        id:'source'

    });

    tree.setRootNode(root);

 

    // render the tree

    tree.render();

    root.expand();

});

 

文档三（get-nodes.ashx）：

@ WebHandler Language="C#" Class="Login" %>

 

using System;

using System.Web;

 

public class Login : IHttpHandler

{

 

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        /*

         * treePanel 中具有子节点的node被单击时会向dataUrl发送请求，格式如下：

         * Method:POST

         * POSTDATA:node=source（返回根节点下的一级树）

         *          node=nodeid（返回nodeid节点下的一级树）

         */

        string postNode = context.Request.Form["node"];

        if (!string.IsNullOrEmpty(postNode))

            if (postNode == "source")

                context.Response.WriteFile(

                    context.Request.MapPath("get-nodes.txt")

                );

            else

                context.Response.WriteFile(

                    context.Request.MapPath("get-subnodes.txt")

            );

 

    }

 

    public bool IsReusable

    {

        get

        {

            return false;

        }

    }

 

}

 

文档四（get-nodes.txt）：返回根节点下的一级树

[{

     "text":"管理部",

     "id":"\/sext-core.js",

     "leaf":true,

     "cls":"file"

},{

     "text":"质量管理部",

     "id":"\/sext-all-debug.js",

     "leaf":true,

     "cls":"file"

},{

     "text":"产品部",

     "id":"\/sext-core-debug.js",

     "leaf":true,

     "cls":"file"

},{

     "text":"厂务部",

     "id":"\/sresources",

     "cls":"folder"

}]

 

文档五（get-subnodes.txt）：返回子节点下的一级树

[{

     "text":"秘书",

     "id":"\/ssext-core.js",

     "leaf":true,

     "cls":"file"

},{

     "text":"职员",

     "id":"\/ssext-all-debug.js",

     "leaf":true,

     "cls":"file"

},{

     "text":"文员",

     "id":"\/ssext-core-debug.js",

     "leaf":true,

     "cls":"file"

}]

 

 

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/12685933/viewspace-200319/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/12685933/viewspace-200319/

cuanlun3691
关注
Ext.JS——treepanel
小小白
09-01 421
xxx
extjs4 treepanel动态改变行高度示例
10-26
在本文中，我们将探讨ExtJS 4框架中的TreePanel组件如何动态地改变行高。TreePanel是ExtJS中用于展示树形结构数据的组件，它通常用于显示文件系统结构、组织架构等层次化数据。动态改变行高是提高用户界面友好性和...
extjs treepanel java_extjs中treepanel属性和方法
weixin_35710005的博客
02-13 297
1、Ext.tree.TreePanel主要配置项：root：树的根节点。rootVisible：是否显示根节点，默认为true。useArrows：是否在树中使用Vista样式箭头，默认为false。lines：是否显示树线，默认为true。loader：树节点的加载器，默认为Ext.tree.TreeLoader。selModel：树的选择模式，默认为Ext.tree.DefaultSelec...
extjs中treepanel属性和方法
weixin_44500762的博客
03-20 512
树控件由Ext.tree.TreePanel类定义，TreePanel类继承自Panel面板。TreePanel是ExtJS中最多能的组件之一，它非常适合用于展示分层的数据。树的使用是很频繁的，对树节点的各种操作已经和数据库的互动操作，这些都是需要掌握的。
ExtJs之treePanel实例
idomyway的博客
11-25 499
需求treePanel适合做系统中的多级目录树（没有从后台加载数据）效果图代码Ext.define('dxgx.gxInfoTreePanel',{ extend: "Ext.tree.Panel", xtype: "nav", id: "nav", initComponent: function() { //导航菜单Store var
Extjs-树 Ext.tree.TreePanel
luckypeng的专栏
05-19 1082
文章源址：http://blog.csdn.net/itlwc/article/details/7873869 1.简单的树 效果图 代码 [javascript] view plaincopy "text/javascript" defer>       Ext.onReady(function(){     
8.TreePanel
dengyiyu5280的博客
08-06 73
目录： 1.最简单的树 2.有孙子节点的树 3.事件处理 4.带链接的树 5.动态加载树 6.动态节点和静态节点混用，及树的属性和节点属性设置 7.TreeSelectionModel选择模型 8.可编辑的树 9.按指定属性进行排序 10.替换Tree中图片 一：最简单的树 Ext.onReady(function(){ //根节点 var r...
treePanel
北雁南飞
12-24 204
之前在考勤系统中使用到了菜单树的实现，由于使用了extjs的框架，所以菜单树的实现自然是用treePanel，在此记录一下用法。 [code="生成树"] //菜单 var root = new Ext.tree.AsyncTreeNode({ id: '', loader: new Ext.tree.TreeLoader({ url: 'WEBFo...
treepanel
朱智文的专栏
12-05 397
@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPor
ext.net TreePanel 无刷新增删改操作
dizui7858的博客
10-01 225
最近做项目时遇到了TreePanel的无刷新问题。模块的要求是在为某个节点增加子节点的时候，要无刷新的添加进去，并保持此节点的展开状态。删除以及修改操作也一样。 我的处理方法是：在点击相关按钮后，比如点击添加按钮，先执行ajax方法在后台把信息添加至数据库，然后在前端判断方法是否成功，成功的话用js在树中添加相应节点。 废话不多说了，直接把代码奉献给大家 一：前端代码如下： &l...
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
12-02
在EXTJS中，TreePanel是一种常用的组件，用于展示层次结构的数据，通常用于构建树形结构的界面。在本文中，我们将深入探讨如何处理TreePanel与CheckBox的交互，特别是在全选和清空选中状态的问题上。 首先，让我们...
关于extjs treepanel复选框选中父节点与子节点的问题
12-02
在EXTJS中，TreePanel是一种常用的组件，用于展示层次结构的数据，例如文件系统或组织结构。在本例中，我们关注的是如何实现一个带有复选框的TreePanel，以便在选中父节点时自动选中所有子节点，而只有当所有子节点...
treePanel与gridPanel技术实现页面的增删改查
03-18
在本文中，我们将深入探讨`treePanel`和`gridPanel`技术在页面上实现数据的增删改查功能。这两个组件是Ext JS框架中的核心组件，广泛用于构建数据驱动的用户界面。`treePanel`主要用于展示层级结构的数据，如文件...
extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据
04-16
在EXTJS这个强大的JavaScript框架中，`Ext.Panel`和`TreePanel`是两个非常重要的组件，它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据...
基于Matlab面板版的卡尔曼小球运动跟踪[Matlab面板版].zip
10-16
大模型实战教程
Day01(1).py
10-16
Day01(1).py
面试-PHP高频面试题整理-面试题合集.zip
10-16
面试_PHP高频面试题整理_面试题合集
(最新整理)中国企业OFDI微观数据2005-2022年
最新发布
10-16
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/142994315 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理
ExtJS TreePanel详解与主要方法
"关于EXTJS TreePanel及其核心组件的详解" EXTJS TreePanel 是EXTJS库中用于构建树形结构视图的重要组件。它允许开发者创建交互式的、可扩展的树形数据结构，常用于展现层级关系的数据。下面将详细介绍TreePanel的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值