当前位置: 代码迷 >> Web前端 >> EditTreeGrid行编者树列表组件(更新1.5版)
  详细解决方案

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

热度:289   发布时间:2012-11-18 10:51:22.0
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: ['编辑', '删除']
}],
14 楼 zhangdaiping 2011-04-19  
clue 写道
zhangdaiping 写道
clue 写道
我对BufferTree比较感兴趣,不知道有没有人实现过?
类似Grid的BufferView,或者应该叫BufferNodeUI?

TreeGrid在数据量大时实在是杯具啊,所有行都渲染了,只不过是display:none隐藏。


BufferTree是什么,给链接

还没人实现呢... 参考Grid的BufferView,用于大量数据情况下的缓冲显示,即只显示可见数据。
例如1000条的gird,当前滚动条位置下只能看到50~70行,那就只渲染这20来行。


这是树,和grid的数据结构不一样,Tree本身就有延迟加载的机制
15 楼 zhangdaiping 2011-04-19  
bond88 写道
请教博主一个关于隐藏列的问题,如果树视图里有个隐藏列存在,显示的时候水平网格线会出现中断,光条也会中断,而且列头的隐藏列占的宽度不能消失,看起来显得很不舒服。不知道这是什么问题?


还没用过隐藏列,所以没测试过。。。
16 楼 bond88 2011-04-19  
zhangdaiping 写道
bond88 写道
请教博主一个关于隐藏列的问题,如果树视图里有个隐藏列存在,显示的时候水平网格线会出现中断,光条也会中断,而且列头的隐藏列占的宽度不能消失,看起来显得很不舒服。不知道这是什么问题?


还没用过隐藏列,所以没测试过。。。

楼主有空测试下吧,我是没搞定,出现那种显示很烦。但我又怀疑会不会是我的问题,毕竟不应该有这么明显的问题却没人反应啊?(我使用系统的grid也有这样问题,列头不能完全隐藏,他的列头隐藏好像就是靠display:none或者visibility:hidden实现的).
另外再请教下,如果不用隐藏列,想要处理返回的某列不想显示的数据,有更好的方式吗?
17 楼 clue 2011-04-19  
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
19 楼 zhangdaiping 2011-04-20  
clue 写道
zhangdaiping 写道

这是树,和grid的数据结构不一样,Tree本身就有延迟加载的机制

你还没理解我的意思,Ext的树是可以分层加载渲染,但单层的节点是只要展开就全部渲染。如果单层节点超过1000,性能就会低到难以忍受的程度。

Grid配置BufferView后,虽然加载还是那么多数据,但实际渲染出html的只有可见的那块,并根据滚动条位置动态更新,所以性能很高。


知道了,数据可以加载出来,再根据滚动条渲染数据。。。这个其实是可以做到的 
20 楼 clue 2011-04-20  
zhangdaiping 写道


知道了,数据可以加载出来,再根据滚动条渲染数据。。。这个其实是可以做到的 

理论上如此。。。 目前仍未见到。。。
可能接触面不广吧,没准已经有人实现过了。
21 楼 zhangdaiping 2011-04-22  
2011/4/22更新1.4版

  • 修正一些兼容性问题
22 楼 qwml6179 2011-05-19  
楼主会出 基于 ExtJs 4 的组件么
23 楼 lengxufeng 2011-06-02  
楼主您好,正在使用你的组件,感谢。有个BUG,不知是否准确:

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

求证,谢谢。
24 楼 zhangdaiping 2011-06-09  
2011-6-9 更新1.5版

修正新增节点,异步加载父节点导致的BUG
增加删除树节点时,提示删除功能
25 楼 zhangdaiping 2011-06-09  
lengxufeng 写道
楼主您好,正在使用你的组件,感谢。有个BUG,不知是否准确:

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

求证,谢谢。

其实这个问题早发现了,就是没有更新。刚发了1.5版已经修复了这个BUG
26 楼 zhangdaiping 2011-06-09  
qwml6179 写道
楼主会出 基于 ExtJs 4 的组件么

工作中用4的机会不多,应该不会出4的组件

其实自己对是很有兴趣,也看过很多4的例子

4的数据模型最吸引我
27 楼 xu5420878 2011-07-23  
楼主,你的资料很好,现在我想研究下你的代码学习下,因为那增加节点save后如何保存到josn中的,我这块想弄下,但是那个edittreegrid-pkg.js文件打开后都只成一行了,所以没看明白。我该怎么做才能让数据保存到json中呢?
28 楼 君已陌璐 2011-09-15  
请问下楼主,为什么你给的例子中修改的数据无法回写到json文件中?
29 楼 friday007001 2011-10-30  
楼主1.5的还支持复选框吗?怎么使用呀?
30 楼 xuthus_qbxx 2011-11-25  
你好!
我这近希望开发一个类似treegrid的计划管理小程序,以便管理我的员工,但我本身自己做程序不多,所以我希望把这个小程序委外给你做,不知道感兴趣吗

我的邮箱:keybeninfo@163.com   qq:313134870
31 楼 Inspiration 2012-02-02  
你好,请问我想把编辑好的树结构以一种XML或JSON的方式保存起来,请问怎么弄?
32 楼 zhongchao444 2012-02-09  
你好 我运行里面的示例,怎么提示拒绝访问
33 楼 stephansun 2012-06-29  
这个版本不能支持多选框了吗?前几个版本有的,但是下载链接好像没有了。
  相关解决方案