动态更改某些数据绑定数据列表项的光标样式？答案

【问题标题】：Dynamically change cursor style for certain databound datalist items?动态更改某些数据绑定数据列表项的光标样式？
【发布时间】：2016-04-22 20:23:34
【问题描述】：

我有一个绑定到datatable 的datalist，如下所示：

EmpId    RoomNum
A230     201
A235     202
null     203
F520     204
null     205

如您所见，有些 RoomNum 没有 EmpId。这些是将光标样式更改为“手”的项目。具有 EmpId 的数据列表项将具有“否”光标样式。这仅适用于数据列表。

这是我的数据列表：

<asp:DataList ID="DataListThumb" runat="server" RepeatColumns="5" >
    <ItemTemplate>
        <div style="padding: 8px;width:72px;height:72px">
        <asp:LinkButton id="LinkButton1" runat="server" OnClientClick='<%# "return ShowRoom(" + Eval("RoomNum") + ");" %>'>
            <div style='width:72px;height:72px; background-image:url(<%# Eval("image_path") %>)'>
                <div style="width: 72px; padding-top: 3px; overflow: hidden;">
                    <div style="text-align: left; width:72px; float:left;">
                        <asp:Label ID="Label1" CommandName="cmd_RoomNum" CommandArgument='<%# Eval("RoomNum")%>' 
                        runat="server" Text='<%# Eval("RoomNum")%>' Font-Size="11pt"></asp:Label>
                    </div>
                </div>
            </div>
        </asp:LinkButton>
    </ItemTemplate>
</asp:DataList>

那么如何在数据列表项中动态更改光标样式？

谢谢。

【问题讨论】：

标签： javascript c# css asp.net asp.net-4.0

【解决方案1】：

我会在这里做几件事：

添加以下 CSS 类：

.noEmpId {
    cursor: not-allowed;
}

.validEmpId {
  cursor: pointer;
}

然后，我假设您想要 LinkButton 上的光标样式，所以在您的 LinkButton 中执行以下操作：

<asp:LinkButton CssClass='<%# Eval("EmpId") == null ? "noEmpId" : "validEmpId" %>' id="LinkButton1"></asp:LinkButton>

但这并不能阻止任何人点击该按钮。如果你想这样做，那么你需要类似..

<asp:LinkButton OnClientClick='<%# Eval("EmpId") == null ? "return false;" : "return ShowRoom(" + Eval("RoomNum") + ");" %>' id="LinkButton1"></asp:LinkButton>

【讨论】：

更改Enabled 属性的好方法。
感谢您的建议。我将Enabled='<%# Eval("ClientId") == null ? "false" : "true" %>' 添加到LinkButton，但出现编译错误Cannot convert type 'string' to 'bool'。可能是什么问题？ ClientId 的类型为 int。
抱歉，请尝试删除“false”和“true”周围的引号。它试图将“false”或“true”（字符串）转换为它无法做到的布尔值。让我知道它是否有效，我会更新回复。至少现在删除它们时不会出现编译错误。
我确实发现了一个问题。似乎LinkButton.Enabled 属性不会影响OnClientClick。所以它可以设置为 false 但OnClientClick 仍然被执行。
哎呀没有意识到你有一个 OnClientClick 在那里。您应该能够采用我在 OnClientClick 方法中的内容并执行以下操作。实际上我会更新我的答案。 return false 应该阻止客户端代码执行。

【解决方案2】：

您可以通过 css 控制光标的外观。您可以在您的 css 中定义以下两个类。

.cursor-hand { cursor: pointer }
.cursor-no { cursor: not-allowed }

然后您可以有条件地将该类应用于您的项目。这有点令人费解。但是你可以像这样在你的代码中定义一个方法：

public string GetStyle(string empId) 
{
    return empId == null ? "cursor-hand" : "cursor-no";
}

然后在你的 ItemTemplate 某处，不确定是哪个元素。

<div class='<%# GetStyle(Eval("empId")) %>' ...> ... </div>

我希望这能回答你的问题。

话虽如此，我不确定这是否会完全达到预期的结果。仅仅因为光标为“否”并不意味着您不能点击某个项目。

【讨论】：