`
zhangdaiping
  • 浏览: 130032 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

EXTAjax 
阅读更多
最近有时间我又开发了一版新的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: ['编辑', '删除']
}],
分享到：
| DateFormat时间的汉化bug
评论
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  
楼主您好，正在使用你的组件，感谢。有个BUG，不知是否准确：

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

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

    全国计算机等级考试二级openGauss数据库程序设计样题解析

    主要内容涵盖单选题和操作题两大部分。单选题涉及openGauss数据库的基本概念、数据模型、SQL语法、事务管理和用户权限等方面的知识点。操作题则围绕一个名为bookdb的图书购买信息数据库展开，具体任务包括插入图书信息、更新顾客信息、删除购买记录、查询特定图书信息以及创建视图、存储过程和触发器等实际操作。每道题目均附带详细的解题步骤和最终答案。

    新建 Microsoft Word 文档 (9).docx

    新建 Microsoft Word 文档 (9).docx

    Delphi 12.3控件之nrCommLib Pro v9.54 Full Source for D10.3-D12.7z

    Delphi 12.3控件之nrCommLib Pro v9.54 Full Source for D10.3-D12.7z

    三菱PLC FX5U控制四轴伺服系统：硬件配置、参数设置及运动控制详解

    内容概要：本文详细介绍了使用三菱PLC FX5U控制四轴伺服系统的全过程，涵盖硬件配置、电气接线、参数设置以及运动控制逻辑。硬件方面，选用三菱FX5U-64MT作为主控制器，搭配四个MR-JE-20A伺服驱动器和其他必要组件。软件部分则深入探讨了轴参数初始化、原点回归、多轴联动、HMI界面设计及报警处理等关键技术环节。特别针对旋转轴的特殊处理进行了详细说明，如双速原点回归、绝对定位指令的应用等。此外，还提供了调试经验和优化技巧，确保系统的高精度和平稳运行。 适合人群：从事自动化控制系统设计、调试的技术人员，尤其是对三菱PLC和伺服系统有一定了解的研发人员。 使用场景及目标：适用于工业自动化领域的四轴伺服控制系统开发，旨在帮助工程师掌握从硬件选型到软件编程的一整套解决方案，提高项目的成功率和技术水平。 其他说明：文中附有多份参考资料，包括完整的程序文件、界面工程、CAD接线图和伺服参数清单，便于读者进行实际操作和验证。

    分阶段学习：先掌握基础，再深入细分领域 理论与实践结合：学完算法后立刻用代码实现 保持持续学习：AI技术迭代快，需跟踪最新进展

    分阶段学习：先掌握基础，再深入细分领域。 理论与实践结合：学完算法后立刻用代码实现。 保持持续学习：AI技术迭代快，需跟踪最新进展。

    电子硬件课程设计-Word文档

    电子硬件课程设计

    智慧农贸信息化管理平台.zip

    Java项目基于ssm框架的课程设计，包含LW+ppt

    脚本-压测相关-zyx编写

    脚本-压测相关-zyx编写

    jspm机房预约系统lw+ppt.zip

    Java项目基于ssm框架的课程设计，包含LW+ppt

    app.mobileconfig

    app.mobileconfig

    基于MotorCAD的2极12槽永磁直流有刷电机设计与优化教程

    内容概要：本文详细介绍了使用MotorCAD进行2极12槽永磁直流有刷电机的设计与优化方法。首先，通过Python脚本设置电机的基本参数，如外径、轴向长度、额定转速等。接着，深入探讨了磁钢选型、绕组设置、电磁仿真、热分析等多个关键技术环节。针对常见的设计难题，如齿槽转矩、磁钢充磁方向、绕组跨距等提供了具体的解决方案。同时，还分享了一些提高仿真精度和优化性能的实用技巧，如参数扫描、FEA计算、热管理等。最后，通过实测数据分析验证了设计方案的有效性。 适合人群：电机设计工程师、高校相关专业师生、对电机设计感兴趣的开发者。 使用场景及目标：适用于需要精确设计和优化小型永磁直流有刷电机的场合，帮助用户掌握MotorCAD的具体应用，提高设计效率和产品质量。 其他说明：文中提供的Python和VB脚本示例有助于自动化参数设置和批量处理任务，减少重复劳动。此外，还强调了在设计过程中需要注意的关键技术和常见陷阱，确保设计方案的可行性和可靠性。

    三相逆变器基于PI闭环与解耦控制的MATLAB仿真实现

    内容概要：本文详细介绍了三相逆变器在MATLAB/Simulink环境下的PI闭环控制及解耦控制的实现方法。首先，通过坐标变换将三相电流从静止坐标系转换到旋转坐标系，确保功率守恒并实时更新转子位置角。接着，实现了带有抗饱和处理的PI控制器，防止积分风-up现象。然后，针对d轴和q轴之间的耦合问题，引入了解耦控制，通过低通滤波和交叉耦合项来稳定系统。此外，还讨论了PWM生成模块的死区时间和仿真结果的验证方法，强调了参数调试的重要性和具体策略。 适合人群：电力电子工程师、自动化控制领域的研究人员以及对三相逆变器控制感兴趣的高校师生。 使用场景及目标：适用于需要深入了解三相逆变器控制原理和技术实现的研究项目或工程应用。主要目标是掌握PI控制器的设计、解耦控制的应用及其在MATLAB/Simulink中的仿真实现。 其他说明：文中提供了详细的代码示例和调试技巧，帮助读者更好地理解和实践相关理论。同时提醒读者，仿真成功并不代表实际硬件运行无误，建议在实验过程中准备必要的保护措施。

    58面经面试过程和题目.txt

    58面经面试过程和题目.txt

    OceanBase OBCP 实验指导手册V1.3

    OceanBase OBCP 实验指导手册V1.3

    ABB喷涂机器人IRC5P与PLC Profinet通讯配置及程序号启动详解

    内容概要：本文详细介绍了ABB喷涂机器人IRC5P与PLC通过Profinet通讯进行程序号启动的具体步骤和注意事项。主要内容涵盖Profinet通讯的基本配置，包括设备名称、IP地址设置，RAPID代码编写，任务声明，信号映射，以及调试技巧。文中还分享了许多实际调试中的经验和常见错误，如大小写敏感、IP地址分配、程序号有效性和信号防抖处理等。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是负责机器人与PLC通讯配置的技术人员。 使用场景及目标：帮助技术人员正确配置ABB喷涂机器人IRC5P与PLC之间的Profinet通讯，确保程序号能够顺利启动，避免常见的配置错误和调试难题。 其他说明：文章强调了硬件和软件配置相结合的重要性，并提供了详细的代码示例和调试建议，有助于提高系统的稳定性和可靠性。

    电子硬件课后习题题目及要求.docx

    电子硬件课后习题题目及要求.docx

    亲测开源好用的红盟云发卡源码对接支付宝等支持一件搭建

    亲测开源好用的红盟云发卡源码对接支付宝等支持一件搭建，方便建立自己的发卡平台，源码全部开源无加密，可方便而开使用。 测试环境：php7.2+mysql+宝塔面板 安装教程: ①设置public运行目录 ②设置thinkphp伪静态 ③访问域名填写数据库信息根据提示安装

Magicbox
Global site tag (gtag.js) - Google Analytics