EditTreeGrid行编辑树列表组件（更新1.5版）

zhangdaiping

浏览: 130083 次
性别:
来自: 北京

最近访客更多访客>>

guoapeng

苏瑾流年

giky1984

curtainsky

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ext JS

EXT Ajax

最近有时间我又开发了一版新的EditTreeGrid，之前做过一版TreeGridEditor，不是很理想，最近一直在学习Ext，对Ext又有了新的认识，所以重新做一版，也算是自己这段时间的一个总结。

基于Ext 3.2.1的TreeGrid。

这个版本最大的改进就是使用了和Grid一样的RowEditor组件；由于使用了RowEditor，所以只能支持单行编辑。另外，TreeRowEditor和Grid RowEditor有点不同，当进入RowEditor状态后，其他所有按钮功能不可使用，你点击会无效。

代码体积减小了很多，将官方的TreeGird打包到一起，才30K的大小。

其次功能按钮的加载和扩展也有了很大的改进，可以随意定制，如下：

columns: [{
    header: 'Task',
    dataIndex: 'task',
    width: 230,
    editor: new Ext.form.TextField({
        allowBlank: false
    })
}, {
    // ...省略代码...
}, {
    header: '排序',
    width: 80,
    buttons: ['upgrade', 'degrade'],
    buttonIconCls: ['x-treegrid-button-upgrade', 'x-treegrid-button-degrade'],
    buttonTips: ['上移', '下移']
}, {
    header: '新增子分类',
    width: 80,
    buttons: 'add',
    buttonIconCls: 'x-treegrid-button-add',
    buttonTips: '新增'
}, {
    header: '操作',
    width: 130,
    buttons: ['update', 'remove'],
    buttonText: ['编辑', '删除']
}],

edittreegrid-1.5.rar (1.4 MB)
下载次数: 3536

分享到：

Ext.menu.ColumnMenu多列布局菜单 | DateFormat时间的汉化bug

2010-12-09 11:24
浏览 13089
评论(37)
论坛回复 / 浏览 (28 / 14779)
分类:Web前端
查看更多

37 楼 962464i 2015-05-08

麻烦问一下：edittreegrid-pkg.js这个文件是做什么的？我没有添加这个文件，貌似所有功能都可以实现呢

36 楼 blueskyxiao 2014-06-17

楼主。问下咱们这个能实现和grid一样的双击编辑功能吗？双击只有被双击的cell可编辑。
另，如何能做到统一提交啊？求指教

35 楼 namelessmyth 2014-04-17

新版本怎么使用 localData呀...求楼主发案例呀...

34 楼 wokao_wg 2013-07-23

zhangdaiping 写道

2011-6-9 更新1.5版

修正新增节点，异步加载父节点导致的BUG
增加删除树节点时，提示删除功能

楼主有个问题请看下代码：

 Ext.getCmp('tab_manage').add({
     	id: 'testPan',
	xtype: 'panel',
	closable : false,
	//autoLoad: {url:'testAction!editTree.action', scripts: true, params: {ids: '1'}},
	items:[EditTreeGrid], 用这个可以
	title: '测试'
     });
   Ext.getCmp('tab_manage').setActiveTab('testPan');

action跳转的页面：

<html>
<script type="text/javascript" src="edittreegrid.js"></script>
<body></body>
</html>

如上代码，直接添加到items里可以，但是用autoLoad加载url再跳转到目标页面，edittreeGrid不能显示出来，js错误为：TypeError: a is undefined，这应该算是个bug吧，求楼主验证

33 楼 stephansun 2012-06-29

这个版本不能支持多选框了吗？前几个版本有的，但是下载链接好像没有了。

32 楼 zhongchao444 2012-02-09

你好我运行里面的示例，怎么提示拒绝访问

31 楼 Inspiration 2012-02-02

你好，请问我想把编辑好的树结构以一种XML或JSON的方式保存起来，请问怎么弄？

30 楼 xuthus_qbxx 2011-11-25

你好!
我这近希望开发一个类似treegrid的计划管理小程序，以便管理我的员工，但我本身自己做程序不多，所以我希望把这个小程序委外给你做，不知道感兴趣吗

我的邮箱：keybeninfo@163.com qq：313134870

29 楼 friday007001 2011-10-30

楼主1.5的还支持复选框吗？怎么使用呀？

28 楼君已陌璐 2011-09-15

请问下楼主，为什么你给的例子中修改的数据无法回写到json文件中？

27 楼 xu5420878 2011-07-23

楼主，你的资料很好，现在我想研究下你的代码学习下，因为那增加节点save后如何保存到josn中的，我这块想弄下，但是那个edittreegrid-pkg.js文件打开后都只成一行了，所以没看明白。我该怎么做才能让数据保存到json中呢？

26 楼 zhangdaiping 2011-06-09

qwml6179 写道

楼主会出基于 ExtJs 4 的组件么

工作中用4的机会不多，应该不会出4的组件

其实自己对是很有兴趣，也看过很多4的例子

4的数据模型最吸引我

25 楼 zhangdaiping 2011-06-09

lengxufeng 写道

楼主您好，正在使用你的组件，感谢。有个BUG，不知是否准确：

当第一次加载数据时，根节点还没展开时，点击根节点的新增子分类，会展开节点，并自动增加一条空叶子，而不是显示编辑框。

求证，谢谢。

其实这个问题早发现了，就是没有更新。刚发了1.5版已经修复了这个BUG

24 楼 zhangdaiping 2011-06-09

2011-6-9 更新1.5版

修正新增节点，异步加载父节点导致的BUG
增加删除树节点时，提示删除功能

23 楼 lengxufeng 2011-06-02

22 楼 qwml6179 2011-05-19

楼主会出基于 ExtJs 4 的组件么

21 楼 zhangdaiping 2011-04-22

2011/4/22更新1.4版

修正一些兼容性问题

20 楼 clue 2011-04-20

zhangdaiping 写道

知道了，数据可以加载出来，再根据滚动条渲染数据。。。这个其实是可以做到的

理论上如此。。。　目前仍未见到。。。
可能接触面不广吧，没准已经有人实现过了。

19 楼 zhangdaiping 2011-04-20

clue 写道

zhangdaiping 写道

这是树，和grid的数据结构不一样，Tree本身就有延迟加载的机制

你还没理解我的意思，Ext的树是可以分层加载渲染，但单层的节点是只要展开就全部渲染。如果单层节点超过1000，性能就会低到难以忍受的程度。

Grid配置BufferView后，虽然加载还是那么多数据，但实际渲染出html的只有可见的那块，并根据滚动条位置动态更新，所以性能很高。

知道了，数据可以加载出来，再根据滚动条渲染数据。。。这个其实是可以做到的

18 楼 zhangdaiping 2011-04-20

bond88 写道

zhangdaiping 写道

bond88 写道

请教博主一个关于隐藏列的问题，如果树视图里有个隐藏列存在，显示的时候水平网格线会出现中断，光条也会中断，而且列头的隐藏列占的宽度不能消失，看起来显得很不舒服。不知道这是什么问题？

还没用过隐藏列，所以没测试过。。。

楼主有空测试下吧，我是没搞定，出现那种显示很烦。但我又怀疑会不会是我的问题，毕竟不应该有这么明显的问题却没人反应啊？（我使用系统的grid也有这样问题，列头不能完全隐藏，他的列头隐藏好像就是靠display:none或者visibility:hidden实现的）.
另外再请教下，如果不用隐藏列，想要处理返回的某列不想显示的数据，有更好的方式吗？

Store里面有值，不一定要用Column显示到页面上啊

TreeGrid也一样，attributes里有值，不一定要显示成Column

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

edittreegrid-1.5: 为了在项目中使用"edittreegrid-1.5"，你需要先引入相关的JavaScript和CSS文件，然后按照文档的指导配置Ext JS的树形网格组件，利用提供的API和事件来实现节点操作和行编辑功能。在实际应用中，通常还需要考虑与其他...

editTreeGrid ext可编辑的treegridpanel: `editTreeGrid`是EXT JS中的一个特例，它是可编辑的TreeGrid面板，提供了在树节点中直接编辑数据的能力。这种组件通常用于管理具有层次关系的数据，比如组织结构、文件系统或数据库表的层级结构。 1. **EXT JS简介*...

ext的edittreegrid实现: 在EXT JS库中，"ext的edittreegrid实现"是一种功能强大的组件，它结合了树形视图（Tree）和编辑网格（EditorGrid）的功能，允许用户在具有层次结构的数据上进行直观的编辑操作。这个组件对于那些需要管理结构化且...

kernel-devel-4.18.0-553.45.1.el8-10.x86-64.rpm: Rocky Linux 8.10内核包

Simulink中三阶单环多位量化Σ-Δ调制器的设计与实现-音频带ADC的应用（复现论文或解答问题，含详细可运行代码及解释）: 内容概要：本文档详细介绍了如何在Simulink中设计一个满足特定规格的音频带ADC（模数转换器）。首先选择了三阶单环多位量化Σ-Δ调制器作为设计方案，因为这种结构能在音频带宽内提供高噪声整形效果，并且多位量化可以降低量化噪声。接着，文档展示了具体的Simulink建模步骤，包括创建模型、添加各个组件如积分器、量化器、DAC反馈以及连接它们。此外，还进行了参数设计与计算，特别是过采样率和信噪比的估算，并引入了动态元件匹配技术来减少DAC的非线性误差。性能验证部分则通过理想和非理想的仿真实验评估了系统的稳定性和各项指标，最终证明所设计的ADC能够达到预期的技术标准。适用人群：电子工程专业学生、从事数据转换器研究或开发的技术人员。使用场景及目标：适用于希望深入了解Σ-Δ调制器的工作原理及其在音频带ADC应用中的具体实现方法的人群。目标是掌握如何利用MATLAB/Simulink工具进行复杂电路的设计与仿真。其他说明：文中提供了详细的Matlab代码片段用于指导读者完成整个设计流程，同时附带了一些辅助函数帮助分析仿真结果。

计算机课后习题.docx### 【计算机科学】研究生入学考试计算机组成原理专项题库设计：考研复习资源集成与优化: 内容概要：该题库专为研究生入学考试计算机组成原理科目设计，涵盖名校考研真题、经典教材课后习题、章节题库和模拟试题四大核心模块。名校考研真题精选多所知名高校的计算机组成原理科目及计算机联考真题，并提供详尽解析，帮助考生把握考研命题趋势与难度。经典教材课后习题包括白中英《计算机组成原理》（第5版）和唐朔飞《计算机组成原理》（第2版）的全部课后习题解答，这两部教材被众多名校列为考研指定参考书目。章节题库精选代表性考题，注重基础知识与重难点内容，帮助考生全面掌握考试大纲要求的知识点。模拟试题依据历年考研真题命题规律和热门考点，精心编制两套全真模拟试题，并附标准答案，帮助考生检验学习成果，评估应试能力。适用人群：计划参加研究生入学考试并报考计算机组成原理科目的考生，尤其是需要系统复习和强化训练的学生。使用场景及目标：①通过研读名校考研真题，考生可以准确把握考研命题趋势与难度，有效评估复习成效；②通过经典教材课后习题的练习，考生可以巩固基础知识，掌握解题技巧；③通过章节题库的系统练习，考生可以全面掌握考试大纲要求的各个知识点，为备考打下坚实基础；④通过模拟试题的测试，考生可以检验学习成果，评估应试能力，为正式考试做好充分准备。其他说明：该题库不仅提供详细的题目解析，还涵盖了计算机组成原理的各个方面，包括计算机系统概述、数据表示与运算、存储器分层、指令系统、中央处理器、总线系统和输入输出系统等。考生在使用过程中应结合理论学习与实践操作，注重理解与应用，以提高应试能力和专业知识水平。

__UNI__DB9970A__20250328141034.apk.1: __UNI__DB9970A__20250328141034.apk.1

minio-rsc-Rust资源: rust for minio

4-4-台区智能融合终端功能模块型式规范（试行）.pdf: 国网台区终端最新规范

《基于YOLOv8的化工管道焊缝缺陷检测系统》（包含源码、可视化界面、完整数据集、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

python源码-1个机器学习相关资源: 一个简单的机器学习代码示例，使用的是经典的鸢尾花（Iris）数据集，通过 Scikit-learn 库实现了一个简单的分类模型。这个代码可以帮助你入门机器学习中的分类任务。

pyqt离线包，pyqt-tools离线包: pyqt离线包，pyqt-tools离线包

《基于YOLOv8的船舶机舱灭火系统状态监测系统》（包含源码、可视化界面、完整数据集、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。

SQL常用日期和时间函数整理及使用示例: SQL常用日期和时间函数整理及在sqlserver测试示例主要包括 1.查询当前日期GETDATE 2.日期时间加减函数DATEADD 3 返回两个日期中指定的日期部分之间的差值DATEDIFF 4.日期格式转换CONVERT(VARCHAR(10),GETDATE(),120) 5.返回指定日期的年份数值 6.返回指定日期的月份数值 7.返回指定日期的天数数值

GSDML-V2.3-Turck-BL20-E-GW-EN-20160524-010300.xml: GSDML-V2.3-Turck-BL20_E_GW_EN-20160524-010300.xml

T_CPCIF 0225-2022 多聚甲醛.docx: T_CPCIF 0225-2022 多聚甲醛.docx

《基于YOLOv8的智能仓储货物堆码倾斜预警系统》（包含源码、可视化界面、完整数据集、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计.zip: 《基于YOLOv8的智能仓储货物堆码倾斜预警系统》（包含源码、可视化界面、完整数据集、部署教程）简单部署即可运行。功能完善、操作简单，适合毕设或课程设计

蚕豆脱壳机设计.zip: 蚕豆脱壳机设计.zip

附件2-2：台区智能融合终端入网专业检测单位授权委托书.docx: 台区终端电科院送检文档

Y6一39一No23.6D离心通风机 CAD().zip: Y6一39一No23.6D离心通风机 CAD().zip

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论