Essential Studio for JavaScript是包含了超过80+ JavaScript的界面控件套包产品,常用的表格、图表、条码、按钮、复选框、列表框、甘特图、联机分析处理表格、菜单、工具栏等,在这篇文章中主要介绍该控件里常用的表格控件如何进行数据绑定,该Grid控件支持3种数据源:本地数据、服务器上数据以及HTML表格,下面就这三种类型如何进行绑定作介绍:
1.绑定本地数据
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
// Data for grid.
window.gridData = [
{ firstName: "John", lastName: "Beckett", email: "john@Syncfusion.com" },
{ firstName: "Ben", lastName: "Beckett", email: "ben@Syncfusion.com" },
{ firstName: "Andrew", lastName: "Beckett", email: "andrew@Syncfusion.com" }
];
$("#Grid").ejGrid({
dataSource:window.gridData,
columns: [
{ field: "firstName",headerText:"First Name" },
{ field: "lastName", headerText: "Last Name" },
{ field: "email", headerText: "Email" }
]
});
});
</script>
2.绑定远程数据
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
//oData Adaptor with DataManager
var dataManager = ej.DataManager("http://mvc.Syncfusion.com/Services/Northwnd.svc/Products");
$("#Grid").ejGrid({
dataSource: dataManager,
columns: ["ProductID", "ProductName", "SupplierID", "UnitPrice"]
});
});
</script>
3.在绑定数据时可以设置一次性加载完数据或者是按需加载
1):一次性加载数据
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
//oData Adaptor with DataManager
var dataManager = ej.DataManager({
url: "http://mvc.Syncfusion.com/Services/Northwnd.svc/Products",
offline: true
});
$("#Grid").ejGrid({
dataSource: dataManager,
allowPaging: true,
columns: ["ProductID", "ProductName", "SupplierID", "UnitPrice"]
});
});
</script>
2):按需加载数据
<div id="Grid"></div>
<script type="text/javascript">
$(function () {// Document is ready.
//oData Adaptor with DataManager
var dataManager = ej.DataManager("http://mvc.Syncfusion.com/Services/Northwnd.svc/Products");
$("#Grid").ejGrid({
dataSource: dataManager,
allowPaging: true,
columns: ["ProductID", "ProductName", "SupplierID", "UnitPrice"]
});
});
</script>
4.绑定HTML表格
<script type="text/javascript">
$(function () {// Document is ready.
$("#Grid").ejGrid({
dataSource: ej.DataManager($("#Table1")), // binds table to grid
columns: [
{ field: "Laptop", headerText: "Laptop Brands"},
{ field: "Model", headerText: "Model" },
{ field: "Price", headerText: "Price", width: 90, textAlign: ej.TextAlign.Right, format: " ${0:c}" },
{ field: "OS", headerText: "Operating System" },
{ field: "RAM", headerText: "RAM", width: 120, textAlign: ej.TextAlign.Right },
{ field: "ScreenSize", headerText: "Screen Size", textAlign: ej.TextAlign.Right, width: 100, format:
"{0:N1} inch" }
]
});
});
</script>
<div id="Grid"></div>
<table id="Table1">
<thead>
<tr>
<th>
Laptop
</th>
<th>
Model
</th>
<th>
Price
</th>
<th>
OS
</th>
<th>
RAM
</th>
<th>
ScreenSize
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dell Vostro</td>
<td>2520</td>
<td>39990</td>
<td>Windows 8</td>
<td>4GB</td>
<td>15.6</td>
</tr>
<tr>
<td>HP Pavilion Sleekbook</td>
<td>14-B104AU</td>
<td>22800</td>
<td>Windows 8</td>
<td>2GB</td>
<td>14</td>
</tr>
<tr>
<td>Sony Vaio</td>
<td>E14A15</td>
<td>42500</td>
<td>Windows 7 Home Premium</td>
<td>4GB DDR3 RAM</td>
<td>14</td>
</tr>
<tr>
<td>Lenovo</td>
<td>Yoga 13</td>
<td>57000</td>
<td>Windows 8 RT</td>
<td>2GB DDR3 RAM</td>
<td>11.6</td>
</tr>
<tr>
<td>Toshiba</td>
<td>L850-Y3110</td>
<td>57700</td>
<td>Windows 8 SL</td>
<td>8GB DDR3 RAM</td>
<td>15.6</td>
</tr>
</tbody>
</table>