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

zhangdaiping

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

最近访客更多访客>>

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
浏览 13057
评论(37)
论坛回复 / 浏览 (28 / 14734)
分类: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）的功能，允许用户在具有层次结构的数据上进行直观的编辑操作。这个组件对于那些需要管理结构化且...

JEDEC SPEC 最新版合集 DDR2/DDR3/DDR4/DDR5/LPDDR2/LPDDR3/LPDDR4(X)/LPDDR5(X): JESD79-2F DDR2 JESD79-3F DDR3 JESD79-4D DDR4 JESD79-5C DDR5 JESD209-2F LPDDR2 JESD209-3C LPDDR3 JESD209-4E LPDDR4 JESD209-4-1A LPDDR4X JESD209-5C LPDDR5(X)

COMSOL二维光子晶体角态研究：单胞与超胞能带计算及边界态与角态特性分析,COMSOL二维光子晶体角态研究：单胞与超胞能带计算及边界态与角态特性分析,comsol二维光子晶体角态单胞能带，超胞能: COMSOL二维光子晶体角态研究：单胞与超胞能带计算及边界态与角态特性分析,COMSOL二维光子晶体角态研究：单胞与超胞能带计算及边界态与角态特性分析,comsol二维光子晶体角态。单胞能带，超胞能带，边界态以及角态计算。 ,comsol;二维光子晶体;角态;单胞能带;超胞能带;边界态计算,基于Comsol的二维光子晶体角态及能带边界计算研究

六自由度机械臂抓取动作仿真与代码解析：抓取动画、关节参数变化及轨迹图解详解,六自由度机械臂抓取动作仿真指南：掌握两套代码实现动画与轨迹图模拟学习攻略,六自由度机械臂抓取动作仿真-8 两套关于抓取动作的: 六自由度机械臂抓取动作仿真与代码解析：抓取动画、关节参数变化及轨迹图解详解,六自由度机械臂抓取动作仿真指南：掌握两套代码实现动画与轨迹图模拟学习攻略,六自由度机械臂抓取动作仿真-8 两套关于抓取动作的代码，包括抓取动画、关节角、角速度、角加速度的变化仿真、以及抓取轨迹图简单易懂好上手～ ,六自由度机械臂;抓取动作仿真;抓取动画;关节角变化;角速度角加速度;抓取轨迹图;两套代码;简单易懂好上手,六自由度机械臂抓取动作仿真演示：代码与轨迹图解

ITC网络广播工具软件: ITC网络广播工具软件

Multisim四位密码锁电路仿真设计：设定、开锁与声光报警功能演示资料包,Multisim四位密码锁电路仿真设计：设定、输入、开锁与报警功能详解，附源文件、原理说明书与演示视频,multisim四位: Multisim四位密码锁电路仿真设计：设定、开锁与声光报警功能演示资料包,Multisim四位密码锁电路仿真设计：设定、输入、开锁与报警功能详解，附源文件、原理说明书与演示视频,multisim四位密码锁电路仿真设计功能： 1.通过拨码开关1进行初始密码设定。 2.通过拨码开关2输入密码，实现开锁判断。 3.如果密码正确，LED绿灯亮，表示开锁。 4.如果密码不正确，LED红灯亮，蜂鸣器鸣叫，声光报警。资料包含：仿真源文件+原理说明书+演示视频 ,四位密码锁电路、Multisim仿真设计、初始密码设定;拨码开关输入;开锁判断;LED灯显示;声光报警;仿真源文件;原理说明书;演示视频,Multisim四位密码锁电路仿真设计：初始密码设置与智能解锁功能的声光报警展示

上班摸鱼打卡模拟器微信小程序源码.zip: 俗话说，摸鱼摸的好，上班没烦恼，毕竟谁能拒绝带薪拉屎呢（手动狗头）这是一个云开发职场打工人专属上班摸鱼划水微信小程序源码，没有后台直接导入微信开发者工具即可运行，UI简约大气漂亮，只需登录微信公众平台配置完合法域名即可轻松上线。用户进入摸鱼小程序，可以自由设置薪资，上班时间、下班时间、发薪日、月工作天数以提醒自己摸鱼，全民打酱油，让自己成为摸鱼冠军，《商鞅摸鱼哲学》摸鱼不是自我放纵，而是个人实力的积蓄，我们的小目标是晚睡晚起小程序中的今日待办会提醒用户带薪拉屎和闲逛，下方展示的是距离休息日的天数，距离下一次发工资的天数和节日的天数。

【毕业设计】基于Java的开发的一个集合校园二手交易、拼车、失物招领等功能的app_pgj.zip: 【毕业设计】基于Java的开发的一个集合校园二手交易、拼车、失物招领等功能的app_pgj

PICkit3离线烧录流程: 个人记录：PICkit3离线烧录流程使用软件：MPLAB X IDE v5.30 记录时间：20250215

基于Matlab代码的电力系统状态估计与实验仿真研究：扩展卡尔曼滤波和无迹卡尔曼滤波在电力系统动态状态估计中的应用及效果分析,Matlab仿真实验研究：基于扩展卡尔曼滤波器与无迹卡尔曼滤波器对电力系统: 基于Matlab代码的电力系统状态估计与实验仿真研究：扩展卡尔曼滤波和无迹卡尔曼滤波在电力系统动态状态估计中的应用及效果分析,Matlab仿真实验研究：基于扩展卡尔曼滤波器与无迹卡尔曼滤波器对电力系统状态估计的影响及验证,状态估计电力系统状态估计 Matlab代码实验仿真研究电力系统由于测量值和传输误差，还有测量噪声的影响，会对状态估计产生影响。因此，需要对嘈杂的测量进行滤波，以获得准确的电力系统运行动态。本文使用扩展卡尔曼滤波器（EKF）和无迹卡尔曼滤波器（UKF）来估计电力系统的动态状态。扩展卡尔曼滤波EKF、无迹卡尔曼滤波UKF 利用扩展的无迹卡尔曼滤波器估计了动力系统的动态状态。对WECC 3机9总线系统和新英格兰10机39总线系统进行了案例研究。结果表明EKF和UKF都能准确地估计电力系统的动态状态。 ,核心关键词：状态估计; 电力系统状态估计; Matlab代码; 实验仿真; 测量值误差; 测量噪声; 扩展卡尔曼滤波器(EKF); 无迹卡尔曼滤波器(UKF); 动力系统; 动态状态估计; WECC 3机9总线系统; 新英格兰10机39总线系统。,Matlab

springboot在线考试--.zip: springboot在线考试--

台达DVP EH3与MS300 PLC&变频器通讯程序的全面解决方案,台达DVP EH3与MS300通讯程序：稳定可靠的频率控制与启停管理系统,台达DVP EH3与台达MS300通讯程序(TDEH-9: 台达DVP EH3与MS300 PLC&变频器通讯程序的全面解决方案,台达DVP EH3与MS300通讯程序：稳定可靠的频率控制与启停管理系统,台达DVP EH3与台达MS300通讯程序(TDEH-9) 可直接用于实际的程序，程序带注释，并附送触摸屏程序，有接线方式和设置，通讯地址说明等。程序采用轮询，可靠稳定器件：台达DVP EH3系列PLC，台达MS300系列变频器，昆仑通态7022Ni 功能：实现频率设定，启停控制，实际频率读取，加减速时间设定。资料：带注释程序，触摸屏程序，接线和设置说明，后续有技术咨询。 ,核心关键词：台达DVP EH3; 台达MS300; 通讯程序(TDEH-9); 轮询; 稳定; 频率设定; 启停控制; 实际频率读取; 加减速时间设定; 触摸屏程序; 接线方式; 设置说明; 技术咨询。,台达PLC与变频器通讯程序（带注释、触摸屏控制）

【python毕设】p100基于Pytorch+springboot+vue的声纹识别系统.zip: 项目资源包含：可运行源码+sql文件适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。项目具有较高的学习借鉴价值，也可拿来修改、二次开发。个人账户管理：支持用户注册、登录与个人信息编辑；提供密码找回及账号安全保护措施。声纹采集：利用麦克风设备录制用户的声纹样本；支持多种录音格式和质量调整，确保采集到清晰、准确的声纹数据。声纹模板库管理：建立和维护一个安全的声纹模板库；支持声纹模板的添加、删除、更新和查询操作。声纹比对与识别：运用深度学习算法对输入的声纹数据进行特征提取和匹配；实现快速、准确的声纹身份验证。多场景应用支持：适用于多种场景，如门禁系统、移动支付、远程登录等；可根据实际需求定制开发相应的应用场景。实时监控与报警：实时监控系统运行状态，包括声纹识别成功率、处理速度等指标；当出现异常情况时，及时发出报警信息。数据分析与报告生成：收集并分析声纹识别过程中的数据，如识别准确率、处理时间等；根据用户需求输出包含详细图表说明的专业级文档供下载打印保存。社区互动交流：设立论坛版块鼓励用户分享心得体会讨论热点话题；定期邀请行业专家举办线上讲座传授实用技巧知识。音乐筛选与推荐：集成音乐平台API，根据用户的浏览习惯和情绪状态推荐背景音乐，增强用户体验。数据可视化：提供交互式的数据可视化面板，使非技术用户也能轻松理解复杂的数据集，从而做出更明智的决策。

三相与多相开绕组永磁同步电机仿真模型的先进控制策略探讨与实现,三相与多相开绕组永磁同步电机的Simulink仿真模型与先进控制策略研究,开绕组电机，开绕组永磁同步电机仿真模型、simulink仿真共: 三相与多相开绕组永磁同步电机仿真模型的先进控制策略探讨与实现,三相与多相开绕组永磁同步电机的Simulink仿真模型与先进控制策略研究,开绕组电机，开绕组永磁同步电机仿真模型、simulink仿真共直流母线、独立直流母线，两相容错，三相容错控制，零序电流抑制，控制策略很多三相开绕组永磁同步电机，六相开绕组永磁同步电机五相开绕组永磁同步电机，五相开绕组电机 ,开绕组电机; 永磁同步电机仿真模型; simulink仿真; 共直流母线; 独立直流母线; 两相容错; 三相容错控制; 零序电流抑制; 控制策略; 六相开绕组永磁同步电机; 五相开绕组永磁同步电机,开绕组电机仿真研究：共直流母线与独立直流母线的容错控制策略

【毕业设计】基于Java的开发的网上汽车租赁管理系统_pgj.zip: 【毕业设计】基于Java的开发的网上汽车租赁管理系统_pgj

python打开csv文件: csv 模块是 Python 的标准库，无需额外安装。运行结果如下图： ['姓名', '年龄', '城市'] ['张三', '25', '北京'] ['李四', '30', '上海'] ['王五', '22', '广州']

【毕业设计】基于Java+Springboot+Vue的宠物领养系统_pgj.zip: 【毕业设计】基于Java+Springboot+Vue的宠物领养系统_pgj

让前端开发者学习“机器学习”！: 让前端开发者学习“机器学习”！

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论