报表:JS自定义隐藏/显示sheet页面

在报表的使用过程中,有一种特殊需求:针对某个多sheet页面的报表,需要针对不同的用户,隐藏/显示不同的sheet页面,从而达到权限控制的效果,同时,需要将这种功能实现可视化,由使用者来控制不同用户的权限和更新权限,不由开发人员默认设置。

在常规的报表制作中,一般都是根据业务上的使用规定,开发时就已经做好了多个页面,事先设置好不同用户具有什么权限,可以查看什么页面了;此处因为使用者需要自己根据业务情况控制不同用户的可查看页面,就不可以使用上面的方案了。

这里提供的方案是:在已有一张多sheet页面报表的情况下,制作一个可视化的填报报表,分组罗列所有用户和报表sheet,供使用者针对不同的用户勾选不同的可视页面,并将结果储存起来,最后,在多sheet报表的“加载起始”中添加javascripts事件,使得页面初始加载时,获取当前用户并查询该用户具有哪些sheet的查看权限,根据返回的结果,对应地隐藏/显示对应的sheet。

如下:

1、用户权限可视化界面示例:

2、多sheet报表界面设计:

3、javascripts事件编辑

代码如下:

//示例隐藏sheet标签1、3的页面
sheet=[1,3];
//隐藏sheet标签为1、3的标签
$.each(sheet,function(index, value) {
    $('[title="' + value + '"]').hide();
})
//隐藏sheet标签为1、3的页面,此处主要是隐藏sheet标签为1的页面,因为前面的步骤只隐藏了标签没有隐藏页面
$.each($('.mr-sheetbutton-container'),function(index, value) {
    if(!($(value).is(':hidden'))){
        $(value).click();
        return false;
    }
})

4、效果图:

如上,制作一个可视化的填报页面,供使用者自定义不同用户的可查看页面并保存起来;再根据这一前提,在多sheet报表加载起始时,读取当前用户信息并查询当前用户的可查看权限,显示/隐藏不同的页面(此处示例隐藏sheet为1、3的页面,不显示读数据库数据步骤),即可满足上述需求,使用者就可以灵活地选择和更新不同用户的查看权限和数据权限,开发者也可以省去复制粘贴生成多个报表再根据不同用户去设置不同权限的多次步骤。

这一方案,可以让使用者在前端页面就完成不同用户的权限控制,不需要进入后台,甚至读懂代码再做用户权限设置,个人认为是一个比较舒适的权限控制的体验。

猜你喜欢

转载自blog.csdn.net/wang1qqqq/article/details/85611973