先给大家看看效果:

html中引入如下: <link rel="stylesheet" type="text/css" href="static/extjs/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="static/extjs/ux/treegrid.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="static/extjs/css/icon.css" /> <script type="text/javascript" src="static/extjs/js/ext-base.js"></script> <script type="text/javascript" src="static/extjs/js/ext-all.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridSorter.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridColumnResizer.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridNodeUI.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridLoader.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGridColumns.js"></script> <script type="text/javascript" src="static/extjs/ux/TreeGrid.js"></script>
<script type="text/javascript" > var data=[{ 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', 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 }] }] }]; Ext.onReady(function() { Ext.QuickTips.init(); var tree = new Ext.ux.tree.TreeGrid({ title: 'Core Team Projects', width: 500, height: 300, renderTo: Ext.getBody(), enableDD: true, columns:[{ header: 'Task', dataIndex: 'task', width: 230 },{ header: 'Duration', width: 100, dataIndex: 'duration', align: 'center', sortType: 'asFloat', tpl: new 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'); } } }) },{ header: 'Assigned To', width: 150, dataIndex: 'user' }] }); var root = new Ext.tree.TreeNode({ text: '根节点', expanded: true }); tree.setRootNode(root); var nodes = {}; nodes.children =data;/*TreeGrid的json数据[{……},{……}]*/ appendChild(root, nodes); }); function appendChild(node, o) { if (o.children != null && o.children.length > 0) { for (var a = 0; a < o.children.length; a++) { var n = new Ext.tree.TreeNode({ task:o.children[a].task, duration:o.children[a].duration, user:o.children[a].user, iconCls:o.children[a].iconCls }); node.appendChild(n); appendChild(n, o.children[a]); } } } </script>
这样就能跑起来了。我把例子传到附件了。可以直接跑
相关推荐
开发者需要定义模型(Model)来描述数据结构,并设置数据源URL或本地数据。 5. **扩展和插件**:ExtJS 4允许开发者通过扩展(Extensions)和插件(Plugins)增强TreeGrid的功能,例如,拖放排序、行编辑、分页等。 ...
1.2.3 json的例子 / 4 1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装...
qtz40塔式起重机总体及塔身有限元分析法设计().zip
Elasticsearch是一个基于Lucene的搜索服务器
资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。
美国纽约HVAC(暖通空调)数据示例,谷歌地图数据包括:时间戳、名称、类别、地址、描述、开放网站、电话号码、开放时间、更新开放时间、评论计数、评级、主图像、评论、url、纬度、经度、地点id、国家等。 在地理位置服务(LBS)中,谷歌地图数据采集尤其受到关注,因为它提供了关于各种商业实体的详尽信息,这对于消费者和企业都有极大的价值。本篇文章将详细介绍美国纽约地区的HVAC(暖通空调)系统相关数据示例,此示例数据是通过谷歌地图抓取得到的,展示了此技术在商业和消费者领域的应用潜力。 无需外网,无需任何软件抓取谷歌地图数据:wmhuoke.com
2023-04-06-项目笔记-第四百五十五阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.453局变量的作用域_453- 2025-04-01
1_实验三 扰码、卷积编码及交织.ppt
北京交通大学901软件工程导论必备知识点.pdf
内容概要:本文档总结了 MyBatis 的常见面试题,涵盖了 MyBatis 的基本概念、优缺点、适用场合、SQL 语句编写技巧、分页机制、主键生成、参数传递方式、动态 SQL、缓存机制、关联查询及接口绑定等内容。通过对这些问题的解答,帮助开发者深入理解 MyBatis 的工作原理及其在实际项目中的应用。文档不仅介绍了 MyBatis 的核心功能,还详细解释了其在不同场景下的具体实现方法,如通过 XML 或注解配置 SQL 语句、处理复杂查询、优化性能等。 适合人群:具备一定 Java 开发经验,尤其是对 MyBatis 有初步了解的研发人员,以及希望深入了解 MyBatis 框架原理和最佳实践的开发人员。 使用场景及目标:①理解 MyBatis 的核心概念和工作原理,如 SQL 映射、参数传递、结果映射等;②掌握 MyBatis 在实际项目中的应用技巧,包括 SQL 编写、分页、主键生成、关联查询等;③学习如何通过 XML 和注解配置 SQL 语句,优化 MyBatis 性能,解决实际开发中的问题。 其他说明:文档内容详尽,涵盖面广,适合用于面试准备和技术学习。建议读者在学习过程中结合实际项目进行练习,以更好地掌握 MyBatis 的使用方法和技巧。此外,文档还提供了丰富的示例代码和配置细节,帮助读者加深理解和应用。
《基于YOLOv8的智能电网设备锈蚀评估系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计
插头模具 CAD图纸.zip
资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。
《基于YOLOv8的智慧农业水肥一体化控制系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计
python爬虫;智能切换策略,反爬检测机制
台区终端电科院送检文档
e235d-main.zip
丁祖昱:疫情对中国房地产市场影响分析及未来展望
MCP快速入门实战,详细的实战教程