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

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

评论

49 楼 zack 2007-02-27  

在sigmawidgets.htm中是用formula:"p$('number')*p$('percent')"来进行计算的，我这边是在程序中定义的grid.onCellValueChanged = function(evt){...}在进行计算和赋值刷新的，麻烦你再看一下是什么问题，谢谢了

48 楼 hexiaodong 2007-02-27  

zack 写道

但是我用grid.setCellValue(rowId,colName,row); 来更新时，他的数值总是变成0.0

在我的测试用的sigmawidgets.htm中，可以正常更新啊

47 楼 zack 2007-02-26  

    var row = evt.rowData; //行对象
    var rowId = evt.rowId; //控件自己生成的行号
    var colName = evt.column.name; //当前编辑单元格和名称
    //计算总净重
    if(colName=='xs'||colName=='jz'){
      if((ldXs!=null)&&(ldXs!=0.0)&&(ldJz!=null)&&(ldJz!=0.0)){
        row.s$('zjz',ldXs * ldJz);
        grid.getColByName('zjz').readonly = true;
      }else{
        grid.getColByName('zjz').readonly = false;
      }
      grid.setCellValue(rowId,'zjz',row); //更新指定列的视图
    }

46 楼 zack 2007-02-26  

但是我用grid.setCellValue(rowId,colName,row); 来更新时，他的数值总是变成0.0

45 楼 hexiaodong 2007-02-26  

zack 写道

还有一个建议，如有某个列是只读的，最好用不同的底色来与可编辑的列区分开来。

你自己写一个CellRender就行

44 楼 hexiaodong 2007-02-26  

zack 写道

还有一个问题的，我用row.s$('zjz',ldXs * ldJz);设置了zjz这行的新值，但是好像显示不会刷新

grid.setCellValue(rowId,colName,row); //更新指定行列的视图

43 楼 zack 2007-02-26  

还有一个建议，如有某个列是只读的，最好用不同的底色来与可编辑的列区分开来。

42 楼 zack 2007-02-26  

还有一个问题的，我用row.s$('zjz',ldXs * ldJz);设置了zjz这行的新值，但是好像显示不会刷新

41 楼 zack 2007-02-25  

非常感谢LZ的解答，新版本的变化比较大的，不好意思了

40 楼 hexiaodong 2007-02-25  

zack 写道

如果我要动态设置某一列为只读应该怎么写，以前我是用event.cell.row.cells['ztj'].setReadOnly(true)来设置的

var col = grid.getColByName(colName);
col.readonly = true;

39 楼 hexiaodong 2007-02-25  

关闭日志，可以调用SigmaUtil.closeLogger()


监听单元格:
grid.onCellValueChanged = function(evt){
var row = evt.rowData; //行对象
var cellValue = row.p$(evt.column.name);//取当前单元格的值
var rowId = evt.rowId; //控件自己生成的行号
var colName = "newCol";
row.s$(colName,newValue); //设置当前行另一列的值，colName是另一列列名
grid.setCellValue(rowId,colName,row); //更新指定列的视图
}

38 楼 zack 2007-02-25  

如果我要动态设置某一列为只读应该怎么写，以前我是用event.cell.row.cells['ztj'].setReadOnly(true)来设置的

37 楼 zack 2007-02-25  

还有我应该怎么写可以不显示日志？谢谢了

36 楼 zack 2007-02-25  

还有个问题的，以前对于数据修改后可以触发一个事件,listener:"onValueChanged"，现在应该怎么办，是定义一个render吗？还有我以前可以使用var lsHgbh = event.cell.row.getValueOf('hgbh');来取得当前行中hgbh这个字段的值，用event.cell.row.setValueOf('dybz',true)；来设置dybz这个字段的值，现在应该怎么做？

35 楼 zack 2007-02-25  

哈，拜年主要是要谢谢楼主的辛苦劳动，那个bug嘛:)，谢谢了

34 楼 godson_2003 2007-02-25  

哈哈，新年快乐，恭喜发财

33 楼 hexiaodong 2007-02-25  

都来拜年了呀，看来上面那个bug不改不行了

32 楼 zack 2007-02-25  

新春快乐啊，上班了，先拜个晚年

31 楼 zack 2007-02-14  

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

30 楼 zack 2007-02-14  

感谢楼主的工作哦，非常感谢