第 2 部分：在 ASP.NET MVC 中实现 w2ui – w2ui Grid

bapak71

2.33/5 (3投票s)

2018 年 12 月 19 日

CPOL

2分钟阅读

9148

如何在 ASP.NET MVC 中实现 w2ui - w2ui grid

引言

在我的第一篇文章中，我展示了如何在您的 ASP.NET 项目中配置 w2ui。如果您熟悉 ASP.NET MVC 项目，View 通常附带 Index、Create、Edit 和 Details 页面。

Index 页面是我经常使用 w2ui grid 替换标准 HTML 表格的地方。使用 w2ui grid，您不必再担心 搜索、排序和分页。感谢作者 Vitamila，他付出了很多努力使这个库如此易于使用。

在本文中，我将向您展示如何在我的 ASP.NET 项目中实现 w2ui grid。

注意 – 我不会深入解释 w2ui，因为您可以从 w2ui 官方页面获得更多详细信息。

W2UI Grid

如果您参考文档，它为我们提供了两个关于如何将数据加载到 w2ui grid 的示例，即 本地和远程数据源。

示例 1 – 本地数据源

在我之前使用 w2ui 的尝试中，我按照本地数据源的示例实现了它。我这样做的方式如下。

步骤 1 – 在 Index 页面中添加模型和对 w2ui CSS 的引用

@model IEnumerable<w2uiproject.Models.TaskReport>

@Styles.Render("~/w2ui/css")

注意：请参考之前的文章，了解我如何将 w2ui 添加到我的项目中。

步骤 2 – 添加 div 标签，您想放置 w2ui Grid 的位置

<div id="indexGrid" style="width: 100%; height: 400px; overflow: hidden;"></div>

在这里，我们声明 div 具有 400px 的高度，并且具有容器的完整宽度
Overflow : hidden – 如果网格高度超过 400px，则显示滚动条

步骤 3 – 添加对 w2ui JavaScript 的引用并创建 JavaScript

示例（使用键盘箭头键滚动代码）

@section Scripts {
@Scripts.Render("~/w2ui/js")   // this is required
<script>
$(document).ready(function () {

  $('#indexGrid').w2grid({     
    name: 'indexGrid',
    header: 'List of order',
    show: {      // config grid toolbar, header and footer
      toolbar: true,
      header: true,
      footer: true,
      toolbarAdd: false,
      toolbarDelete: false,
      toolbarEdit: false
    },
    columns: [   // define grid columns
      { field: 'rec1', caption: 'Task', sortable: true, size: '20%' },
      { field: 'rec2', caption: 'Task Date', sortable: true, size: '15%', render: 'date' },
      { field: 'rec3', caption: 'Start Time', sortable: true, size: '10%' },
      { field: 'rec4', caption: 'End Time', sortable: true, size: '10%' },
      { field: 'rec5', caption: 'Duration', size: '10%' },
      {
        field: 'rec6', caption: 'Status', sortable: true, size: '12%',
        render: function (record) { 
           var html;
           if (record.status == 1) {
             html = '<p style="background: blue; color: white;" >Completed<\p>';
           }
           else if (record.status == 2) {
             html = '<p style="background: red; color: white;" >Error<\p>';
           }
           else if (record.status == 3) {
             html = '<p style="background: yellow; color: white;" >Warning<\p>';
           }
           else if (record.status == 4) {
             html = '<p style="background: gray; color: white;" >Cancel<\p>';
           }
           else {
             html = '<p>In Progress<\p>';
           }

           return html;
         }
      },
    ],

    searches: [   // define search options
      { field: 'rec1', caption: 'Task', type: 'int' },
      { field: 'rec2', caption: 'Task Date', type: 'date' },
      { field: 'rec6', caption: 'Status', type: 'list', 
        options: { items: ['Complete', 'Error', 'Warning', 'Cancel', 'In Progress'] } },
    ],

    records: [    // define record items - from model send from controller
      @foreach (var item in Model)
      {
         DateTime dStart = Convert.ToDateTime(@item.StartTime);
         DateTime dEnd = Convert.ToDateTime(@item.EndTime);
         int d1 = 0;

         if (@item.Status == 1)
         {
            d1 = dEnd.Subtract(dStart).Seconds;
         }

         @: { recid: '@item.Id', rec1: '@item.TaskName', rec2: '@dStart', 
         rec3: '@dStart.ToString("HH:mm")', rec4: '@dEnd.ToString("HH:mm")', 
         rec5: '@d1 sec', status: '@item.Status' }, 
      }
    ], // records

  });  // #indexGrid
});    // doc ready

</script>
}

关于示例的说明

w2ui grid 使用本地数据源，因为我们在加载页面时一次发送所有记录。
w2ui 在排序或搜索期间不必从服务器获取任何数据。
在上面的例子中，我也展示了如何
- 渲染 日期 (rec2) 和 时间 (rec3, rec4)
- 在 rec5 中显示计算数据
- 根据 rec6 上的状态显示不同的单元格颜色
请参考 w2ui 页面，了解如何配置和显示记录的详细信息。
至少，您应该了解这些属性或方法
- 显示
- Columns
- 搜索
- 记录
您应该熟悉 w2ui 页面中提供的演示和文档。
如果您仍然感到困惑，请尝试观看此 YouTube 视频，其中我展示了如何在我的 ASP.NET 项目中执行此操作。

示例 2 – 远程数据源

关于远程数据源的示例，我将在我的下一篇文章中继续。