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

zhangdaiping

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

最近访客更多访客>>

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
浏览 12938
评论(37)
论坛回复 / 浏览 (28 / 14579)
分类: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 ext可编辑的treegridpanel: ext可编辑的treegridpanel

ext的edittreegrid实现: Tree与EditorGrid结合在一起，树形的展示结构，可以对其中的数据进行编辑，类似RowEditor.

Rain Water Algorithm雨水优化算法附matlab代码.zip: 1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

基于springboot+vue的房屋租赁出售系统: 提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。适用人群：这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。使用场景及目标：在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。其他说明：为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。

杭电-[数据结构(c语言版)]复习题纲杭州电子科技大学.pdf: 杭州电子科技大学，期末考试资料，计算机专业期末考试试卷，试卷及答案，数据结构。

年医院医生个人工作总结.docx: 工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。

阿里巴巴笔试题目.docx: 校园招聘笔试题目及答案

顺从宗族联动机器人matlab代码.zip: 1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

基于Python的图像阴影检测与去除源码（高分期末大作业项目）.zip: 基于Python的图像阴影检测与去除源码（高分期末大作业项目）.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。基于Python的图像阴影检测与去除源码（高分期末大作业项目）.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。基于Python的图像阴影检测与去除源码（高分期末大作业项目）.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。基于Python的图像阴影检测与去除源码（高分期末大作业项目）.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。基于Python的图像阴影检测与去除源码（高分期末大作业项目）.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。基于Python的图像阴影检

Android阅读器源码: Android阅读器源码是用于在Android平台上开发电子书阅读器应用的源代码。阅读器可以支持多种电子书格式，如EPUB、PDF、TXT等，并提供诸如翻页、搜索、书签、夜间模式等功能。

该项目包含为与用户合作的微电网能源管理系统的多目标优化而开发的matlab代码.zip: 1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

人力资源数据分析看版.xlsx: Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示

MS15-058 SQL Server 2008 R2 Service Pack 3 补丁包: MS15-058 SQL Server 2008 R2 Service Pack 3 SQLServer2008R2-KB3045314-x64 不太好找，找到了，就分享一下吧

基于LabView+MATLAB的说话人识别系统.zip: labview 与 C 和BASIC 一样，LabVIEW [2]也是通用的编程系统，有一个完成任何编程任务的庞大函数库。LabVIEW [3]的函数库包括数据采集、GPIB、串口控制、数据分析、数据显示及数据存储，等等。LabVIEW [3]也有传统的程序调试工具，如设置断点、以动画方式显示数据及其子程序（子VI）的结果、单步执行等等，便于程序的调试。 LabVIEW [2]（Laboratory Virtual Instrument Engineering Workbench）是一种用图标代替文本行创建应用程序的图形化编程语言。传统文本编程语言根据语句和指令的先后顺序决定程序执行顺序，而 LabVIEW 则采用数据流编程方式，程序框图中节点之间的数据流向决定了VI及函数的执行顺序。VI指虚拟仪器，是 LabVIEW 的程序模块。 LabVIEW [2] 提供很多外观与传统仪器（如示波器、万用表）类似的控件，可用来方便地创建用户界面。用户界面在 LabVIEW 中被称为前面板。使用图标和连线，可以通过编程对前面板上的对象进行控制。这就是图形化源代码，又称G代码。

JavaSE技术题Java开发过程中的面试: JavaSE技术题Java开发过程中的面试

Python实现基于深度学习的预测区域电力负荷模型源码+项目说明（高分项目）.zip: Python实现基于深度学习的预测区域电力负荷模型源码+项目说明.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。 Python实现基于深度学习的预测区域电力负荷模型源码+项目说明.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。 Python实现基于深度学习的预测区域电力负荷模型源码+项目说明.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。 Python实现基于深度学习的预测区域电力负荷模型源码+项目说明.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。 Python实现基于深度学习的预测区域电力负荷模型源码+项目说明.zip已获导师指导并通过的97分的高分期末大作业设计项目，可作为课程设计和期末大作业，下载即用无需修改，项目完整确保可以运行。 Python实现基于

会创意年会策划.docx: 年会班会资料，节目策划，游戏策划，策划案，策划方案，活动方案，筹办，公司年会，开场白，主持人，策划主题，主持词，小游戏。

基于物联网MQTT协议的智能停车场管理系统: 基于物联网MQTT协议的智能停车场管理系统本项目为Eclipse搭建的Maven Web项目前端采用BootStrap框架后端采用SSM框架主要特点： 1.管理员与用户两大功能组 2.基于Apache Apollo服务器的MQTT通信，用于实现地锁装置与管理系统的通信 3.采用第三方微信支付BufPay

com.baidu.netdisk_12.9.6.apk: com.baidu.netdisk_12.9.6.apk

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论