可复用的页面顶栏功能集中区解决方案（母版页与子页面数据交换方案）

Chelsey.Wang

# 1. 问题场景
我想用活字格替换公司原先的ERP系统，希望在界面结构上与原先保持相似，减少学习成本，故希望在数据显示页的顶部集中一个功能区，如下图所示：
image.png773225707.png

如果单纯在页面的顶部添加按钮，当表格中的单元列宽配置为范围模式以适应屏幕拉伸时，会出现按钮变形或间距变化：
image.png400011901.png

于是我使用了母版页的功能，将所有的按钮放在母版页上，解决了按钮的变形，以及实现了该功能区的复用。

但是母版页的按钮如何控制子页面上的表格呢？

# 2. 解决方案
首先，我在子页面的隐藏列添加了控制表格的功能按钮：
image.png335025023.png

之后，为这三个功能按钮添加类名：
image.png246049498.png

在母版页的按钮命令中通过jquery获取子页面指定单元格（利用类名），控制功能按钮：
image.png516692199.png

注意：由于单元结构在HTML中有多层，可对照页面中的元素编写代码。

# 3. 扩展
通过读取子页面指定单元格的内容，我们可以对母版页的功能区按钮进行修改，隐藏，以适应不同的表格。

amtath · amtath

其实也可以用横向菜单方案，一个控件整体布局，一样棒棒的，而且不绕弯弯。

Epimenides · Epimenides

amtath 发表于 2022-2-26 22:14
其实也可以用横向菜单方案，一个控件整体布局，一样棒棒的，而且不绕弯弯。

ok 学习感谢指教

scliudong · scliudong

amtath 发表于 2022-2-26 22:14
其实也可以用横向菜单方案，一个控件整体布局，一样棒棒的，而且不绕弯弯。

好思路

		自动登录	找回密码
密码			立即注册

[使用感受] 可复用的页面顶栏功能集中区解决方案（母版页与子页面数据交换方案）