LightSwitch HTML Client (VS2013 Update 4) - 如何以编程方式隐藏列？

Question

示例：我们有一个 Customers 的 VisualCollection，Customer 有 3 个字段 ID、Name 和 FavoriteFood，都绑定到 table 中的列，但在运行时我们可能需要隐藏 FavoriteFood 列基于基于其他一些逻辑的结果。

我已经能够在列（如 FavoriteFood_postRender）甚至行模板（RowTemplate1_postRender）上执行 _postRender 并为 contentItem 切换 isVisible = false 以获得特定table 单元格（td 元素）不显示，但在这两种情况下，table header（第）单元格仍然存在。

hacky 解决方法是做类似 $('th:nth-child(3),td:nth-child(3)').hide() 的事情，尽管你需要足够晚地做这个才能真正工作（table 的 postRender 发生例如，虽然 collection 仍然是空的，并且第 th 个元素存在，但是 td 个元素还没有，所以你可以把第 th 个隐藏在那里，但是你需要 contentItem.dataBind 在 td 单元格上做 N 种不同的隐藏，这有点难看），但我试图找出是否有通过内容项隐藏列的方法，因为它们都有 isVisible 并且看起来是正确的藏东西的方法。

谢谢！

Answer 1

对于运行的其他人，我无法弄清楚使用 isVisible 和类似 LightSwitch 模型属性的编程方法，所以基本上做了一些类似于问题状态的事情。我想我可以用 "td:nth-child(4),th:nth-child(4)" 将每一对组合成 1 行，但这对我来说已经足够了。

.hideColumn4               td:nth-child(4)   { display:none !important; } 
.hideColumn4               th:nth-child(4)   { display:none !important; } 

.hideColumn5               td:nth-child(5)   { display:none !important; } 
.hideColumn5               th:nth-child(5)   { display:none !important; } 

.hideColumn6               td:nth-child(6)   { display:none !important; } 
.hideColumn6               th:nth-child(6)   { display:none !important; }

然后在 table 的 postRender 中，在找出要隐藏的那些之后，我会做类似的事情：

if (conditionForHidingColumn4) {
    $(element).addClass('hideColumn4');
}

通过在 table 的 postRender 中执行此操作，我可以确保将那些类添加到我想要的 table 而不会影响任何其他 tables.

LightSwitch HTML Client (VS2013 Update 4) - 如何以编程方式隐藏列？

LightSwitch HTML Client (VS2013 Update 4) - how to hide column programmatically?

visual-studio-lightswitch