升级的浏览器UI组件

在“交流web上的UI组件，我来开个头 ”这篇帖子了，我把自己写的一些浏览器UI组件和大家交流了一下，还是由很多人感兴趣的，也对这些组件指出了一些不足之处。

 

最近难得有闲，准备把这些UI组件重写一遍。断断续续写了几天后已经有一些进展了，最先初具形状的是Grid组件。但该组件和原先的SigmaGrid并不相同，在新的版本中，我想把它和SigmaList功能合二为一。在旧的版本中，SigmaGrid主要用于少量对象集合的编辑和展示，比如：在订单编辑界面中，可以SigmaGrid来展示和编辑订单明细对象。而SigmaLIst主要用于大量对象集合的展示，不具备编辑功能，它主要用于一些报表界面中。在新的SigmaWidgets中，我希望SigmaGrid具备以上所有功能。

 

但目前还没有完整实现我的设想，到目前为止新版的SigmaGrid仅仅实现了旧版中SigmaList功能，但这次实现已经具备跨浏览器能力，至少，它可以很好地运行在ie和firefox下。列一下目前的功能吧：

1. 跨浏览器。
2. 可以加载大数据量，事实上无论你绑定的数据中有多少个对象，组件只会画出当前可见的那些对象。因此，组件绑定数据本身的过程是很短暂的。但滚动条滚动的过程不是很流畅。
3. 嵌套的表头定义，不限层次。
4. 丰富的列属性可供设置：你可以指定每一列数据来自对象的哪个属性、属性值类型、列宽度、列align方式、列标题。可申明的值类型暂时只包含：string、number、date、boolean、link、select、percent。其中number和percent还可以指定小数位格式，比如#.00表示强制保留两位小数。
5. 支持ognl方式定义列的数据源，假如，表格绑定的是person集合，person关联到部门，那么你可以把显示部门名称的这一列申明为name:”deparment.name”。
6. 列锁定，你可以指定表格最前面多少列是不允许横向滚动的。
7. 标题锁定，假如需要纵向滚动，表格标题不会被隐藏。

废话少说，大家下载代码看看吧。希望能看到热烈的交流。

评论

29 楼 hexiaodong 2007-02-14  

tab 键焦点右移
enter键焦点下移

28 楼 zack 2007-02-12  

应该是可以屏蔽的，我在你的程序中if(window.event.keyCode==13)修改成if((window.event.keyCode==13)||(window.event.keyCode==9))时，Tab和回车都是把焦点转移到下一个input。实际上只要把回车修改成转移到下一行同一列就可以了

27 楼 hexiaodong 2007-02-12  

浏览器会自动响应tab键，把焦点转移到下一个input，这个我阻止不了

26 楼 zack 2007-02-12  

还有一个建议，在使用Grid输入时，用Tab键可以进入下一个可编辑框，用回车可以进入下一行同一列。在Delphi和PB中的Grid输入都是这样的

25 楼 zack 2007-02-12  

非常感谢楼主。

24 楼 hexiaodong 2007-02-12  

zack 写道

建议主增加一个根据单元格的内容可以自动设置是否可以编辑和显示的格式和背景，如可以根据单元格A的值来判断当前单元格B是否只读和字体的颜色

现在可以根据表达式计算某个单元格是否可编辑了，至于根据表达式计算单元格展示的样式，你可以自己写一个CellRender来实现。

23 楼 hexiaodong 2007-02-11  

根据表达式判断单元格是否可读，需要增强Grid的功能。至于根据其他单元格内容以不同方式来显示当前单元格，需要你自己定一个特别的CellRender

22 楼 zack 2007-02-11  

另外，楼主是否可以设置全局的是否允许排序状态

21 楼 zack 2007-02-11  

建议主增加一个根据单元格的内容可以自动设置是否可以编辑和显示的格式和背景，如可以根据单元格A的值来判断当前单元格B是否只读和字体的颜色

20 楼 sinbo 2007-02-11  

继续努力,一直关注中.

19 楼 hexiaodong 2007-02-11  

再加点什么功能?大家提提意见

18 楼 zack 2007-02-09  

楼主的动作真快啊，一直在关注楼主这个工具的

17 楼 godson_2003 2007-02-09  

抢鲜

一直关注中

16 楼 hexiaodong 2007-02-09  

1、增加删除行、增加行功能
2、增加对自定义CellRender和CellEditor的支持。自定义Render的申明如下：
   var myRender = new function(){ this.paint = function(grid,row,col){....}}
   列的定义
   {name:"name",caption:"姓名",width:120,mode:"link",render:myRender,href:"nameLinked"},

15 楼 hexiaodong 2007-02-08  

恩，新版本还没做到这一步

14 楼 zack 2007-02-08  

楼主，我今天看了一下新版本的js程序，好像当中没有增加行和删除行的功能了

13 楼 hexiaodong 2007-02-08  

最近在开发一个项目，大概下周更新。
下一版本，提供类似swing表格的功能，允许开发者注册自己的CellRender和CellEditor。

12 楼 zack 2007-02-07  

楼主已经好久没有更新了，不知有什么消息可以提前透露一下吗？

11 楼 hexiaodong 2007-02-02  

恩，不错的建议。谢谢

10 楼 QMax 2007-02-02  

关于grid的编辑，我看很多可编辑的grid都只是提供几种简单的编辑框test，select checkbox之类，实际上很多时候这种个性化的编辑框可能远远超过这几种，我觉得是否可以提供比较方便扩展的接口，比如可以传入自己定义的一段innerHtml，这样不满足需要的时候，可以自己写一个编辑框的html传进来。只是这可能需要定义好一个get 和set的方式。一定建议，供参考