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

使用 MVC 和 Entity Framework 进行 CRUD 操作的类似 GridView 的 jQuery 插件

用户 4835047
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.95/5 (8投票s)

2013年12月23日

CPOL

4分钟阅读

viewsIcon

34929

downloadIcon

1001

轻量级、可自定义的控件，用于显示类似GridView的JSON数据

引言

在上一篇文章中，我探索了一种将SQL DataTable中的JSON数据推送到浏览器的方法。当然，还有很多其他方法可以生成表格形式的JSON数据，包括Entity Framework集合。然而，在数据的前端显示和客户端处理方面，我没有找到很多可用的控件，而且找到的那些都相当庞大。

所以，我决定玩玩JavaScript，希望能弄出一些对他人有用的东西。

背景

这是我开发一个类似GridView的轻量级控件的第一次尝试，它不怎么依赖jQuery，也不是一个插件。它是一个简单的JavaScript对象，里面零星地使用了一些jQuery函数。我意识到这在嵌套多个控件方面存在局限性，所以将来我可能会尝试开发一个实现相同功能的jQuery插件。

Using the Code

服务器端代码与上一篇文章相同：将SQL DataTable转换为JSON的简单方法（MVC），其目的是从硬编码的示例DataTable生成一些JSON格式的数据并将其发送到浏览器。

服务器端控件如下所示

public JsonResult GetJsonPersons()
{
    ViewModels.DataAccessLayer oDAL = new ViewModels.DataAccessLayer();

    DataTable dtPersons = oDAL.GetTable();
    List<Dictionary<string, object>> lstPersons = oDAL.GetTableRows(dtPersons);

    return Json(lstPersons, JsonRequestBehavior.AllowGet);
}

客户端包含一些JavaScript包含对象

  • jquery-1.10.2.min.js - jQuery库
  • gridview.js - JavaScript对象，在此描述
  • bpopup.js - Bjoern Klinggaard开发的用于模态弹出窗口的小型jQuery插件，当您希望在GridView列中使用超链接时，它会被一个回调函数使用，有关更多信息请参见下文。

HTML body仅包含两个div元素，它们是GridView和模态弹出窗口使用的根元素

<body > 
    <div id="Grid1_"></div>
    <div id="Grid1_PopUp"></div>
</body >

GridView对象通过使用一个传递给它的根元素来工作，它生成HTML表格的元素并将其作为childElements添加到其中。它生成并填充一个标题行，该行要么使用JSON对象的字段名，要么使用提供的配置JSON对象。它使用JSON对象中的数据填充单元格元素，并根据选定的页码生成导航链接集。

GridView对象的初始化代码如下

function getPersons() {
  try {
    $.getJSON("/CPArticle1/GetJsonPersons", null, function (data) {
      try {
        var dtPersons = eval(data);
        window.oGridView = new GridView("Grid1_");      .
        oGridView.jsonConfig = Grid1_Layout;
        oGridView.dataTable = dtPersons;
        oGridView.displayPage();
      }
      catch (ex1) {
        alert(ex1);
      }
    });
  }
  catch (ex) {
      alert(ex);
  }
}

window.oGridView = new GridView("Grid1_"); - 初始化GridView对象，将HTML body中的根div元素的ID Grid1_传递给它。

oGridView.jsonConfig = Grid1_Layout; - 分配一个JSON配置对象，稍后将对其进行描述。如果注释掉此行，GridView将解析并显示所有JSON数据列，并使用JSON数据对象dtPersons中的数据字段名填充标题。

oGridView.dataTable = dtPersons; - 分配要显示JSON数据对象。

oGridView.displayPage(); - 开始显示。

可选的网格布局JSON对象允许自定义GridView列

var Grid1_Layout = [{
    "DataField": "UserID",
    "HeaderText": "User ID",
    "Width": "100px",
    "HyperLinkField": showPopUp
},
{
    "DataField": "FirstName",
    "HeaderText": "First Name",
    "Width": "150px"
},
{
    "DataField": "LastName",
    "HeaderText": "Last Name",
    "Width": "150px"
},
{
    "DataField": "DateJoined",
    "HeaderText": "Date Joined",
    "Width": "150px"
}
]
  • "DataField": "UserID" - 指定列1的数据字段名，即在数据对象dtPersons中的名称。字段名必须存在于JSON数据对象中。
  • "HeaderText": "User ID" - 显示在第一列的标题中
  • "Width": "100px" - 列宽，请注意它是带px的文本，而不是数字。
  • "HyperLinkField": showPopUp - 可选字段。如果您希望将GridView列与回调函数链接，可以在此处指定。GridView将在此列中添加一个链接，该链接的click事件将连接到指定的函数（showPopUp），并且该函数将接收被点击行整个JSON数据记录作为参数。

在此示例中，该函数将显示一个模态弹出窗口，其中包含传递给它的行数据

function showPopUp(dataRow) {
    var oPopUp = new popUp("Grid1_PopUp");
    oPopUp.jsonConfig = Grid1_Layout;
    oPopUp.jsonData = dataRow;
    oPopUp.Show();
}

需要注意的是，您必须在外部回调函数中指定dataRow参数。它将接收来自JSON数据行的行数据。

GridView对象的外观可以完全通过CSS类进行自定义

.Grid1_Table {
  border: 1px solid black; border-spacing: 0px;
}

/* Header Properties */
.Grid1_HeaderRow {
  border: 1px solid black;
  font-weight: bold; font-size: 15px; color: #FFFFFF;
  height: 35px; background-color: #777777;
}

.Grid1_HeaderCell {
  border: 1px solid black; padding: 3px;
  text-overflow: ellipsis; overflow: hidden;
  white-space: nowrap; text-align: center;
}

/* Table Body Properties - Row and Cell elements*/
.Grid1_Row {
  height: 35px;
}

.Grid1_Row:nth-child(odd) {
  background-color: #DDDDDD;
}

.Grid1_Cell {
  border: 1px solid #777777; padding: 5px; text-align: center;
}

/* Footer Properties */
.Grid1_FooterRow {
  height: 40px;
}

/*  Navigation Properties */
.Grid1_NavigationLink {
  display: inline-block; text-decoration: none; text-align: center; width: 18px;
  padding: 5px; font-size: 16px; color: #444444;
}

.Grid1_NavigationLink:hover {
  background-color: #888888; color: #FFFFFF; border-radius: 4px;
}

.Grid1_NavigationCurrentPage {
  display: inline-block;
  width: 18px; padding: 5px;
  font-size: 16px; text-decoration: none; text-align: center;
  background-color: #444444; color: #FFFFFF; border-radius: 4px;
}

.Grid1_CellLink {
  color: black;
  padding: 5px;
}
        
.Grid1_CellLink:hover {
  background-color: #888888; color: #FFFFFF; border-radius: 4px;
}
        
#Grid1_Error {
  position: absolute; top: 10px; left: 50px; background-color: Red; 
            padding: 3px; color: white; display: none;
}

如您所见，约定是取根元素的ID，并在其后添加一些额外的文本。如果您传递给GridView的根元素的ID是“AnotherRootElement_”，则指定的类必须如下所示：.AnotherRootElement_HeaderRow或.AnotherRootElement_NavigationLink。

  • .Grid1_HeaderRow或rootElementIDHeaderRow用于设置表格标题行的属性
  • .Grid1_HeaderCell - 标题列的属性
  • .Grid1_Row和.Grid1_Row:nth-child(odd) - 允许您指定网格行的属性
  • .Grid1_CellLink - 指定JSON配置对象中指定的链接列的属性。

关注点

此处描述的GridView类对象只有300行代码，而且格式宽松。它相当轻量级，并已在具有数千行和约一百列的实际数据表上进行了测试。测试期间性能极快。

它已在最新版本的Internet Explorer、Chrome和Firefox中进行了测试。不确定旧的浏览器如何处理它。未来还将有一个大量使用jQuery的版本，该版本将作为插件发布。

© . All rights reserved.