twitter-bootstrap 面板展开和按钮出现在每个表行 - MVC 5/Bootstrap 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23897339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Panel Expansion and Button Appear Per Table Row - MVC 5/Bootstrap 3
提问by Austin
I have been learning and playing with both MVC and Bootstrap and now I am wanting to take on a new challenge in order to make my dummy site more flexible and less congested. To do this I want to implement two more features on my display tables but I am unsure how I should go about this.
我一直在学习和使用 MVC 和 Bootstrap，现在我想接受一个新的挑战，以使我的虚拟站点更加灵活且不那么拥挤。为此，我想在我的显示表上实现另外两个功能，但我不确定我应该如何去做。
The first feature is to make all my buttons hidden, except for when my mouse is on the table's respective row. i.e.As I move my mouse down the table, each row's buttons will briefly appear while the mouse is over their row.
The second feature is that I also want to be able to expand each row to display additional information i.e.Right now my table shows data for movie name, actor, role, and release date. When I click on a row, I want it to slightly expand down to show all the additional information I have, such as movie description, rating, ect...
第一个功能是隐藏我的所有按钮，除非我的鼠标位于表格的相应行上。 即当我在表格中向下移动鼠标时，当鼠标悬停在其行上时，每一行的按钮都会短暂出现。
第二个功能是我还希望能够扩展每一行以显示附加信息，即现在我的表显示电影名称、演员、角色和发行日期的数据。当我单击一行时，我希望它稍微向下展开以显示我拥有的所有附加信息，例如电影描述、评级等...
Here is my current page online.
这是我当前的在线页面。
Here is my View code.
这是我的查看代码。
@model IEnumerable<WebApplication2.ViewModels.Starring.StarringViewModel>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
<div class="panel-heading">
<span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-star"></span>Starring</span></span>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" style="margin:3px; width:32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Movie")';return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
<button type="button" style="margin: 3px; width: 32.8%" class=" btn btn-success col-lg-3 col-xs-3" onclick=" location.href='@Url.Action("Create", "Employee")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Employee</span></button>
<button type="button" style="margin: 3px; width: 32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick=" location.href='@Url.Action("Create", "Show")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Showing</span></button>
</div>
</div>
<table class="table table-striped table-hover table-responsive table-condensed">
<tr>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Movie Name</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Actor</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Role)</span></h3>
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td class="col-lg-2">
<span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieName)</span>
</td>
<td class="col-lg-2">
<span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieReleaseDate)</span>
</td>
<td class="col-lg-1">
<span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.employeeName)</span>
</td>
<td class="col-lg-1">
<span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Role)</span>
</td>
<td class="col-lg-3">
<button type="button" class="btn btn-warning col-lg-3" onclick="location.href='@Url.Action("Edit", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
<button type="button" class="btn btn-info col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Details", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-align-justify"></span>Details</button>
<button type="button" class="btn btn-danger col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.movieID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</td>
</tr>
}
</table>
</div>
And here is my ViewModel. (Which has some extra information that I would like to display upon a row being clicked)
这是我的 ViewModel。（其中有一些我想在单击一行时显示的额外信息）
namespace WebApplication2.ViewModels.Starring
{
public class StarringViewModel
{
public int movieID { get; set; }
public int roleID { get; set; }
public int employeeID { get; set; }
public string movieName { get; set; }
public string movieDescription { get; set; }
public DateTime? movieReleaseDate { get; set; }
public string Role { get; set; }
public string employeeName { get; set; }
public DateTime employeeBirthdate { get; set; }
}
}
Thank you!
谢谢！
采纳答案by user1987392
I can help you with the first one by looking at some old code.
我可以通过查看一些旧代码来帮助您解决第一个问题。
All my rows have the '.element-row'class. The last <td>in each row, has a <div>(hidden by default, with a '.element-options'class) with some buttons.
我所有的行都有'.element-row'课程。<td>每行的最后一个<div>（默认隐藏，带有一个'.element-options'类）和一些按钮。
Then some JavaScript & jQuery:
然后是一些 JavaScript 和 jQuery：
$('.element-row').hover(
function () {
hideAllElementOptions();
var row = $(this);
var elementOptions = row.find(".element-options");
elementOptions.css({
opacity: 0,
display: 'inline-block'
}).animate({ opacity: 1 }, 0); // your parameters here
},
function () {
var row = $(this);
var elementOptions = row.find(".element-options");
elementOptions.css({
display: 'inline-block'
}).animate({ opacity: 0 }, 0); // your parameters here
}
);
For the second feature, you could add some onClickevent listener (to the table row) that performs an AJAX request to get the necessary data (return JSON or a Partial View) and populate something in the page.
对于第二个功能，您可以添加一些onClick事件侦听器（到表行），该侦听器执行 AJAX 请求以获取必要的数据（返回 JSON 或部分视图）并在页面中填充某些内容。
I'm not sure how you can expand a table row (if it was a <div>, it would be easier), but check this question: Can a table row expand and close?
我不确定如何扩展表格行（如果是<div>，它会更容易），但请检查这个问题：表格行可以扩展和关闭吗？
