ExtJS4.2 树形表格

最新推荐文章于 2023-05-12 17:23:55 发布
最新推荐文章于 2023-05-12 17:23:55 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： extjs 树形图
效果图：

jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="extjs/resources/css/ext-all.css" rel="stylesheet">  
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">  
Ext.onReady(function(){  
    Ext.QuickTips.init();  
 
    //we want to setup a model and store instead of using dataUrl  
    Ext.define('Task', {  
        extend: 'Ext.data.Model',  
        fields: [ 
            {name: 'task',     type: 'string'},  
            {name: 'user',     type: 'string'},  
            {name: 'duration', type: 'string'}  
        ]  
    });  
    var store = Ext.create('Ext.data.TreeStore', {  
        model: 'Task',  
        proxy: {  
            type: 'ajax',  
            //the store will get the content from the .json file  
            url: 'grid-filter.json'  
        },  
        folderSort: true  
    });  
      
  //Ext.ux.tree.TreeGrid在UX扩展中也有，但不常用，您可以简单地使用一个tree.TreePanel  
    var tree = Ext.create('Ext.tree.Panel', {  
        title: 'Core Team Projects',  
        width: 500,  
        height: 300,  
        renderTo: 'treegrid',  
        collapsible: true,  
        useArrows: true,  
        rootVisible: false,  
        store: store,  
        multiSelect: true,  
        singleExpand: true,  
          
      //the 'columns' property is now 'headers'  
        columns: [{  
            xtype: 'treecolumn', //this is so we know which column will show the tree  
            text: 'Task',  
            flex: 2,  
            sortable: true,  
            dataIndex: 'task'  
        },{  
            //we must use the templateheader component so we can use a custom tpl  
            xtype: 'templatecolumn',  
            text: 'Duration',  
            flex: 1,  
            sortable: true,  
            dataIndex: 'duration',  
            align: 'center',  
            //add in the custom tpl for the rows  
            tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {  
                formatHours: function(v) {  
                    if (v < 1) {  
                        return Math.round(v * 60) + ' mins';  
                    } else if (Math.floor(v) !== v) {  
                        var min = v - Math.floor(v);  
                        return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';  
                    } else {  
                        return v + ' hour' + (v === 1 ? '' : 's');  
                    }  
                }  
            })  
        },{  
            text: 'Assigned To',  
            flex: 1,  
            dataIndex: 'user',  
            sortable: true  
        }, {  
            xtype: 'checkcolumn',  
            header: 'Done',  
            dataIndex: 'done',  
            width: 40,  
            stopSelection: false  
        }, {  
            text: 'Edit',  
            width: 40,  
            menuDisabled: true,  
            xtype: 'actioncolumn',  
            tooltip: 'Edit task',  
            align: 'center',  
            icon: '../MyDemo/images/edit.png',  
            handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {  
                Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));  
            }  
        }]  
    });
});  
</script>  
</head>  
<body>  
<h1>我的ExtJS4.2学习之路</h1>  
<hr />  
作者：阿杰
开始日期：2016年3月3日14:58:54  
<h2>深入浅出ExtJS之树形表格</h2>  
<div id="treegrid"></div>
</body> 

</html>

json数据：

{"text":".","children": [  
    {  
        task:'Project: Shopping',  
        duration:13.25,  
        user:'Tommy Maintz',  
        iconCls:'task-folder',  
        expanded: true,  
        children:[{  
            task:'Housewares',  
            duration:1.25,  
            user:'Tommy Maintz',  
            iconCls:'task-folder',  
            children:[{  
                task:'Kitchen supplies',  
                duration:0.25,  
                user:'Tommy Maintz',  
                leaf:true,  
                iconCls:'task'  
            },{  
                task:'Groceries',  
                duration:.4,  
                user:'Tommy Maintz',  
                leaf:true,  
                iconCls:'task',  
                done: true  
            },{  
                task:'Cleaning supplies',  
                duration:.4,  
                user:'Tommy Maintz',  
                leaf:true,  
                iconCls:'task'  
            },{  
                task: 'Office supplies',  
                duration: .2,  
                user: 'Tommy Maintz',  
                leaf: true,  
                iconCls: 'task'  
            }]  
        }, {  
            task:'Remodeling',  
            duration:12,  
            user:'Tommy Maintz',  
            iconCls:'task-folder',  
            expanded: true,  
            children:[{  
                task:'Retile kitchen',  
                duration:6.5,  
                user:'Tommy Maintz',  
                leaf:true,  
                iconCls:'task'  
            },{  
                task:'Paint bedroom',  
                duration: 2.75,  
                user:'Tommy Maintz',  
                iconCls:'task-folder',  
                children: [{  
                    task: 'Ceiling',  
                    duration: 1.25,  
                    user: 'Tommy Maintz',  
                    iconCls: 'task',  
                    leaf: true  
                }, {  
                    task: 'Walls',  
                    duration: 1.5,  
                    user: 'Tommy Maintz',  
                    iconCls: 'task',  
                    leaf: true  
                }]  
            },{  
                task:'Decorate living room',  
                duration:2.75,  
                user:'Tommy Maintz',  
                leaf:true,  
                iconCls:'task',  
                done: true  
            },{  
                task: 'Fix lights',  
                duration: .75,  
                user: 'Tommy Maintz',  
                leaf: true,  
                iconCls: 'task',  
                done: true  
            }, {  
                task: 'Reattach screen door',  
                duration: 2,  
                user: 'Tommy Maintz',  
                leaf: true,  
                iconCls: 'task'  
            }]  
        }]  
    },{  
        task:'Project: Testing',  
        duration:2,  
        user:'Core Team',  
        iconCls:'task-folder',  
        children:[{  
            task: 'Mac OSX',  
            duration: 0.75,  
            user: 'Tommy Maintz',  
            iconCls: 'task-folder',  
            children: [{  
                task: 'FireFox',  
                duration: 0.25,  
                user: 'Tommy Maintz',  
                iconCls: 'task',  
                leaf: true  
            }, {  
                task: 'Safari',  
                duration: 0.25,  
                user: 'Tommy Maintz',  
                iconCls: 'task',  
                leaf: true  
            }, {  
                task: 'Chrome',  
                duration: 0.25,  
                user: 'Tommy Maintz',  
                iconCls: 'task',  
                leaf: true  
            }]  
        },{  
            task: 'Windows',  
            duration: 3.75,  
            user: 'Darrell Meyer',  
            iconCls: 'task-folder',  
            children: [{  
                task: 'FireFox',  
                duration: 0.25,  
                user: 'Darrell Meyer',  
                iconCls: 'task',  
                leaf: true  
            }, {  
                task: 'Safari',  
                duration: 0.25,  
                user: 'Darrell Meyer',  
                iconCls: 'task',  
                leaf: true  
            }, {  
                task: 'Chrome',  
                duration: 0.25,  
                user: 'Darrell Meyer',  
                iconCls: 'task',  
                leaf: true  
            },{  
                task: 'Internet Exploder',  
                duration: 3,  
                user: 'Darrell Meyer',  
                iconCls: 'task',  
                leaf: true  
            }]  
        },{  
            task: 'Linux',  
            duration: 0.5,  
            user: 'Aaron Conran',  
            iconCls: 'task-folder',  
            children: [{  
                task: 'FireFox',  
                duration: 0.25,  
                user: 'Aaron Conran',  
                iconCls: 'task',  
                leaf: true  
            }, {  
                task: 'Chrome',  
                duration: 0.25,  
                user: 'Aaron Conran',  
                iconCls: 'task',  
                leaf: true  
            }]  
        }]  
    }  
]}

Java软件小白
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs学习笔记-1.TreePanel+TabPanel简单的树形菜单
st291223883的专栏
06-10 2300
1、wmcoreframe.jsp page contentType="text/html;charset=UTF-8" %>   DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> h
Extjs4之TreePanel、TreeGrid
diweikang的博客
11-13 3532
Tree介绍 树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。 在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。 简单的Tree    代码： Ext.onReady(function () {
ExtJs4之TreePanel
hsany330的专栏
11-09 251
Tree介绍 树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。 在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。 1.ExtJs4之Grid详细 2.ExtJs4之TreePanel 简单的Tree 代码： <head> <title></title> <link href="/ExtUI/ExtJs4..
EXTJS 4 树形表格组件使用示例
蜗牛跑的快
09-30 5193
TreeStore中使用了一个 Ext.data.NodeInterface来表示数的节点;在TreeStore的setRootNode方法中会调用NodeInterface的decorate方法向TreeStore的model增加一些属性,这些属性是在展示树时必须使用的.这些属性详见如下:
Extjs树形表格用法
qq_45324420的博客
05-12 288
extjs没有树形表格的概念，而是通过Ext.tree.Panel来实现树形表格，并且添加表格所具有的columns属性，首列使用 xtype: 'treecolumn',树形表格对应的store也应该为treeStore。如果store的数据直接从前端加载，
ExtJs4.2 下拉框树
04-26
综上所述，`ExtJs4.2 下拉框树`的实现涉及到了组件扩展、树形数据处理、界面布局和交互设计等多个方面，通过对`TreePicker.js`的修改，开发者成功地克服了原生框架的限制，提供了更符合需求的下拉树功能。
nodejs+extjs4.2+mysql
10-08
它提供了大量的组件，如表格、面板、表单、树形视图等，以及一套完整的 MVC（模型-视图-控制器）架构。在这个项目中，ExtJS 4.2 被用于构建前端用户界面，展示数据，处理用户交互，并通过 AJAX 技术与后端 Node.js ...
springMVC+Extjs4.2实现用户增删改查功能
11-03
它的组件库丰富，支持拖放、表格、表单、树形视图等多种UI元素，使得开发出的界面具有很高的交互性和美观性。在用户管理场景下，ExtJS可以用于创建表格展示用户信息，表单用于输入和编辑用户数据，以及各种按钮实现...
基于Spring+Struts2.3+ExtJS4.2的简单文件管理系统
07-31
在这个文件管理系统中，ExtJS4.2可能被用于创建用户界面，提供交互式的组件，如表格、树形结构和表单，用于展示文件列表、进行文件操作以及用户管理等。 4. **HTML5预览**：HTML5引入了一系列新特性，如File API，...
Ext JS 4.2.6.1811主题classic
02-02
2. **组件丰富**：经典主题支持大量的组件，如表格、树形视图、图表、表单、窗口、面板等，这些组件都经过精心设计，可以方便地组合成复杂的应用界面。 3. **可扩展性**：Ext JS允许开发者创建自定义主题，通过SASS...
extjs 可编辑的表格树 Ext.tree.ColumnTree Ext.tree.ColumnTreeEditor
07-20
extjs 可编辑的表格树，每个单元格自定义编辑组件，可以自适应列宽，只有源码与例子，运行实例要修改路径，不然图片不能显示，注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo ： codeme9@gmail.com
SSH Extjs treeGrid conboxTree 分页实例
12-27
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点帮助,treegrid分页也通过自己写js代码实现了,虽然功能有点简单.
ExtJS5.0 树形菜单实例
11-06
引用ExtJS5.0 实现一个树形菜单的后台管理demo
ExtJs树形结构 ext的简单应用
06-10
ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用ExtJs树形结构 ext的简单应用
EXTJS4.2数据源配置及创建注意事项
……
05-15 671
陷阱一：TreeStore 1、TreeStore在API文档中使用的是Ext.data.NodeInterface类作为Model原型，其中children属性存储的是子节点，但是在创建TreeStore时如下代码中指定了root节点不为children时，子节点数据需要存储在root节点 Ext.define('MyApp.store.MenuStore', { //
extjs4.0---- treepanel和gridpanel示例
longyi007的专栏
02-11 6295
a.jsp: Ext.onReady(function(){ var p = new MyApp.view.ui.zPanel; p.render(Ext.getBody()); }); a.js: //数据准备Grid var _rzdatas = [ {id:'12',name:'zhangsan',user
Extjs4 TreePanel实例
nuoyan666的专栏
08-02 2642
随着Extjs4第五预览版的发布，更多的实例被放了出来，本文介绍Extjs4 TreePanel的使用。此实例来自Extjs官方网站，此实例并没有限制树节点的拖放，例子中使用了TreeStore 和 AjaxProxy HTML代码：   "tree-div"
ExtJS 2使用经验（树、表格树、RadioGroup）
Hing Kwan
07-04 1981
1、 更改ExtJs2树的JSON数据格式 在ExtJs2中，要求的JSON格式为： [ {text:'01',children:[ {text:'01-01',leaf:true}, {text:'01-02',children:[ {text:'01-02-01',leaf:true}, {text:'01-02-02',leaf:true} ]},
ExtJS4.2实例：表格（Grid）含联动的下拉列表（Combobox）
最新发布
06-09
以下是一个 ExtJS4.2 实例，包含一个表格和一个带有联动下拉列表的列： ```javascript Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.form.*' ]); Ext.onReady(function() { // 创建一个简单的数据存储 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值