升级的浏览器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. 标题锁定，假如需要纵向滚动，表格标题不会被隐藏。

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

评论

89 楼 zack 2007-03-28  

理解楼主的苦处，人一生中总是会有不顺心的时间的，希望楼主能够尽快走出来！

88 楼 hexiaodong 2007-03-27  

唉，最近忙着买房子，工作上又不爽，没心情做大的升级了。

87 楼 zack 2007-03-27  

是的，我现在就是这样做的，当时查了半天问题的，现在和大家共享一下解决方法

86 楼 hexiaodong 2007-03-27  

这个好解决，你把div定义调一下不就行了嘛

85 楼 zack 2007-03-27  

楼主，还有一个BUG，比如我在锁定列Grid前两列时，如果我定义的层的高度不能完全显示一行数据（例如每行高20，一页显示10行，我定义div的高度为195）时，当数据量大于一页时会有错行出现（锁定列和没有锁定部份没有对齐）

84 楼 pragmatic 2007-03-21  

楼主，最近好忙吗？能不能通过设置参数来控制表格的排序功能，需要排序的列才让他排序，还有上面提到的那个问题，楼主能不能花点时间实现下，谢谢！

83 楼 pragmatic 2007-03-16  

对的，当数据量不是很大时，就不用采取这种方式，建议楼主增加这方面的扩展

82 楼 zack 2007-03-16  

楼主建议是不是设置一个变量来控制是一次绘制还是滚动绘制

81 楼 hexiaodong 2007-03-16  

让大家久等了。

80 楼 hexiaodong 2007-03-16  

上下滚动的时候，整个视图是重新绘制的，所以会比较慢一点，如果有合计行会更慢。
我为了让表格能快速加载大量数据，所以不得不每次加载的时候只绘制当前可见行。这样，每次重新加载数据的时候绘制界面只需要数百个ms，但这也带来的滚动不够平滑的问题。纵向滚动时，每次重绘界面大约需要200ms(这个时间跟各位的机器配置也有关系)。但滚动过程中，不是每次触发onScroll的时候就会重绘的，控件会等待最后一个onScroll事件被触发的时候才重绘界面。因此滚动条一直滚动的时候，是看不到数据更新的，滚动结束的时候才更新界面。
这个结果也是多方平衡的结果了。如果你需要一个载入量不是很大（<1000）的多功能表格控件，我可以为你订制一个一次性绘制界面的控件。

79 楼 flysky_net 2007-03-16  

不知道楼主有没有好的方法来解决这个问题，期待中...

78 楼 zack 2007-03-16  

在滚动时需要重新进行js计算和重画当前可见行的，所以会比较慢一些的，这个也和电脑的配置有关系

77 楼 pragmatic 2007-03-16  

楼主，您好，感谢你为我们提供功能这么强大的组件，我想问一下拖上下滚动条的时候，数据怎么跟不上呀！不像左右滚动条那么快，这个使得我好郁闷

76 楼 zack 2007-03-15  

增加不会滚动的问题，只要将addNewRow中
if(oThis.from <0)
　　oThis.from = 0;
修改成：
if(oThis.from <0)｛
　　oThis.from = 0;
　　oThis.paintCurrentRows(oThis.from);
}
就可以了

75 楼 zack 2007-03-13  

在例子中，如果删除一些数据后再进行增加的话也是一样的问题的

74 楼 zack 2007-03-12  

还有一个问题的，如果我初始的时候行数不够的话，我点击增加时不会刷新显示新加入的行，如果我行数比较多的时候由于要滚动就没有这样的问题存在的

73 楼 zack 2007-03-12  

楼主你好，我的删除程序按如下所写
  if(window.confirm('是否真的要删除所选中的行?')){
    var lsParm = "";
    var data = grid.getValue();
    for(var i=0;i<data.length;i++){
      if(data[i]._selected===true){
        if(lsParm.length>0){
          lsParm += ",";
        }
        lsParm += data[i].xh;
      }
    }

    if(lsParm.length>0){
      //更新数据
      var r = new AjaxRequest("post","/test/setByXh.jsp",true);
      r.setParameter("delval",lsParm);
      r.setParameter("action","delete");
      r.onresult = function(){
        var result = r.getValue();
        if(result.exception!=null){
          alert(result.exception);
        }else{
          window.returnValue = "relist";
          window.close();
        }
      }
      r.send(null);

      grid.deleteSelectedRows();
    }
  }
但是这样执行后老是会报117,3object对象不存在的错，请问这是什么问题

72 楼 zack 2007-03-09  

麻烦楼主帮忙抽时间把那个在当前浏览窗口的最后一行再按回车时，会提示“没有下一行”的问题解决吗？谢谢了，我们的项目目前正等着投入使用的。

71 楼 zack 2007-03-07  

好的，谢谢，还有最后一个问题:enter跳转到下行的功能，还有一个问题，如果是在当前浏览窗口的最后一行再按回车时，会提示“没有下一行了”，实际上后面还有许多行的，不会自动滚动当前编辑窗口

70 楼 hexiaodong 2007-03-07  

你可以这样定义一个列：
{name:"",caption:"",readonly:"functionName()",....}

function functionName(){
    ....
}