编辑后突出显示行 [英] highlight row after edit

问题描述

我有一个显示数据的mvc表。每行都有一个编辑按钮。单击编辑时，会弹出一个（jquery对话框）进行编辑。现在我要做的是突出显示编辑后保存的行。所以用户可以看到他们正在进行哪一行。



我尝试的东西很少---->我在每一行中添加了一个隐藏的ID。然后在我的保存/更新操作中，我设置了ViewBag.CurrentID = id。现在我比较两个，如果他们是euqal higlight行。



我认为的问题是1.在我的保存方法中我有RedirectToAction重置viewbag 。 2.如果id匹配，我不知道怎么识别然后行



View包的替代方法是使用ViewData并访问我的jquery。现在我不知道怎么做，我在google搜索后尝试了几次，但它没有用。



这是我的表

I have a mvc table that displays data. Each row has a edit button. When you click edit there is a pop up(jquery dialog) for editing. Now what i am trying to do is highlight the row have been saved after edit. So the users can see which row they were working on.

There are few things i tried ----> I added a hidden for ID in each row. then in my Save/Update action I set ViewBag.CurrentID = id. Now i compare the two if they are euqal higlight the row.

The problem with what i thought was that 1. in my save method i have RedirectToAction which resets the viewbag. 2. I dont know how to identify then row if id is a match

the alternative to View bag was to use ViewData and accessing my jquery. Now i do not know how to do that I tried couple of way after googling but it did not work.

Here is my table

<table class="searchResult" id="tblSearchResult" border="1" width="100%">
    <thead>
        <tr>
            <th>
                Last Name
            </th>
            <th>
                Middle Name
            </th>
            <th>
                First Name
            </th>
            <th>
            </th>
        </tr>
     </thead>
     <tbody>
        @foreach (var item in Model.SearchResultsPerPage)
           {
                        <tr class="parent">
                            <td>
                                @item.LastName
                            </td>
                            <td>
                                @item.MiddleName
                            </td>
                            <td>
                                @item.FirstName
                            </td>
                            <td valign="middle">
                                <input type="image" src="../../Content/themes/base/Images/edit-icon.png" style="height:1.5em; width: 1.5em;" id="editRow" onclick="EditCurrentRow(@item.AdminID); return false;" />
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

推荐答案

@Sunasara Imdadhusen - 非常真实。很多时候我从这些论坛中受益。我也应该尽我所能。 :)



所以我所做的就是在我身上，我添加了id。所以每个foreach行都会呈现一个唯一的id。



< tbody>

@foreach（Model.SearchResultsPerPage中的var项目）

{

< tr class =parentid =[e-mail]（）>

< td>

@ item.LastName

< / td>

< td>

@ item.MiddleName

< / td>

< td>

@ item.FirstName

< / td>

< td valign =middle>

< input type =imagesrc =../../内容/主题/基/图片/编辑的icon.png风格=高度：1.5em; width：1.5em;id =editRowonclick =EditCurrentRow（@ item.AdminID）;返回false;/>

< / td>

< / tr>

}

< / tbody>



然后将ID传递给模型并突出显示行



var editedID =''@ Model.EditedID''

if（editedID！= null）{

var rowName =CurrentEditedRow - + editedID;

@Sunasara Imdadhusen -- that is very ture. Many times i have benefited from these forums. I should also do my part. :)

So what I did was in my body tr I added id. so for each foreach rows renders a unique id.

<tbody>
@foreach (var item in Model.SearchResultsPerPage)
{
<tr class="parent" id="[e-mail]()">
<td>
@item.LastName
</td>
<td>
@item.MiddleName
</td>
<td>
@item.FirstName
</td>
<td valign="middle">
<input type="image" src="../../Content/themes/base/Images/edit-icon.png" style="height:1.5em; width: 1.5em;" id="editRow" onclick="EditCurrentRow(@item.AdminID); return false;" />
</td>
</tr>
}
</tbody>

Then its a matter of passing the id to view via model and highlighting the row

var editedID = ''@Model.EditedID''
if (editedID != null) {
var rowName = "CurrentEditedRow-" + editedID;

（'''''+ rowName）.css（{

''font-weight''：' '更大胆'，

''font-size''：''14px''，

''color''：''＃000099''

}）;

}

(''#'' + rowName).css({
''font-weight'': ''bolder'',
''font-size'': ''14px'',
''color'': ''#000099''
});
}

这篇关于编辑后突出显示行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！