介绍

实现Grid

Grid类

GridRow类

添加一行

从模板创建行元素

使用Grid

实现排序

优化Grid

兴趣点

下载源41.33 KB
下载SharpKit

介绍

此示例代码将向您展示如何使用SharpKit编写客户端Grid控件。SharpKit是一个工具，可让您编写C＃代码并将其在编译过程中转换为JavaScript。此过程可以帮助您更快地编写代码，并且错误更少，还可以帮助您记录代码，以便其他开发人员可以更轻松地使用它。因此，为避免混淆，此处的所有代码都将以C＃显示，但实际上，它是标准的JavaScript代码，之后可以与/不与SharpKit一起使用。

我们将首先学习如何实现Grid，然后继续使用Grid，最后学习如何优化DOM操作以支持旧版浏览器。

实现Grid

Grid类

[JsType(JsMode.Prototype, Filename = "Grid.js")]
public class Grid : HtmlContext
{public Grid(){Rows = new JsArray<GridRow>();}public HtmlElement Element { get; set; }public HtmlElement GridBody { get; set; }public JsArray<GridRow> Rows { get; set; }public void Render(){if (Element == null)return;Element["_Grid"] = this;if (GridBody == null || GridBody.nodeName != "TBODY"){GridBody = document.createElement("TBODY");Element.appendChild(GridBody);}}
}

此Grid类设计用于以下模式：

var grid = new Grid { Element = document.getElementById("MyGrid") };
grid.Render();

GridRow类

该grid类有一个每行是一个GridRow类型的集合。GridRow是一个json类，这意味着它仅用于包含有关行的数据，在本例中，我们将包含对表行元素（TR元素）的引用，以及将行与某些数据对象相关联的Data属性。

[JsType(JsMode.Json)]
public class GridRow
{public HtmlElement Element { get; set; }public object Data { get; set; }
}

所述GridRow类被设计成在以下模式中使用：

var row = new GridRow { Element = grid.CreateRow(document.getElementById("MyGridRowTemplate")) };
grid.AddRow(row);

添加一行

现在是时候实现一个AddRow方法了，该方法将添加一个GridRow到我们的Rows集合中，并将其附加到DOM中。

public void AddRow(GridRow gr)
{var body = GridBody;body.appendChild(gr.Element);gr.Element["_GridRow"] = gr;Rows.push(gr);
}

从模板创建行元素

public HtmlElement CreateRowElement(HtmlElement template)
{return template.cloneNode(true);
}

此方法只是克隆一个元素，在我们的例子中，这将是要为grid中的每一行克隆的TR元素。

使用Grid

现在，我们准备使用grid：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Grid Demo - SharpKitSamples</title><link href="Grid.css" rel="stylesheet" type="text/css" /><script src="res/jquery-1.6.4.min.js" type="text/javascript"></script><script src="Grid.js" type="text/javascript"></script><script src="GridDemo.js"></script><script>$(Load);</script>
</head>
<body>
<h1>Grid Demo</h1><table id="MyGrid" class="Grid"><thead><tr><th>Name</th><th>Age</th><th>Phone Number</th><th>Description</th></tr></thead><tbody style="display: none"><tr id="MyGridRowTemplate"><td class="CellName"></td><td class="CellAge"></td><td class="CellPhoneNumber"></td><td class="CellDescription"></td></tr></tbody></table>
</body>
</html>

该HTML文件包含一个TABLE元素，用于grid，带有一些标题和一个行模板。我们可以克隆此行以在grid中创建新行。您还会注意到实际上是jQuery ready事件的$(Load)代码，这意味着当DOM准备就绪时，Load()将调用该函数。

[JsType(JsMode.Global, Filename = "GridDemo.js")]
public class GridDemoClient : jQueryContextBase
{public static void Load(){var list = new JsArray<Contact>();for (var i = 0; i < 30; i++){var c = new Contact { Name = "MyContact" + i, Age = i, PhoneNumber = "44557799" + i, Description="This is a contact "+i };list.push(c);}var grid = new Grid { Element = document.getElementById("MyGrid") };grid.Render();foreach (var c in list){var row = new GridRow { Element = grid.CreateRow(document.getElementById("MyGridRowTemplate")), Data = c };var tr = J(row.Element);tr.find(".CellName").text(c.Name);tr.find(".CellPhoneNumber").text(c.PhoneNumber);tr.find(".CellAge").text(c.Age.ToString());tr.find(".CellDescription").text(c.Description);grid.AddRow(row);}}
}

在此代码中，我们将生成30个样本联系人，然后为其创建GridRow对象，还创建从模板中克隆的TR元素，并将联系人实例中的数据绑定到每一行。

实现排序

使用solid Grid API，可以很容易地实现诸如排序之类的功能，我们要做的就是清除Grid中的行，对其进行排序，然后将其呈现回Grid中。

public static void SortByName()
{var rows = Grid.Rows.OrderBy(t => t.Data.As<Contact>().Name);Grid.DeleteAllRows();foreach (var row in rows)Grid.AddRow(row);
}

OrderBy 方法是在小型实用程序类中实现的自定义扩展方法：

[JsType(JsMode.Prototype, Filename = "GridDemo.js")]
static class JsArrayExtensions
{public static JsArray<T> OrderBy<T>(this JsArray<T> array, JsFunc<T, object> selector, bool desc){var array2 = array.slice(0);if (!desc)array2.sort((x, y) => Compare(selector(x), selector(y)));elsearray2.sort((x, y) => CompareDesc(selector(x), selector(y)));return array2;}static JsNumber Compare(object x, object y){var xx = x.As<int>();var yy = y.As<int>();if (xx > yy)return 1;if (xx < yy)return -1;return 0;}
}

这是在JavaScript数组上的简化的LINQ排序实现，它使用扩展方法实现，以使代码使用更容易且更具可读性。SharpKit仍将其转换为纯JavaScript。

下一步是支持按任何属性进行排序，并记住我们完成的最后排序，以便在Ascending和Descending排序之间进行切换。我们还应该更改当前已排序列的外观，以便用户理解grid已经排序了。

static Grid Grid;
static HtmlTableCell LastSortHeader;
static JsString LastSort;
static bool IsLastSortDescending;
public static void SortBy(HtmlTableCell header, JsString pe)
{J(LastSortHeader).removeClass("Sorted").removeClass("Descending");IsLastSortDescending = LastSort == pe && !IsLastSortDescending;LastSort = pe;LastSortHeader = header;J(LastSortHeader).addClass("Sorted");J(LastSortHeader).toggleClass("Descending", IsLastSortDescending);var rows = Grid.Rows.OrderBy(t => t.Data.As<JsObject>()[pe], IsLastSortDescending);Grid.DeleteAllRows();foreach (var row in rows)Grid.AddRow(row);
}

现在所缺少的就是y单击grid标题时调用SortB方法：

<table id="MyGrid" class="Grid"><thead><tr><th onclick="SortBy(this, 'Name');">Name</th><th onclick="SortBy(this, 'Age');">Age</th><th onclick="SortBy(this, 'PhoneNumber');">Phone Number</th><th onclick="SortBy(this, 'Description');">Description</th></tr></thead><tbody style="display: none"><tr id="MyGridRowTemplate"><td class="CellName"></td><td class="CellAge"></td><td class="CellPhoneNumber"></td><td class="CellDescription"></td></tr></tbody>
</table>

就是这样，简单，直接，快速且高度可定制。

优化Grid

旧版浏览器可能会变慢，有时简单的jQuery使用可能会导致IE7等浏览器的性能下降，有时您不得不动手实践自己的优化DOM API。SharpKit使我可以通过实现扩展方法轻松地做到这一点。它使代码易于阅读和维护。

[JsType(JsMode.Prototype, Filename = "Grid.js")]
static class Extensions
{public static void AppendChildFast(this HtmlElement el, HtmlElement newElement, HtmlElement lastChild){if (lastChild != null && SupportsInsertAdjacentElement)lastChild.insertAdjacentElement("afterEnd", newElement);elseel.appendChild(newElement);}
}

现在，我可以使用el.AppendChildFast()，就好像它是HtmlElement上的方法一样，而实际上，它是一个static扩展方法。关于此方法，在旧的浏览器（如IE7）中，appendChild()可能会非常慢，因为浏览器会遍历所有同级，直到到达末尾才能添加元素。此方法获取指向lastChild的指针，并使用insertAdjacentElement方法添加元素而没有此开销。

兴趣点

总之，编写JavaScript代码有时可能会很复杂，使用SharpKit可使我们专注于编写代码，然后执行重构和清理。也可以添加XML文档并生成帮助文件，以允许其他开发人员轻松集成您的组件。

使用SharpKit构建客户端Grid控件相关推荐

Winforms 2020界面开发新纪元——Map、Pivot Grid控件升级
DevExpress WinForms Subscription拥有180+组件和UI库,能为Windows Forms平台创建具有影响力的业务解决方案.DevExpress WinForms能完美构 ...
扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip
扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip 原文:扩展ToolBarManager.ListView和Grid控件以实现气球式的ToolTip inf ...
MAUI中构建跨平台原生控件实现
简介 MAUI中使用Handler体系来处理不同平台的原生控件实现, 即对应的, 如果我们想要创建控件, 只需要创建基于不同平台的Handler即可. 那么下面主要教大家如何通过创建Handler(事 ...
wpf研究之道-grid控件
想要说些什么,却不知道从哪开始."形而上谓之道,形而下谓之器".与其坐而论道,不如脚踏实地,从最实用的地方开始. 我们先来看看wpf中的grid控件.grid控件是个网格的布局控件 ...
WPF 控件专题 Grid 控件详解
1.Grid 介绍定义由列和行组成的灵活的网格区域,Grid顾名思义就是"网格",它的子控件被放在一个一个实现定义好的小格子里面,整齐配列,该对象可包含多个 Children对象 ...
基于netty的浏览器客户端打印控件实现
项目地址:https://github.com/w414034207/print-netty 业务场景给客户开发一个web管理系统时,客户要求能够在浏览器点击打印,直接使用客户端的本地打印机打印服务 ...
fine ui grid控件添加行号
grid控件的列中添加如下代码<f:RowNumberField EnablePagingNumber="true" TextAlign="Center" ...
wxpython中grid控件一些用法总结
1. 官网主动查找控件的使用方法 wxpython中grid控件的用法可以通过搜索wxpython网址查看使用方法说明.网址:https://docs.wxpython.org/index.html ...
fineui grid ajax,基于FineUI Grid控件添加右键菜单
FineUI官方Demo上一直没有Grid右键菜单的实现,其实从4.1.x的版本开始,允许添加自定义的事件监听(Listeners),所以要实现这个功能已经相当容易了. ExtJs右键菜单有很多种,对 ...

使用SharpKit构建客户端Grid控件

介绍

实现Grid

Grid类

GridRow类

添加一行

从模板创建行元素

使用Grid

实现排序

优化Grid

兴趣点

使用SharpKit构建客户端Grid控件相关推荐

最新文章

热门文章