ASP.NET MVC table 样式

        ASP.NET MVC 可以将视图绑定数据，非常方便地做数据展现。具体做法是在控制器中获取数据，然后采用Return View(data)的方式将数据发送到视图，在视图中使用@model IEnumerable<T>的形式来获取数据，在数据展现时，我们使用@foreaach的方式，具体如下：

1.控制器

public ActionResult Index()
{
   return View(EmployeeViewModel.Employees);
}

2.视图

@model IEnumerable<AspNetMvcDemo.Models.Employee>

3.展示

<table>
    @foreach (var item in @Model)
    {
        <tr>
            <td>@item.Id</td>
            <td>@item.EmloyeeId</td>
            <td>@item.EmloyeeName</td>
            <td>@item.Role</td>
            <td>@item.Department</td>
        </tr>
    }
</table>

效果如下：

非常朴素的效果，并不美观，可以请美工做一些工作，但是美工通常给出的样式是静态页面的。他们只会给出行在选中状态下的css class及鼠标滑过的时候的css class，但是问题来了，我们的这个列表是根据数据生成的，如果给tr标签增加选中的class，所有的行都是选中的，同理，也不能给鼠标滑过的css，这时候我们需要自己写行的mouseover和mouseout函数，同时还要实现click的函数。听起来复杂，做起来很简单。

1.css 样式

<style type="text/css">
    .on{
        background-color:red
    }
    .over{
        background-color:lightblue
    }
    .out{
        background-color:#FFFFFF
    }
</style>

2.js

<script type="text/javascript">
    $(document).ready(function () {
        $("tr").mouseover(function () {
            $(this).addClass("over");
        })

        $("tr").mouseout(function () {
            $(this).removeClass("over");
        })

        $("tr").click(function () {
            $(this).removeClass("over")
            $(this).removeClass("over").addClass("on");
        })
    });
</script>

3.列表

<table id="tab">
    @foreach (var item in @Model)
    {
        <tr>
            <td>@item.Id</td>
            <td>@item.EmloyeeId</td>
            <td>@item.EmloyeeName</td>
            <td>@item.Role</td>
            <td>@item.Department</td>
        </tr>
    }
</table>

效果如下：

鼠标滑过和鼠标选中的样式就都有了。

有的同学会提到多行选中的问题，通常是加check box列，这个有待研究。