ext 4.0 学习笔记（2）Tree Grid

最新推荐文章于 2024-03-08 18:59:28 发布
最新推荐文章于 2024-03-08 18:59:28 发布
阅读量2.4k 收藏 2
点赞数 1
文章标签： tree ext user firefox safari chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li988761048007/article/details/6828836
版权

 今天学习的是：Array Grid，效果如下：

字体大小扭扭曲曲，是IE8自身的问题，google浏览器显示正常

 

HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>
            TreeGrid Example
        </title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <!--<script type="text/javascript" src="../../bootstrap.js"></script>-->
        <script src="../../ext-all.js" type="text/javascript"></script>
        <script type="text/javascript" src="treegrid.js"></script>
        <style type="text/css">
            .task {
                background-image: url(../shared/icons/fam/cog.gif) !important;
            }
            .task-folder {
                background-image: url(../shared/icons/fam/folder_go.gif) !important;
            }
        </style>
    </head>
    <body>
        <div id="tree-example"></div>
    </body>
</html>


注意编码方式使用gb2312

讲解代码前，首先先讲解一些类之间的关系（以后会抽出专门的一次笔记来讲述EXT对象之间的关系），

Ext.data.Model 数据模型类

Ext.data.TreeStore树形的数据源

Ext.tree.Panel树形结构的数据板块

 

Ext.tree.Panel是一个树形结构的数据板块，需要获取store作为数据源，所以需要定义一个Ext.data.Store作为数据源，但是这里需要使用到树形结构，所以我们需要使用Ext.data.Store的子类Ext.data.TreeStore，而Ext.data.TreeStore也仅仅是一种数据源，如果没有按照Ext.tree.Panel能够识别的方式进行构造，Ext.tree.Panel便无法识别数据源，所以在获取Ext.data.TreeStore时，需要按照Ext.data.Model进行规律性的填充。而Ext.data.Model要和Ext.tree.Panel的数据格式相互一致。

 

用类比的方式讲解可能会更清晰一些， Ext.tree.Panel比作一张表，Ext.data.Model则是一句insert SQL语句，而Ext.data.TreeStore是原始的，散列的数据。

这样相信能很清晰的看清楚其中的关系吧？

 

下面贴出带注释的代码：

tree.js

//引用需要包含的类
Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*'
]);

Ext.onReady(function() {
    //we want to setup a model and store instead of using dataUrl
    //译文：我们打算安装一个数据模型和数据源来取代dataUrl

    //定义一个名为Task的Ext.data.Model类，是一种模型结构，有三列，分别是task、user、duration
    Ext.define('Task', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'task',     type: 'string'},
            {name: 'user',     type: 'string'},
            { name: 'duration', type: 'string' }
        ]
    });

    //创建一个树形结构的数据源，并按照Task的模型进行填充
    var store = Ext.create('Ext.data.TreeStore', {
        //填充的数据模型对象
        model: 'Task',
        //数据访问对象
        proxy: {
            //填充方式
            type: 'ajax',
            //the store will get the content from the .json file
            //译文：数据源将会从.json文件中获取数据
            //获取数据源的相对路径，这里就体现出jsp中servlet的优势所在了，直接填写拦截路径就OK
            url: 'treegrid.json'
        },
        folderSort: true
    });

    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
    //译文：Ext.ux.tree.TreeGrid不是一个较长的Ux，你可以简单地使用一个tree.TreePanel
    var tree = Ext.create('Ext.tree.Panel', {
        title: '树形结构标题',
        width: 500,
        height: 300,
        //这里指定HTML标签body里面填充这个Ext.tree.Panel
        //renderTo: Ext.getBody(),
        //这里指定HTML标签使用了ID为tree-example填充这个Ext.tree.Panel
        renderTo: 'tree-example',
        //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
        collapsible: true,
        //是否使用vista默认的树形结构箭头
        useArrows: true,
        //是否隐藏根节点，默认为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: '文档结构',
            flex: 2,
            sortable: true,
            dataIndex: 'task'
        },{
            //we must use the templateheader component so we can use a custom tpl
            xtype: 'templatecolumn',
            text: '持续时间',
            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: '分配至',
            flex: 1,
            dataIndex: 'user',
            sortable: true
        }]
    });
});


tree.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'
            },{
                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'
            },{
                task: 'Fix lights',
                duration: .75,
                user: 'Tommy Maintz',
                leaf: true,
                iconCls: 'task'
            }, {
                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
            }]
        }]
    }
]}


 

li988761048007
关注
[Ext JS]3.8 树状表格TreeGrid
oscar999的专栏
06-15 617
Ext JS 树状表格TreeGrid
ext 4.0 学习笔记.doc
02-02
EXT 4.0 是一款流行的JavaScript库，专门用于构建富...EXT 4.0提供了丰富的API文档，允许开发者深入学习并自定义更多功能，如分页、筛选、编辑等。对于初学者来说，了解和实践这些基本概念是掌握EXT 4.0的第一步。
ExtJS 3.0 之ColumnTree添加记录
jlcon的专栏
11-12 121
有个项目用到Extjs的ColumnTree组件，按照例子展示没有问题，可是添加却遇到了麻烦，因为想在不刷新整棵树的前提下添加节点。摸索了很久终于解决了问题，现在贴上来给大家共享。 此例中columntree假设包含4个属性需要展示，分别是：'urlCode','remark','snCode','funname'。   var selectedNode = treepanel.getSel...
vue-table-with-tree-grid-树形表格组件
gaogzhen的博客
08-18 1万+
vue-table-with-tree-grid-树形表格组件 目录 文章目录1、简介2、详解2.1、table 常用属性2.2、columns 配置3、示例***后记*** ： 内容 1、简介 应用场景：需要展示表格数据，表格数据中有分级或者树形结构的数据。 效果图示1-1： 官方地址：https://github.com/MisterTaki/vue-table-with-tree-grid,有详细使用示例。 2、详解 2.1、table 常用属性 属性名 类型 参数 默认 描述
【组件推荐&改造】vue实现的tree grid 树形表格
lvdou1120101985的博客
10-01 2001
因业务需要，我需要一个树形表格，类似这样的： 然而iview中的table是这样的： 其实，准确的来说，iview中的表格并不是树形表格，只是用于展开显示每一行的更多信息； 在网上找了一圈，发现有位大佬用vue封装的iview风格的树形表格（vue-table-with-tree-grid），在此基础上我又进行了一些调整和优化： 1. 增加节点图标； 2. 可以自定义展开的节点；...
树形表格组件vue-table-with-tree-grid的使用
m0_53912016的博客
01-05 640
树形表格组件vue-table-with-tree-grid的使用
Ext4.0分页的Grid例子
06-27
后台使用的是struts2生成Ext所需要的json，把webroot下的ext4下面加入ext的开发包，然后再把create.sql中的脚本在数据库中执行，代码就可以跑起来了，我用的是mysql数据库
EXT4.0读书笔记
11-25
EXT4.0读书笔记
Ext.Net学习笔记之button小结
01-02
1.触发客户端事件 代码如下:<ext ID=”Button1″ runat=”server” Text=”快点我”>　<Listeners>　”Greet()”></Click>　</Listeners></ext> [removed]function Greet() {alert(“Hello World!”);}...
Ext4.0学习总结及功能详解
03-11
Ext4.0学习总结及功能详解。描述ext各种控件用法，布局等。
TreeGrid树状结构
11-02
Jquery的TreeGrid组件，实现数据一树状图的形式显示，便于查看父子节点
treeGrid 树形表格修改版
08-31
益于 layui 良好的设计，可以顺利扩展 treeGrid 插件。支持树状表格、支持折叠记忆功能、支持动态新增行、支持动态删除行、支持行内过滤，支持方法式打开或折叠任意节点等等。内部对原来table的渲染方法进行了拆分，以便更精准控制table的行为。
TreeGrid树状表格
05-28
此插件为树形状表格，可对树形结构的data及其附加属性在表格中动态展示和折叠
treeGrid、树形表格
01-09
treegrid插件 当前选中的行： var config = { id: "tg1", width: "800", renderTo: "div1", headerAlign: "left", headerHeight: "30", dataAlign: "left", indentation: "20", folderOpenIcon: "images/folderOpen.gif", folderCloseIcon: "images/folderClose.gif", defaultLeafIcon: "images/defaultLeaf.gif", hoverRowBackground: "false", folderColumnIndex: "1", itemClick: "itemClickEvent", columns:[ {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"}, {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"}, {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"} ], data:[ {name: "城区分公司", code: "CQ", assignee: "", children:[ {name: "城区卡品分销中心"}, {name: "先锋服务厅", children:[ {name: "chlid1"}, {name: "chlid2"}, {name: "chlid3", children: [ {name: "chlid3-1"}, {name: "chlid3-2"}, {name: "chlid3-3"}, {name: "chlid3-4"} ]} ]}, {name: "半环服务厅"} ]}, {name: "清新分公司", code: "QX", assignee: "", children:[]}, {name: "英德分公司", code: "YD", assignee: "", children:[]}, {name: "佛冈分公司", code: "FG", assignee: "", children:[]} ] }; /* 单击数据行后触发该事件 id：行的id index：行的索引。 data：json格式的行数据对象。 */ function itemClickEvent(id, index, data){ window.location.href="ads"; } /* 通过指定的方法来自定义栏数据 */ function customCheckBox(row, col){ return ""; } function customOrgName(row, col){ var name = row[col.dataField] || ""; return name; } function customLook(row, col){ return "查看"; } //创建一个组件对象 var treeGrid = new TreeGrid(config); treeGrid.show(); /* 展开、关闭所有节点。 isOpen=Y表示展开，isOpen=N表示关闭 */ function expandAll(isOpen){ treeGrid.expandAll(isOpen); } /* 取得当前选中的行，方法返回TreeGridItem对象 */ function selectedItem(){ var treeGridItem = treeGrid.getSelectedItem(); if(treeGridItem!=null){ //获取数据行属性值 //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name); //获取父数据行 var parent = treeGridItem.getParent(); if(parent!=null){ //jQuery("#currentRow").val(parent.data.name); } //获取子数据行集 var children = treeGridItem.getChildren(); if(children!=null && children.length>0){ jQuery("#currentRow").val(children[0].data.name); } } }
ext tree grid 的高级实例运用
11-02
本实例展示了ext中的tree的拖拉，节点信息的展示，增删修改，和练级选择，一次可以选择父节点和子节点。
bootstrap-table（一）树状表（tree-grid）
热门推荐
天空影
04-09 3万+
因为项目有一个接口是多级组织架构的，所以需求是使用树状图表展示，然后表格控件用的bootstrap-table，通过官网的扩展地址找到了tree-grid 这个功能。 扩展地址：bootstrap-table扩展 建议经常使用这个控件的人fork 使用方法官网有，但是我这里还是贴一下，有一点提示大家：关系id 和 pid 是number数据类型，如果后台给的是string类型，记得转换一下，不...
在vue项目中使用element-tree-grid（表格树）
Queen-Shir的博客
06-18 4505
Git Demo 网址 ：https://github.com/ProsperLee/element-tree-grid 相关技术贴：https://www.lagou.com/lgeduarticle/41612.html 一、使用方法： 1、通过npm安装element-tree-grid npm install element-tree-grid --save 2、在main.js中注册element-tree-grid var ElTreeGrid = require('el..
jstree-grid - 创建可扩展的动态树形网格
最新发布
gitblog_00004的博客
03-08 398
jstree-grid - 创建可扩展的动态树形网格 jstree-gridGrid plugin for jstree项目地址:https://gitcode.com/gh_mirrors/js/jstree-grid 是一个轻量级的 JavaScript 库，用于将 jstree 树形结构转换为可排序、可搜索、可调整大小的表格。借助此库，你可以轻松地在网站中实现数据可视化并提高用户体验。 什...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值