用C1GridView制作雇员仪表板

发布时间:2014/09/23 00:09 发布者:Alice

返回博客中心

管理者用雇员仪表板速概观雇员工作流程和细节。这个演示描述了如何用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)


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网