本文通过JavaScript实现了C1GridView的滚动条进行定位,如用水平滚动条的位置,同步另外一个C1GridView的垂直滚动条位置。

首先创建一个显示在每月的天粒度员工的工作表格,表格的列代表天,因此每行是员工每月的工作纪录。所有你需要的是在数据库中创建数据表中的数据,并将其绑定C1GridView。

其次创建第二个C1GridView,行代表天,因此每行是事件的详细信息。正如上面,绑定数据源到第二个GridView。 

 

下面是实现两个表格的同步滚动的代码,用于控制表格2进行滚动定位:

  1: function scroll(li)
  2:  {
  3:    if (li == 13)
  4:    {
  5:      $("#C1GridView2").closest(".wijmo-wijsuperpanel").wijsuperpanel("vScrollTo", 0);
  6:    }
  7:    else
  8:    {
  9:      var position = $($("#C1GridView2").c1gridview()[0].rows[ li - 1 ]).position().top;
 10:      $("#C1GridView2").closest(".wijmo-wijsuperpanel").wijsuperpanel("vScrollTo", position);
 11:    }
 12:  }

 

下面是获得表格1的滚动位置的函数,会用这个位置滚动在第二个表格相同的行:

  1: function getLastVisibleColumnInViewArea(id)
  2:   {
  3:     var $grid = $(id),
  4:     $outer = $grid.closest(".wijmo-wijgrid"),
  5:     outerWidth = $outer.width(),
  6:     outerLeft = $outer.offset().left,
  7:     columns = $grid.c1gridview("columns");
  8: 
  9:     for (var i = columns.length - 1; i >= 0; i--)
 10:     {
 11:       var element = columns.element;
 12:       if ((element.offset().left - outerLeft + element.width()) > 0)
 13:       {
 14:          return i;
 15:       }
 16:     }
 17:   }

 

C1GridView的前端(JS),同Wijimo; 更多信息,请参考wijimo API接口文档:
http://wijmo.com/docs/wijmo/#Wijmo~wijmo.grid.cellInfo~tableCell.html
http://wijmo.com/docs/wijmo/#UpdateDatainWijgrid.html


Demo1

 

源码下载: