管理者用雇员仪表板速概观雇员工作流程和细节。这个演示描述了如何用C1GridView使该过程进一步自动化。让我们来讨论一下如何使用C1GridView创建的仪表板,让管理者根据公司每月的事件来监控雇员的贡献率。
此项分析的基本需求是数据的正确展示。所以我们可以创建两个不同的数据表来用特定的格式向用户展示数据。
创建第一个表格来开始本次演示,该表格用来展示在某个特定事件中每个雇员在该月的每一天所扮演的角色。表格中的列代表以天为单位的时间,所以每一行是雇员每月贡献率的一个记录。你所需要做的就是用这些数据在数据库中创建数据表并将它与一个C1GridView的实例结合起来。
现在,移动到第二个数据表,它展示了发生在该月每一天的事件细节——各行代表以天为单位的时间,所以每行都是时间细节的一个记录。正如上面所说的,你会有另一个包含所有细节的数据表且它被束缚于第二个网格视图内。
所以,现在我们在同一页面上有了两个代表雇员数据两个不同方面的网格。查看这一页面的用户可以滚动第一个网格来到达某一特定列查看特定时间的细节,也可以滚动第二个网格到特定行来查看当天的事件。在这里我们讨论的是,在第一个Grid中用户滚动至特定列如某一天的时候,第二个Grid自动滚动至相应的特定行如该天的事件来提供事件细节。
以下实现在两个网格中同步滚动的自动化。首先,我们需要在用户在第一个网格中已经水平滚动后找到左边的列索引。代码如下:
function scroll(li) { if (li == 13) { $("#C1GridView2").closest(".wijmo-wijsuperpanel").wijsuperpanel("vScrollTo", 0); } else { var position = $($("#C1GridView2").c1gridview()[0].rows[ li - 1 ]).position().top; $("#C1GridView2").closest(".wijmo-wijsuperpanel").wijsuperpanel("vScrollTo", position); } }
一旦我们有了左边大部分列的索引,我们将滚动第二个网格中的行索引。以下是代码:
function getLastVisibleColumnInViewArea(id) { var $grid = $(id), $outer = $grid.closest(".wijmo-wijgrid"), outerWidth = $outer.width(), outerLeft = $outer.offset().left, columns = $grid.c1gridview("columns"); for (var i = columns.length - 1; i >= 0; i--) { var element = columns.element; if ((element.offset().left - outerLeft + element.width()) > 0) { return i; } } }
所以,现在我们就得到了可以简化管理者查看任务的带有自动滚动功能的雇员仪表板,如图:
请下载C#Sample:AutomateScroll_C.zip (30.40 kb)
请下载VBSample: AutomateScrollVB.zip (37.72 kb)