目录
介绍
实现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();
}
public HtmlElement Element { get; set; }
public HtmlElement GridBody { get; set; }
public JsArray 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();该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 Demo - SharpKitSamples
$(Load);
Grid Demo
Name
Age
Phone Number
Description
该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();
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().Name);
Grid.DeleteAllRows();
foreach (var row in rows)
Grid.AddRow(row);
}OrderBy 方法是在小型实用程序类中实现的自定义扩展方法：
[JsType(JsMode.Prototype, Filename = "GridDemo.js")]
static class JsArrayExtensions
{
public static JsArray OrderBy(this JsArray array,
JsFunc 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();
var yy = y.As();
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()[pe], IsLastSortDescending);
Grid.DeleteAllRows();
foreach (var row in rows)
Grid.AddRow(row);
}现在所缺少的就是y单击grid标题时调用SortB方法：
Name
Age
Phone Number
Description
就是这样，简单，直接，快速且高度可定制。
旧版浏览器可能会变慢，有时简单的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);
else
el.appendChild(newElement);
}
}现在，我可以使用el.AppendChildFast()，就好像它是HtmlElement上的方法一样，而实际上，它是一个static扩展方法。关于此方法，在旧的浏览器（如IE7）中，appendChild()可能会非常慢，因为浏览器会遍历所有同级，直到到达末尾才能添加元素。此方法获取指向lastChild的指针，并使用insertAdjacentElement方法添加元素而没有此开销。
总之，编写JavaScript代码有时可能会很复杂，使用SharpKit可使我们专注于编写代码，然后执行重构和清理。也可以添加XML文档并生成帮助文件，以允许其他开发人员轻松集成您的组件。
