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

zhangdaiping

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

最近访客更多访客>>

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

三菱FX3G FX3S与四台E700变频器Modbus RTU通讯控制：正反转、频率设定与读取方案,三菱FX3G FX3S与四台E700变频器通讯：Modbus RTU协议实现正反转、频率设定与控制: 三菱FX3G FX3S与四台E700变频器Modbus RTU通讯控制：正反转、频率设定与读取方案,三菱FX3G FX3S与四台E700变频器通讯：Modbus RTU协议实现正反转、频率设定与控制，快速反馈与教程包含,三菱FX3G FX3S 485协议通讯四台三菱E700变频器程序资料三菱FX3G FX3S+485bd扩展，采用modbus rtu协议，crc校验，通讯控制四台E700变频器，可以实现正反转，停止，频率的设定，频率，电流等的读取。反馈快，使用方便，包括教程，plc和触摸屏程序，变频器参数设置和接线，别的变频器支持rtu协议也可以实现。 ,三菱FX系列PLC; 485协议通讯; 变频器E700; 通讯控制; 参数设置; 教程。,三菱PLC控制E700变频器：485协议通讯与程序设置全解

hyphen-nl-0.20050617-10.el7.x64-86.rpm.tar.gz: 1、文件内容：hyphen-nl-0.20050617-10.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/hyphen-nl-0.20050617-10.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊

西门子S7-1200PLC结构化编程在5轴伺服项目中的应用：模块化设计、触摸屏控制及电气图纸实战解析,西门子S7-1200PLC结构化编程实现多轴联动与多种伺服功能应用：CAD图纸、PLC程序和触摸屏: 西门子S7-1200PLC结构化编程在5轴伺服项目中的应用：模块化设计、触摸屏控制及电气图纸实战解析,西门子S7-1200PLC结构化编程实现多轴联动与多种伺服功能应用：CAD图纸、PLC程序和触摸屏程序协同运作。,西门子S7-1200PLC结构化编程5轴伺服项目，包含plc程序、威纶通触摸屏程序、cad电气图纸。可以实现以下功能，规格有： 1.三轴机械手X轴-Y轴-Z轴联动取放料PTO脉冲定位控制台达B2伺服 2.台达伺服速度模式应用+扭矩模式应用实现收放卷 3.程序为结构化编程,每一功能为模块化设计,功能:自动_手动_单步_暂停后原位置继续运行_轴断电保持_报警功能_气缸运行及报警. 4.每个功能块可以无数次重复调用，可以建成库，用时调出即可 5.上位机采样威纶通触摸屏 6.参考本案例熟悉掌握结构化编程技巧,扩展逻辑思维。博图14以上都可以打开 ,核心关键词：西门子S7-1200PLC; 结构化编程; 5轴伺服项目; PLC程序; 威纶通触摸屏程序; CAD电气图纸; 三轴机械手; PTO脉冲定位控制; 台达B2伺服; 速度模式应用; 扭矩模式应用; 模块化设计; 轴断电保

情感分析算法的关键应用领域与典型实战案例: 情感分析算法在多个领域有着广泛的应用场景和丰富的案例

基于MATLAB仿真的MMC整流站与逆变站柔性互联技术研究：快速工况仿真与环流抑制控制,基于MATLAB仿真的MMC整流站与逆变站运行分析及四端柔性互联工况仿真模拟研究,21电平MMC整流站、MMC逆: 基于MATLAB仿真的MMC整流站与逆变站柔性互联技术研究：快速工况仿真与环流抑制控制,基于MATLAB仿真的MMC整流站与逆变站运行分析及四端柔性互联工况仿真模拟研究,21电平MMC整流站、MMC逆变站、两端柔性互联的MATLAB仿真模型，4端柔性互联、MMC桥臂平均值模型、MMC聚合模型（四端21电平一分钟即能完成2s的工况仿真） 1-全部能正常运行，图四和图五为仿真波形 2-双闭环控制，逆变站PQ控制，整流站站Udc Q控制 3-最近电平逼近调制+子模块电容充电 4-环流抑制控制 ,1. 21电平MMC整流站; 2. MMC逆变站; 3. MATLAB仿真模型; 4. 两端柔性互联; 5. 桥臂平均值模型; 6. 聚合模型; 7. 双闭环控制; 8. 最近电平逼近调制; 9. 子模块电容充电; 10. 环流抑制控制。,基于柔性互联的MMC系统仿真模型：多电平控制与环流抑制研究

有效应对网络舆情教育培训PPT.pptx: 有效应对网络舆情教育培训PPT.pptx

高光谱解混和图片去噪附Matlab代码.rar: 1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

【轴承压力】基于matlab GUI止推轴承压力计算【含Matlab源码 12069期】.zip: Matlab领域上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容主函数：main.m；调用函数：其他m文件；无需运行运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤步骤一：将所有文件放到Matlab的当前文件夹中；步骤二：双击打开main.m文件；步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

娱乐小工具微信小程序源码下载支持多种流量主.zip: 淘宝买的，直接分享给大家了，没有测试环境，也没有办法去测。但我想，他应该是可以用的

基于A、RBFS 和爬山算法求解 TSP问题附Matlab代码.rar: 1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

ACM比赛经验分享（基础知识与算法准备等）.zip: ACM比赛经验分享（基础知识与算法准备等）

基于matlab平台的芯片字符识别.zip: 运行GUI版本，可二开

比例-积分-微分（PID）鲁棒控制及电流反馈以确保 UPS 的稳定性附Matlab代码.rar: 1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

机器学习（预测模型）：包含恶意网址的数据库或数据集: 该是指包含恶意网址的数据库或数据集，它通常被用于网络安全研究、恶意软件检测、网络欺诈防范等领域。研究人员和安全专家会利用这个数据集来分析恶意网址的特征、行为模式，进而开发出相应的检测算法和防护措施，以识别和阻止恶意网址对用户设备和网络环境造成的潜在威胁。该数据集包含约 651,191 条经过标记的 URL，涵盖了四种主要类型：良性（Benign）、篡改（Defacement）、钓鱼（Phishing）和恶意软件（Malware）。其中，良性 URL 占据了约 428,103 条，篡改 URL 有 96,457 条，钓鱼 URL 为 94,111 条，而恶意软件 URL 则有 32,520 条。该数据集的显著特点是其多类别分类的全面性，不仅包括常见的恶意 URL 类型，还涵盖了大量良性 URL，使得研究人员能够更全面地理解和区分不同类型的 URL。此外，数据集以原始的 URL 形式提供，研究人员可以根据需要提取和创建特征，而不受预设特征的限制。

集字卡v4.3.4微信公众号原版三种UI+关键字卡控制+支持强制关注.zip: 字卡v4.3.4 原版三种UI+关键字卡控制+支持获取用户信息+支持强制关注集卡模块从一开始的版本到助力版本再到现在的新规则版本。集卡模块难度主要在于如何控制各种不同的字卡组合被粉丝集齐的数量。如果不控制那么一定会出现超过数量的粉丝集到指定的字卡组合，造成奖品不够的混乱，如果大奖价值高的话，超过数量的粉丝集到大奖后，就造成商家的活动费用超支了。我们冥思苦想如何才能限制集到指定字卡组合的粉丝数，后我们想到了和支付宝一样的选一张关键字卡来进行规则设置的方式来进行限制，根据奖品所需的关键字卡数，设定规则就可以控制每种奖品所需字卡组合被粉丝集到的数量，规则可以在活动进行中根据需要进行修改，活动规则灵活度高。新版的集卡规则，在此次政府发布号的活动中经受了考验，集到指定字卡组合的粉丝没有超出规则限制。有了这个规则限制后，您无需盯着活动，建好活动后就无人值守让活动进行就行了，您只需要时不时来看下蹭蹭上涨的活动数据即可。被封？无需担心，模块内置有防封功能，支持隐藏主域名，显示炮灰域名，保护活动安全进行。活动准备？只需要您有一个认证服务号即可，支持订阅号借用认证服务号来做活动。如果您

DSP28035的CAN通信升级方案：包括源码、测试固件与C#上位机开发，支持周立功USBCAN-II兼容盒及BootLoader闪烁指示,DSP28035的CAN升级方案及详细配置说明：使用新动力开: DSP28035的CAN通信升级方案：包括源码、测试固件与C#上位机开发，支持周立功USBCAN-II兼容盒及BootLoader闪烁指示,DSP28035的CAN升级方案及详细配置说明：使用新动力开发板与C#上位机软件实现固件升级，涉及用户代码、BootLoader代码及硬件连接细节,DSP28035的can升级方案提供源代码，测试用固件。上位机采用c#开发。说明一、介绍 1、测试平台介绍：采用M新动力的DSP28035开发板，CAN口使用GPIO30\31。波特率为500K。 2、28035__APP为测试用的用户代码，ccs10.3.1工程，参考其CMD配置。 3、28035_Bootloader_CAN为bootloader源代码，ccs10.3.1工程； 4、SWJ为上位机，采用VS2013开发，C#语言。 5、测试使用的是周立功的USBCAN-II，can盒，如果用一些国产可以兼容周立功的，则更这里面的ControlCAN.dll即可。 6、升级的app工程需要生成hex去升级，具体参考我给的工程的设置。 7、BootLoader代码，只有D400这一个灯1s闪烁一

基于Matlab的数字验证码识别系统：预处理与不变矩算法的实践应用及GUI界面构建,基于MATLAB不变矩算法的数字验证码识别系统设计与实现,基于matlab不变矩算法实现数字验证码过程：先对验证图: 基于Matlab的数字验证码识别系统：预处理与不变矩算法的实践应用及GUI界面构建,基于MATLAB不变矩算法的数字验证码识别系统设计与实现,基于matlab不变矩算法实现数字验证码过程：先对验证图像进行去噪、定位、归一化等预处理，然后计算待识别数字的不变矩，再进行特征匹配，得到识别结果。以Matlab软件为开发平台来进行设计实现及仿真，并构建相应的GUI界面。实验结果表明利用不变矩在识别数字验证码方面具有可行性。 ,关键词：Matlab；不变矩算法；数字验证码；预处理；特征匹配；GUI界面；实验验证；可行性。,Matlab实现数字验证码识别：预处理与不变矩算法的GUI仿真

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论