如何使用表格中的列中的剔除键绑定鼠标悬停 [英] How to bind mouseover using knockout in a column in a table

问题描述

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

I am trying to bind a column in a table for mouseover event, if the cursor is over the column cell (not the column header), it will make the extended details (StrTimeDesc) visible. But when I run it, it will only display the 1st column (Work Date column) then the rest is blank.

这是我的观点:

    <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不允许发布大量的代码和较少的细节.如果我删除鼠标悬停绑定，表运行正常.鼠标悬停绑定来自基因敲除网站.

apply bindings are already done. I just omitted those parts because SO doesn't allow a post with a lot of codes and less details. If i remove the mouseover binding, the table runs fine. That mouseover bindings came from knockoutjs site.

更新: 这是我的课

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;
    }
}

这是我的数据访问权限(这成功地从数据库中检索了所有记录)

here is my data access (this successfully retrieves all records from the db)

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;
}

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

I also updated my view and knockout above

推荐答案

enableDetails和disableDetails应该以$parent为前缀，因为它们位于foreach内部.否则，敲除将在每个Timesheet_headers对象中寻找那些功能.

enableDetails and disableDetails should be prefixed with $parent as they are inside a foreach. Otherwise knockout will look for those functions inside each Timesheet_headers object.

<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对象中拥有该对象.

---

This still won't give you the expected result. workDate, Schedule_description, StrSchedDesc StrTimeDesc and IsTog should be properties of items in Timesheet_headers array. You don't need to have that in Action object.

这里也有错字. O在observable中应为小写.代替

There is also a typo here. O should be a lowercase in observable. Instead of

workDate: ko.Observable()

您应该致电

workDate: ko.observable()

此外，参考此答案和此

Also, refer this answer and this fiddle. The question is same as yours.

这篇关于如何使用表格中的列中的剔除键绑定鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！