Question

我正在尝试将表中的列绑定到mouseover事件，如果光标位于列单元格（而不是列标题）上，它将使扩展的详细信息（StrTimeDesc）可见。但是当我运行它时，它只显示第一列（工作日期列），然后其余部分为空白。

这是我的观点：

    <table class="table">
    <thead>
        <tr>

            <th>Work Date</th>
            <th>Schedule Description</th>


        </tr>
    </thead>

    <tbody data-bind="foreach: Timesheet_headers">
        <tr>
            <td data-bind="text: workDate"></td>

            <td>
                <div data-bind="event: { mouseover: @parent.enableDetails, mouseout: @parent.disableDetails }">
                    <span data-bind="text: StrSchedDesc"></span>
                </div>
                <div data-bind="visible: IsTog">
                    <span data-bind="text: StrTimeDesc"></span>
                </div>
            </td>       

        </tr>
    </tbody>
</table>

这是我的淘汰赛：

var Action =
{

    Timesheet_headers: ko.observableArray([]),
    workDate: ko.observable(),
    Schedule_description: ko.observable(),
    StrSchedDesc: ko.observable(),
    StrTimeDesc: ko.observable(),
    IsTog: ko.observable(false),

    detailsEnabled: ko.observable(false),
    enableDetails: function() {
        this.IsTog(true);
    },
    disableDetails: function() {
        this.IsTog(false);
    }
}

应用绑定已经完成。我只是省略了那些部分，因为SO不允许有大量代码和更少细节的帖子。如果我删除鼠标悬停绑定，表运行正常。 mouseover绑定来自knockoutjs网站。

更新：这是我的班级

public class Timesheet_header
{

    [Key]
    public System.long AUTO_ID { get; set; }
    public System.Int64 Employee_id { get; set; }
    public System.Int16 Schedule_id { get; set; }
    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime Work_date { get; set; }

    public string StrSchedDesc { get; set; }
    public string StrTimeDesc { get; set; }
    public bool IsTog { get; set; }

    public Timesheet_header()
    {
        IsTog = false;
    }
}

这是我的数据访问（这成功检索了数据库中的所有记录）

public static List<Timesheet_header> GetLogs(long Employee_id, DateTime DateFrom, DateTime DateTo)
{
    var items = new List<Timesheet_header>();
    var command = new SqlCommand();
    try
    {
        command.CommandText = "GetTimeSheetHeaders";
        command.CommandType = CommandType.StoredProcedure;

        command.Parameters.AddWithValue("@Employee_id", Employee_id).Direction = ParameterDirection.Input;
        command.Parameters.AddWithValue("@DateFrom", DateFrom).Direction = ParameterDirection.Input;
        command.Parameters.AddWithValue("@DateTo", DateTo).Direction = ParameterDirection.Input;

        DataTable dt = SqlHelper.GetData(command);

        if (dt.Rows.Count <= 0) return items;

        foreach (DataRow row in dt.Rows)
        {
            Timesheet_header item = new Timesheet_header();

            item.AUTO_ID = (row["AUTO_ID"]).GetLong();

            item.Employee_id = (row["Employee_id"]).GetLong();

            item.Work_date = (row["Work_date"]).GetDbDate();                   

            item.StrSchedDesc = row["Schedule_description"].GetString();

            item.StrTimeDesc = " From " + row["Time_from"].GetString() + " - To " + row["Time_to"].GetString();

            items.Add(item);
        }
    }
    catch (Exception s)
    {
        return new List<Timesheet_header>();
    }

    return items;
}

我还更新了我的观点和上面的淘汰赛

Answer 1

enableDetails和disableDetails应以$parent为前缀，因为它们位于foreach内。否则，knockout会在每个Timesheet_headers对象中查找这些函数。

<tbody data-bind="foreach: Timesheet_headers">
    <tr>
        <td data-bind="text: workDate"></td>

        <td>
            <div data-bind="event: { mouseover: $parent.enableDetails, mouseout: $parent.disableDetails }">
                <span data-bind="text: StrSchedDesc"></span>
            </div>
            <div data-bind="visible: detailsEnabled">
                <span data-bind="text: StrTimeDesc"></span>
            </div>
        </td>       

    </tr>
</tbody>

这仍然不会给你预期的结果。 workDate，Schedule_description，StrSchedDesc StrTimeDesc和IsTog应该是Timesheet_headers数组中项目的属性。你不需要在Action对象中拥有它。

这里也有拼写错误。 O中的observable应为小写字母。而不是

workDate: ko.Observable()

你应该致电

workDate: ko.observable()

此外，refer this answer和此fiddle。问题与你的问题相同。

Answer 2

您可以使用非常简单的CSS解决此问题，并使JavaScript远离此样式问题。

在表格中添加一个类，例如.show-details-on-hover。接下来，添加此CSS规则集：

.show-details-on-hover tbody td:not(:first-child) {
    display: none;
}

.show-details-on-hover tbody tr:hover td:not(:first-child) {
    display: table-cell;
}

如何在表格的列中使用knockout绑定鼠标悬停

2 个答案: