在我的 ASP.NET MVC 页面的网格中显示信息

Question

我正在使用的内联网上有一个 "Weekly Monitoring tool"，它在网格中（假设）显示以下信息：公司、员工（姓名）、他的预计工作时间和他当前的工作时间每周 activity.

数据每周保存和过滤，全部发送到我的 WeeklyMonitoring.aspx 视图。

问题是我似乎无法找到一种方法来将其显示为网格，干净利落，将每个信息分开以使其更易于阅读。

这是我的观点的相关部分：

<table width="300" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>Company</th>
        <th>Employee</th>
        <th>Expected Time</th>
        <th>Activity</th>
    </tr>

    <%            
    int i = 0;
    foreach (var name in ViewBag.Names)
    {
        if ((string)ViewBag.Names[i] != null)
        { %>  

            <td><%= (string)ViewBag.Company[i]%></td>
            <td><%= (string)ViewBag.Names[i]%></td>
            <td> --- </td>
            <td><%= (string)ViewBag.RecTime[i]%></td>           
      <%} %>
            <%i++; %>         
    <%      
    }
    %>

</table>

它确实将它显示为一个板，用空格分隔信息，我怎样才能创建一个看起来干净的网格，因为它应该是？

Answer 1

JQuery DataTables 是一个很棒的插件，使用起来非常简单。 首先，添加插件：

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">      
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>     
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

然后正确格式化 table：

<table id ="table_id" class="display">
  <thead>
      <tr>
          <th>Company</th>
          <th>Employee</th>
          <th>Expected Time</th>
          <th>Activity</th>
       </tr>
  </thead>   

<%            
int i = 0;
foreach (var name in ViewBag.Names)
{
   <tr>
    if ((string)ViewBag.Names[i] != null)
    { %>  

        <td><%= (string)ViewBag.Company[i]%></td>
        <td><%= (string)ViewBag.Names[i]%></td>
        <td> --- </td>
        <td><%= (string)ViewBag.RecTime[i]%></td>           
  <%} %>
        <%i++; %>    
 </tr>     
<% } %>

现在，应用 table 上的 DataTable 属性：

 <script>
 $(document).ready(function () {
        $('#table_id').DataTable();
    });
</script>

一睹魅力。

在我的 ASP.NET MVC 页面的网格中显示信息

Displaying information in a grid on my ASP.NET MVC page

asp.net-mvc

grid-layout