使用SharpKit构建客户端网格控件

分享于 

11分钟阅读

Web开发

  繁體

 grid.png

介绍

这里示例代码将向你演示如何使用 SharpKit控件编写客户端网格控件。是一个工具,它允许你在编译期间编写 C# 代码并转换它。 这个过程帮助你更快地编写代码,并减少错误,它还帮助你记录代码,以便其他开发人员更容易地使用代码。 因此,为了避免混淆,这里的代码将显示在 C# 中,但实际上是标准JavaScript代码,并且可以在/不使用 SharpKit的情况下使用/。

首先学习如何实现网格,然后继续使用网格,然后学习如何优化DOM操作,以支持遗留浏览器,以支持遗留浏览器。

实现网格

网格类

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

这里网格类旨在在以下 Pattern 中使用:

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

GridRow类

网格类有一个 Collection 行,其中每一行的类型为 GridRow。 GridRow是一个json类,这意味着它只用于包含行数据,我们将包含对该行的引用,以及将行与一些数据对象相关联的数据属性。

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

GridRow 类被设计用于在以下 Pattern 中使用:

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

添加行

现在是时候实现一个AddRow方法,将GridRow添加到行 Collection 中,并将它追加到DOM中。

publicvoid 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);
}

这个方法只是克隆一个元素,在我们的例子中,这个元素将被克隆为网格中每一行的tr 元素。

使用网格

现在,我们已经准备好使用网格:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Grid Demo - SharpKitSamples</title><linkhref="Grid.css"rel="stylesheet"type="text/css"/><scriptsrc="res/jquery-1.6.4.min.js"type="text/javascript"></script><scriptsrc="Grid.js"type="text/javascript"></script><scriptsrc="GridDemo.js"></script><script>$(Load);</script></head><body><h1>Grid Demo</h1><tableid="MyGrid"class="Grid"><thead><tr><th>Name</th><th>Age</th><th>Phone Number</th><th>Description</th></tr></thead><tbodystyle="display: none"><trid="MyGridRowTemplate"><tdclass="CellName"></td><tdclass="CellAge"></td><tdclass="CellPhoneNumber"></td><tdclass="CellDescription"></td></tr></tbody></table></body></html>

这个html文件包含一个 table 元素,用于网格,包含一些标题和一个行模板。 我们可以克隆此行在网格中创建新行。 你还可以注意到 $(Load) 代码实际上是jQuery就绪事件,这意味着当DOM就绪时,Load() 函数将被调用。

[JsType(JsMode.Global, Filename = "GridDemo.js")]publicclass GridDemoClient : jQueryContextBase
{
 publicstaticvoid 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元素,并将来自contact实例的数据绑定到每个行。

实现排序

使用实体网格 API,很容易实现像排序这样的功能,我们要做的就是清除网格中的行。

publicstaticvoid 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")]staticclass JsArrayExtensions
{
 publicstatic 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)));
 else array2.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)
 return1;
 if (xx < yy)
 return -1;
 return0;
 }
}

这是对JavaScript数组的简化LINQ排序实现,它使用扩展方法实现,使代码使用更加容易和可读。 它仍然被SharpKit转换为纯 JavaScript。

下一步是支持任何属性排序,并记住我们做的最后一次排序,在升序排序和降序排序之间进行切换。 我们还应该更改当前排序列的外观,因这里用户将了解网格已经排序。

static Grid Grid;static HtmlTableCell LastSortHeader;static JsString LastSort;staticbool IsLastSortDescending;publicstaticvoid 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);
}

现在,在单击网格标头时,只需调用SortBy方法即可:

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

就是这样简单直观快速而且高度可以定制。

优化网格

旧的浏览器可能会慢,有时简单的jQuery使用可能会导致在of的浏览器中的性能损坏。 SharpKit 允许我通过实现扩展方法来轻松地做到这一点。 它使代码易于阅读和维护。

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

现在,我可以使用 el.AppendChildFast(),就好像它是一个对,的方法,事实上它是一个 static 扩展方法。 关于这种方法,在老的浏览器中,appendChild() 可以能非常慢,因为浏览器会在到达结束之前重新加入。 这里方法获取指向lastChild的指针,并使用 insertAdjacentElement 方法添加不包含这里开销的元素。

Points of Interest

总之,编写JavaScript代码有时很复杂,使用 SharpKit插件允许我们专注于编写代码,并在以后执行重构和清理。 还可以添加xml文档并生成帮助文件,以允许其他开发人员轻松地集成你的组件。


控制  构建  SHA  GRID  Building  SID  
相关文章