使用JQuery突出显示MvcContrib Grid中的选定行

时间:2012-02-10 20:40:22

标签: jquery asp.net-mvc mvccontrib mvccontrib-grid

我是MVC和jQuery的新手。我有一个MvcContrib网格。我有一个选择链接来选择要带来数据的行,所以我已经有一个关于该点击的功能。我可以将选定的行突出显示添加到同一个功能。这是我的代码的样子片段。

@Html.Grid(Model).Columns(column =>
{
  column.Custom(@<a href='#@item.ID' onclick='getContactDetails(@item.ID); 
  return false;'>Select</a>);
  column.For(x => Html.ActionLink("Edit", "Edit", "Contact", new { id = x.ID, 
  socialcommunityid = x.SocialCommunityID },new { @class = "openDialog", data_dialog_id 
  = "editContactDialog", data_dialog_title = "Contact Details" }) 
  ).Named("").Sortable(false);
})


//This is the function that is already present
function getContactDetails(communityContactID)
{
  //Some code to fetch data
}

有人可以帮我突出显示所选行吗?

1 个答案:

答案 0 :(得分:1)

您可以在其中创建一个包含所需样式的新css类。将此类添加到单击处理程序内的currnet行。将另一个参数this传递给getContactDetails,这有助于我们获取相应的行。试试这个。

的CSS

.selected{
    background: "someColor";
}

的js

function getContactDetails(communityContactID, obj)
{
    //This will remove selected class from previous selection
    $(this).closest('table').find('tr').removeClass('selected');

    //This will add the selected class to current row
    $(this).closest('tr').addClass('selected');

    //Some code to fetch data
}