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

EditTreeGrid行编辑树列表组件(更新1.5版)

阅读更多
最近有时间我又开发了一版新的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: ['编辑', '删除']
}],
分享到:
评论
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)的功能,允许用户在具有层次结构的数据上进行直观的编辑操作。这个组件对于那些需要管理结构化且...

    python入门-30.寻找列表中只出现一次的数字-寻找单身狗.py

    python入门-30.寻找列表中只出现一次的数字——寻找单身狗.py

    布尔教育linux优化笔记

    linux优化笔记,配套视频:https://www.bilibili.com/list/474327672?sid=4496133&spm_id_from=333.999.0.0&desc=1

    知识付费系统-直播+讲师入驻+课程售卖+商城系统-v2.1.9版本搭建以及资源分享下载

    知识付费系统-直播+讲师入驻+课程售卖+商城系统-v2.1.9版本搭建以及资源分享下载,CRMEB知识付费分销与直播营销系统是由西安众邦科技自主开发的一款在线教育平台,该系统不仅拥有独立的知识产权,还采用了先进的ThinkPhp5.0框架和Vue前端技术栈,集成了在线直播教学及课程分销等多种功能,旨在为用户提供全方位的学习体验,默认解压密码youyacaocom

    美妆神域-JAVA-基于springBoot美妆神域设计与实现

    美妆神域-JAVA-基于springBoot美妆神域设计与实现

    原生js制作Google粘土logo动画涂鸦代码.zip

    原生js制作Google粘土logo动画涂鸦代码.zip

    golin 扫描工具使用, 检查系统漏洞、web程序漏洞

    golin 扫描工具使用, 检查系统漏洞、web程序漏洞

    原生态纯js图片网格鼠标悬停放大显示特效代码下载.zip

    原生态纯js图片网格鼠标悬停放大显示特效代码下载.zip

    用AWLUM进行灰色编码2^2n-QAM调制的精确率Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    去水印web端独立版web

    去水印web端独立版web

    原生js制作左侧浮动可折叠在线客服代码.zip

    原生js制作左侧浮动可折叠在线客服代码.zip

    Chrome 谷歌浏览器下载

    Chrome 谷歌浏览器下载

    亲测全新完整版H5商城系统源码 附教程

    全新完整版H5商城系统源码 自己花钱买的,亲测可用,需要自行下载 H5商城系统设置是实现商城基本功能的核心部分,涵盖了从网站配置、短信和支付配置,到商品、工单、订单、分站和提现管理等多个模块的设置。以下是详细的设置指南,帮助您快速上手并高效管理商城系统。 测试环境:Nginx+PHP7.0+MySQL5.6 1. 网站配置 设置商城名称、LOGO、标题、联系方式和SEO关键词等,确保商城专业和易于搜索。 2. 短信配置 配置短信接口和模板,用于发送订单通知、验证码等,提升用户体验。 3. 支付接口配置 配置微信、支付宝等支付接口,填写API密钥和回调地址,确保支付流畅。 4. 商品分类管理 对商品进行分类和排序,设置分类名称和图标,便于用户查找商品。 5. 商品管理 添加和管理商品信息、规格、图片等,确保商品信息准确丰富。 6. 工单管理 查看和回复用户工单,记录售后问题,提升用户服务质量。 7. 订单管理 查看订单详情,更新订单状态,支持批量导出,方便订单跟踪。 8. 分站管理 创建不同区域分站,设置权限,统一管理各区域市场。 9. 提现管理

    短信3.141592672893982398674234

    apk安装包

    原生js选项卡插件自定义图片滑动选项卡切换.zip

    原生js选项卡插件自定义图片滑动选项卡切换.zip

    1-宗教信息佛教佛寺寺庙庵堂相关数据-社科数据.zip

    宗教信息佛教佛寺寺庙庵堂相关数据集提供了全国各个地区省市县各个佛教寺庙的详细信息。这些数据不仅包括寺庙的名称和负责人姓名,还涵盖了所属省份、地级市、区县、具体地址、建立日期以及支派类别等关键信息。该数据集整理了超过3万条样本,为研究中国佛教寺庙的分布、历史和文化提供了丰富的第一手资料。这些信息有助于了解佛教在中国的传播和发展,以及寺庙在社会和文化中的作用。数据的整理和提供,对于宗教学、社会学、历史学和文化研究等领域的学者来说,是一个宝贵的资源。

    线性电阻网络的等效电阻计算Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手

    简单的 Python 版本管理.zip

    简单的 Python 版本管理pyenvpyenv 可让您轻松在多个 Python 版本之间切换。它简单、不引人注目,并遵循 UNIX 传统,即使用单一用途的工具来做好一件事。该项目由rbenv和 ruby​​-build分叉而来,并针对 Python 进行了修改。pyenv 的作用是什么......允许您根据每个用户更改全局 Python 版本。为每个项目的 Python 版本提供支持。允许您使用环境变量覆盖 Python 版本。一次搜索多个 Python 版本的命令。这可能有助于使用tox跨 Python 版本进行测试。与 pythonbrew 和 pythonz 相比,pyenv没有……依赖于Python本身。pyenv由纯shell脚本制作。不存在Python的引导问题。需要加载到你的 shell 中。相反,pyenv 的 shim 方法通过向你的 中添加目录来工作PATH。管理虚拟环境。当然,你可以自己创建虚拟环境 ,或者使用pyenv-virtualenv 来自动化该过程。目录安装获取 PyenvLinux/UNIX自动安装程序基本

Global site tag (gtag.js) - Google Analytics