65.9K
CodeProject 正在变化。 阅读更多。
Home

第 3 部分：在 ASP.NET 中实现 w2ui – 远程数据源

bapak71
starIconstarIconemptyStarIconemptyStarIconemptyStarIcon

2.00/5 (1投票)

2018 年 12 月 19 日

CPOL

1分钟阅读

viewsIcon

7509

如何实现带有远程数据源的 w2ui 网格

引言

在我的上一篇帖子中，我已经分享了如何使用本地数据源来实现它。在这里，我想分享如何实现带有远程数据源的 w2ui 网格。

1. 控制器

使用远程数据源，w2ui 网格需要在用户选择时从控制器加载数据

  • sort
  • search
  • 上下滚动（在需要时）

为此目的，我在控制器中创建了相关的函数。

LoadRecords

  • 这是我从数据库加载记录的主要函数。
  • 稍后我会展示如何从 w2ui 网格调用此函数。
public string LoadRecords()
{
  string filter = RequestQueryString();
 
  IEnumerable<Task> records = db.Task
      .SqlQuery("SELECT * FROM Tasks " + filter);

  var jsonData = JsonConvert.SerializeObject(records);
  return jsonData;
}

RequestQueryString

此函数根据用户请求生成查询 string

protected string RequestQueryString(string query = "", string defaultorder = "Id")
{
  string filter = query;
  var req = Request.Form["request"];
  if (req == null) { return filter; }

  JObject r = JObject.Parse(req);
  int limit = (int)r["limit"];
  int offset = (int)r["offset"];

  JArray search = (JArray)r["search"]; // field + type + operator + value
  if (search != null)
  {
    string SearchLogic = (string)r["searchLogic"];
    foreach (JObject o in search.Children<JObject>())
    {
      if (filter == query)
         filter += (query == "" ? "WHERE (" : " AND 
         (") + " (" + SearchFilter(o) + ") ";
      else
         filter += SearchLogic + " (" + SearchFilter(o) + ") ";
      }
      filter += ")";
    }

    JArray sort = (JArray)r["sort"];
    filter += SortFilter(sort, defaultorder);

    return filter + " OFFSET " + offset + 
      " ROWS FETCH NEXT " + limit + " ROWS ONLY";
}

SearchFilter

protected string SearchFilter(JObject o)
{
  string field = (string)o["field"];
  string opt = (string)o["operator"]; //'is', 'between', 
  //'begins with', 'contains', 'ends with'

  string val = (opt != "between" ? (string)o["value"] : "");

  switch (opt)
  {
    case "is":
      val = FormatDate(val);
      return (field + " = '" + val + "'");
    case "begins":
      return (field + " LIKE '" + val + "%'");
    case "contains":
      return (field + " LIKE '%" + val + "%'");
    case "ends":
      return (field + " LIKE '%" + val + "'");
    case "before":
    case "less":
      return (field + " < '" + FormatDate(val) + "'");
    case "after":
    case "more":
      return (field + " > '" + FormatDate(val) + "'");
    case "between":
      string d1 = FormatDate((string)o["value"][0]);
      string d2 = FormatDate((string)o["value"][1]);
      return (field + " BETWEEN '" + d1 + "' AND '" + d2 + "'");
    default: return "";
  }
}

SortFilter

protected string SortFilter(JArray sort, string defaultorder)
{
  if (sort == null)
    return " ORDER BY " + defaultorder;

  string ssql = "";
  foreach (JObject o in sort.Children<JObject>())
  {
    string field = (string)o["field"];
    string order = (string)o["direction"];
    ssql += (ssql == "" ? " ORDER BY " : ", ");
    ssql += field + (order == "asc" ? " ASC" : " DESC");
  }
  return ssql;
}

FormatDate

private string FormatDate(string input)
{
  DateTime d;
  if (DateTime.TryParseExact(input, "dd-MM-yyyy", 
        CultureInfo.InvariantCulture, 
        DateTimeStyles.None, out d))
  {
    return d.ToString("yyyy-MM-dd");
  }
  return input;
}

注释

  • 我几乎在每个控制器中都使用这些函数。
  • 我需要更改的唯一内容是 LoadRecords 函数内部的模型和表名。

2. 视图

索引页示例

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

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

@section Scripts {
   @Scripts.Render("~/w2ui/js")

   <script>
      $(document).ready(function () { 
         $('#indexGrid').w2grid({
            name: 'indexGrid',
            url: {
               get: '@Url.Action("LoadRecords")',
            },
            columns: [ 
               { field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
               { field: 'fname', caption: 'First Name', size: '30%', sortable: true },
               { field: 'email', caption: 'Email', size: '40%', sortable: true },
               { field: 'sdate', caption: 'Start Date', size: '120px', sortable: true }
            ],
            searches: [
               { field: 'fname', caption: 'First Name', type: 'text' },
               { field: 'email', caption: 'Email', type: 'text' },
            ],
          });           
       });
   </script>
}
  • 定义指向 w2ui CSS 和 JavaScript 的链接
    @Styles.Render("~/w2ui/css")
@Scripts.Render("~/w2ui/js")
  • 将 url 属性定义为 LoadRecords
    url: { 
    get: '@Url.Action("LoadRecords")', 
},
  • 定义 sortable: true 以启用所选字段的排序
    columns: [ 
  { field: 'lname', ... , sortable: true }, 
  ....
],
  • 定义 search 字段
    searches: [ 
   { field: 'fname', caption: 'First Name', type: 'text' }, 
   { field: 'email', caption: 'Email', type: 'text' }, 
],

就这样，我们可以开始了。我上传了一个视频来展示如何在我的项目中真正实现它。如果您在理解给定的示例时遇到问题，请尝试观看此视频。

在下一篇帖子中，我计划分享如何在 w2ui 网格中进行内联编辑。

下次再见！

参考

© . All rights reserved.