在Web开发中，经常需要以网格形式展示信息。通常，会使用各种基于JavaScript和jQuery的插件来实现这一需求。然而，在处理一个特定需求时，发现现有的许多网格插件都无法同时满足处理JSON数据、应用各种模板和自定义设置以及保持轻量级的要求。需要动态更新数据、基于事件的行更新、将输入元素直接绑定到JSON数据源、处理复杂的模板等。虽然像AngularJS、Sencha这样的框架可以帮助实现这些功能，但它们体积庞大，仅仅为了创建一个网格就加载整个框架是不必要的。因此，决定开发一个完全基于JavaScript且不依赖于jQuery等支持库的插件来解决这个问题。
GridJS插件具有以下优点：
在设计这个插件时，考虑到在创建Web UI网格时可能会有各种各样的需求，用户应该能够微调整个网格模板。GridJS插件提供了一种非常简单的方式来设置UI网格并将JSON数据绑定到它上面。
这个插件以JSON数组格式作为其数据源。这样做的好处是，只要数据是JSON格式的，就可以灵活地将任何数据作为网格的数据源。
可以在网格中使用模板（形式为{{value}}），模板可以是JSON数组数据源中的任何对象属性，可以是一系列对象和属性，甚至可以是自定义函数，用于根据规则为数据网格分配值。
输入绑定非常简单。任何输入元素都可以直接绑定到JSON数组中的特定属性。网格的数据源会根据用户在输入字段中的输入进行更新。甚至可以单独获取数据更改。
每一行、每一列以及包含ID的输入元素（如果分配了ID）都将具有唯一ID，以便在渲染网格后进行后续处理和引用。
单个网格页面可以包含任意数量的行，其余的可以通过分页访问，分页可以在定义单页行数后随时激活。
网格加载、行添加、页面更改前、页面更改后等都有事件处理。
可以有任意数量的连续颜色来着色行。当所有颜色序列都应用完毕后，循环从颜色列表的开始重复。这使能够以最小的努力创建出外观出色的网格。
几乎可以对网格内的任何元素应用自定义CSS。可以为整个网格、标题、数据行、特定列以及分页的正常和活动数字设置自定义CSS类。
有时，需要有非常大的网格，包含成千上万的记录。这个插件可以处理大量的记录，甚至可以提供分页支持。
使用这个插件非常简单。首先，需要为网格创建一个HTML标记，就像为任何其他表格所做的那样。然后，只需要应用模板来显示网格中的值。模板功能允许直接用JSON数组数据源中的具体数据替换模板。
在HTML页面中包含GridJS脚本。
按照以下方式创建网格标记：
使用
在
在
在
在
但是，即使浏览器不支持registerElement，网格仍然会被渲染，但自定义元素不会被浏览器识别。有关更多信息，请参考此链接：http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
Order ID
Customer ID
Emp ID
Order Date
Shipped Date
Freight
Ship Name
Ship City
Ship Postal Code
Ship Country
{{OrderID}}
{{CustomerID}}
{{EmployeeID}}
{{GetOrderDate()}}
{{GetShippedDate()}}
{{Freight}}
{{ShipName}}
{{ShipCity}}
{{ShipPostalCode}}
{{ShipCountry}}
之后，唯一剩下的就是初始化一个新的gridJS对象，并设置其属性和数据源以启动UI网格。
var gridJS = new GridJS({
gridId: 'gridNorthWind',
dataSource: NorthWindDataSource,
cellPadding: 6,
pagination: 10,
pageButtonCss: { normalCss: 'NorthWindPaginationButton', activeCss: '' },
dataRowColors: ["#0B6121", "#0A2A0A"]
})
.addCustomFunction("GetOrderDate", function(data, rowIndex) {
var date = new Date(Date.parse(data[rowIndex].OrderDate));
return getDate(date);
})
.addCustomFunction("GetShippedDate", function(data, rowIndex) {
var date = new Date(Date.parse(data[rowIndex].ShippedDate));
return getDate(date);
});
// 返回有意义的日期格式
function getDate(rawDate) {
var month = rawDate.getMonth(),
day = rawDate.getDate(),
year = rawDate.getYear();
return month + "/" + day + "/" + year;
}
示例数据源，形式为Json数组：
(function(w) {
var northWindDataSource = {
"odata.metadata": "http://services.odata.org/V3/Northwind/Northwind.svc/$metadata#Orders",
"value": [
{
"Order_Details": [
{
"OrderID": 10248,
"ProductID": 11,
"UnitPrice": "14.0000",
"Quantity": 12,
"Discount": 0
},
// ...
],
"OrderID": 10248,
"CustomerID": "VINET",
"EmployeeID": 5,
"OrderDate": "1996-07-04T00:00:00",
"RequiredDate": "1996-08-01T00:00:00",
"ShippedDate": "1996-07-16T00:00:00",
"ShipVia": 3,
"Freight": "32.3800",
"ShipName": "Vins et alcools Chevalier",
"ShipAddress": "59 rue de l'Abbaye",
"ShipCity": "Reims",
"ShipRegion": null,
"ShipPostalCode": "51100",
"ShipCountry": "France"
},
// ...
]
};
w["NorthWindDataSource"] = northWindDataSource.value;
})(window);
调用gridJS对象的draw()函数来绘制网格。
gridJS().draw();
就这样，面前有一个具有所有数据绑定的UI网格，创建它时毫不费力。
这个插件的代码将自定义