Ext4.2学习之TreeGrid树形表格

最新推荐文章于 2024-05-30 17:43:11 发布
最新推荐文章于 2024-05-30 17:43:11 发布
阅读量427 收藏
点赞数
分类专栏： extjs 文章标签： js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37607945/article/details/115004416
版权

树形表格（TreeGrid）同时具备树形的分级结构和表格的丰富内容。通过创建一个Ext.tree.Panel对象就可以了。但是需要注意在数据当中包含两个重要的属性：children和expanded，前者实现上下级关系，而后者指定默认是否展开。

在这里插入图片描述

在这里插入图片描述
结果如下
在这里插入图片描述

完整源码

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
    <script>
        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'},
                    {name: 'done',     type: 'boolean'}
                ]
            });

            var store = Ext.create('Ext.data.TreeStore', {
                model: 'Task',
                proxy: {
                    type: 'ajax',
                    //the store will get the content from the .json file
                    url: 'treegrid.json'
                },
                folderSort: true
            });

            //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
            var tree = Ext.create('Ext.tree.Panel', {
                title: 'Core Team Projects',
                width: 500,
                height: 300,
                renderTo: 'grid',
                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: 'icons/edit_task.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>
<div id="grid"></div>
</body>
</html>

对应的treegrid.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
            }]
        }]
    }
]}
lang20150928
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ExtJs之结构树 Ext.tree.panel详细用法
idomyway的博客
12-10 1万+
1.简单的树 效果图 代码 [javascript] view plain copy print? "text/javascript" defer>      Ext.onReady(function(){          Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';    
Extjs4之TreePanel、TreeGrid
diweikang的博客
11-13 3533
Tree介绍 树形结构，是程序开发，不可缺少的组件之一。ExtJs中的树，功能强大美观实用。功能齐全，拖拉，排序，异步加载等等。 在ExtJs4中Tree和Grid具有相同的父类，因此Grid具有的特性和插件在Tree上也能用。 简单的Tree    代码： Ext.onReady(function () {
EasyUI TreeGrid 在Django中的使用，构建树形表格
最新发布
qq_44714317的博客
05-30 387
仿照官网给出的数据格式，我们传到前端数据也需要进行格式转换。由于我们在Python后端中常用的数据结构为列表或字典，下面我以列表为源数据进行转换为例。2、一条数据不能对应多条父级，因此要注意每条数据的id最好是唯一的。（这里有些业务场景可能会需要这个功能，后续找到合适的处理方式再来完善）按照官网给的前端源代码，按照JSS和CSS文件路径在官网下载的文件夹中找到对应的资源放到自己的代码中去。首先去EasyUI官网下载免费版，拿到框架基础JS及CSS文件。1、必须要有根节点，且根节点的父节点处应为空。
EXTJS实现的TREEGRID（后台java,框架SpringMVC）
hwak的专栏
10-11 231
一。一些废话 近日来，有几个项目用到了EXTJS作为Web前端。也看到了一些童鞋苦苦在网上寻觅树形列表控件，碰巧项目中用到了一种，现在给大家分享一下。 二。前端       前端代码，用的是JS。主要就是指定数据读取地址，然后定义列表表头。这里实例化TreeGrid对象 // function loadGrid(json) 方法中的内容，由第三个代码片段，取得表头方法调用 // 等号...
【EasyUI】基本树形表格TreeGrid踩坑指南
習習君的博客
05-04 2916
最近做公司的一个ssh项目，web层用的是easyui和freemarker写的。最近做一个行政区划树形组件，遇到了许多坑，在此记录一下。其中包含：获取当前树组件层级、树组件的属性、树组件的事件和方法等等。
WPF TreeGrid树形表格
05-06
**WPF TreeGrid树形表格详解** 在Windows Presentation Foundation (WPF)中，TreeGrid是一种特殊的数据控件，它结合了树形结构和表格的功能，允许用户以分层的方式显示数据，同时每层数据还可以像普通的GridView...
bootstrap-table+treegrid实现树形表格
10-16
ue":"open:system:manage"},{"id":3,"pid":1,"status":1,"name":"用户添加","permissionValue":"open:user:add"},{"id":4,"pid":1,"status":1,"name":"用户修改","permissionValue":"open:user:edit"},{"id":5,"pid...
jquery-treegrid 树形表格组件
12-25
jQuery TreeGrid 是一款强大的树形表格组件，适用于需要展示层次化数据的场景。通过合理的配置和扩展，它可以为你的Web应用提供灵活、高效的表格管理功能。记得保持对组件的维护和更新，以便充分利用其新特性并避免...
treeGrid 树形表格修改版
08-31
益于 layui 良好的设计，可以顺利扩展 treeGrid 插件。支持树状表格、支持折叠记忆功能、支持动态新增行、支持动态删除行、支持行内过滤，支持方法式打开或折叠任意节点等等。内部对原来table的渲染方法进行了拆分，...
ExtJS4.2学习(15)树形表格
weixin_34168880的博客
12-28 213
本节为ExtJS表格学习的最后一节，学完我将学习表单与输入控件的内容。树形表格（TreeGrid）同时具备树形的分级结构和表格的丰富内容。先引入扩展组件，老规矩：//引入扩展组件 Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath('Ext.ux', '../Ext...
ExtJs树控件入门———TreePanel
yaoliyuan0922的博客
08-28 1956
ExtJs树控件，树节点保存，树节点回显效果图有两种调用方式：详解：代码：前台代码：基类：树控件：数据源后台代码：接口方法：将leaf，checked属性打入原始数据的方法：将数据整理成树结构：附上一些工作中踩过的坑： 本文将为您详细讲解ExtJs树控件的使用，如有不足之处，欢迎您指正，我的QQ：1113905744， 文章中用到的所有代码将在文末附上！ 效果图有两种 带复选框与不带复选框的树，在...
Ext JS 学习(12) Ext.TreePanel的使用 第一式
lvjian700的博客
11-01 2350
今天开始,我们就开始一起学习TreePanel了，道个歉，上篇的代码很乱阿.我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰!TreePanel是继承自Panel,所以很多在Panel中谈到的属性这里可能会一笔带过,如有问题,请参考ExtJs2.0学习系列(2)--Ext.Panel 1.第一个静态树--最简单的树效果图:html代码:Code highligh
树形表格TreeGrid
梦想起飞的地方.........
04-16 1417
树形表格TreeGrid 展开 1.效果截图 2.数据结构 [{"mcode":"UI","mname":"页面开发模板","micon":"glyphicon glyphicon-th","murl":"","explains":"开发页面的常用组件和页面","parent":null,"sort":4, "children":[ {"mcode":"Css...
extjs中treepanel属性和方法
weixin_44500762的博客
03-20 418
树控件由Ext.tree.TreePanel类定义，TreePanel类继承自Panel面板。TreePanel是ExtJS中最多能的组件之一，它非常适合用于展示分层的数据。树的使用是很频繁的，对树节点的各种操作已经和数据库的互动操作，这些都是需要掌握的。
Ext树形结构——TreePanel
Donny的专栏
12-26 599
创建一个树 树控件由Ext.tree.TreePanel类定义，控件名称为treepanel，继承自Panel面板。 要实现一棵树也很简单： 1.创建一个TreePanel 2.为TreePanel设置一个根结点（RootNode） 3.添加子节点（TreeNode）到根几点。 示例： Ext.BLANK_IMAGE_URL = '../../resources/images/de...
ExtJS TreeGrid的用法
云原生之家
10-19 8660
如果您是第一次使用ExtJS的TreeGrid的话，我相信总会有一些小麻烦的，下面就来说一说ExtJS中TreeGrid的使用。 本人使用的ExtJS版本为4.0.7，并且使用了MVC模式，如果不了解ExtJS的MVC模式的话我个觉得还是有必要去学学的， 学完后你肯定会喜欢上的。 其实在ExtJS中并没有TreeGrid这么一个类，这个说法是从EasyUI中借用过来的，ExtJS中的Tree
[Ext JS]3.8 树状表格TreeGrid
oscar999的专栏
06-15 596
Ext JS 树状表格TreeGrid
ext中引用ux_ExtJs 中的TreeGrid(Ext.ux.maximgb.tg.EditorGridPanel详解与其他问题解决办法)...
weixin_29164497的博客
02-01 294
Ext.ux.maximgb.tg这个包的作用是 对有树型表格的需求有很大的帮助，相信有许多人都有用过，也常常遇到过许多问题，本人在使用时也同样遇到过许多问题，经过痛苦的煎熬后，终于有点小见解，特在此留下纪录，以备在以后的Extjs开发项目中有这方面的需求。网上其实这方面的讲解其实很少，不是说很少，而是转载的都是基本是同一篇相关文章，对此我也比较郁闷，不是说不能转载，只是转载的文章如果本来就有问题...
wpf treegrid树形表格
12-07
WPF TreeGrid是一种用于显示树形结构数据的...总之，WPF TreeGrid作为一种强大的树形表格控件，为用户提供了丰富的功能和灵活的定制能力，能够方便、高效地展示和管理树形数据，是WPF平台上不可或缺的重要控件之一。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lang20150928

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值