Question

我正在研究的内联网上有一个“每周监控工具”，它在网格中显示以下信息（据称）：公司，员工（姓名），他的预期工作时间以及他当前的每周活动

数据按周保存和过滤，全部发送到我的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 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>     
<% } %>

现在，在桌面上应用 DataTable属性：

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

看到魅力。

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

1 个答案: